Tips for Using Snippets in Your Shopify Theme

Tips for Using Snippets in Your Shopify Theme

Using snippets for shopify theme development

If you have worked with server-side languages you will already be familiar with the concept of partials or includes. In Shopify, includes/partials are known as snippets. To help you understand how Shopify uses them, here's a brief overview:

  • Snippets are files containing chunks of reusable code.
  • They reside in the snippets folder.
  • They have the .liquid extension.
  • They are most often used for code that appears on more than one page but not across the entire theme.
  • Snippets are included in a template using the Liquid tag include e.g. % include ‘snippet name’ %}.
  • You do not need to append the .liquid extension when referencing the snippet name.
  • When a snippet is included it will have access to the variables within its parent template.
  • Examples of snippets include social links and pagination blocks.

You might also like: An In-Depth Look Into Designing a Shopify Theme

Advanced snippet use

Snippets are extremely useful and allow you to keep repeated code in a single file. Above all, this has the benefit of enabling us to update all instances of that code from one file.

I use snippets a lot when designing themes. The main benefit I find is that they allow me to concentrate on discrete chunks of code, as opposed to dealing with long files. Given that there’s no performance disadvantage, I find that it’s just a nice way of working.

Of course, everyone has a different workflow style. But beyond the aesthetic and organisational benefits of snippets, there are other reasons that you might wish to consider using them.

Conditional loading of snippets

One example of an alternative use of a snippet is conditional loading. For example, let’s say we wanted to show a special offer box for a set of particular products, each of which has “coffee cup” in their product handle.

Every object within Shopify has a unique “handle”. In other platforms, such as WordPress, this is known as a “slug”. A handle is a URL-safe representation of an object. Every product has a handle that is automatically created based on the product title, but you have the potential to manipulate the handle in the admin to be whatever you like.

Given their unique nature, handles are easy to use in Shopify templates for comparison. By using a simple Liquid if statement, we can check for the current products handle and make a decision on whether to include the snippet or not.

Here’s an example to explain the concept that would be placed in product.liquid:

{% if product.handle contains “coffee-cup” %}
{% include “special-offer” %}
{% endif %}

As you can see this if statement checks for the currently viewed products handle. If the returned value contains coffee-cup then the template will include the snippet special-offer. If the returned value doesn’t match, the template will simply carry on rendering.

This is a very simplistic example of conditional loading, but it shows how we can use the power of Liquid in order to output different markup dependent on the product. By using this simple method, you can create exceedingly flexible themes.

Naming conventions

As mentioned earlier, the snippets folder acts as one big bucket for all of your themes snippet files. As a result, I tend to prefix my files with their function to make working with them cleaner and easier.

For example:

  • product-limited-edition-coffee-cup.liquid
  • product-showcase.liquid
  • collections-coffee-cups.liquid

You’ll notice that these are very much in line with the template naming conventions, making them much easier to integrate into my workflow.

Variable scope

When a snippet is included in a template file, it will have access to the variables within its parent template. As long as the snippet references the relevant variables, e.g. product when included in the product.liquid template, things will work as expected.

However what if we would like to make use of a snippet, but reference data that is neither a global or template variable? In order to achieve this, we simply use the Liquid tag {% assign %}.

Here’s an example:

{% assign snippet_variable_1 = ‘my name is Keir’ %}
{% assign snippet_variable_2 = ‘your name is George’ %}
{% include ‘snippet’ %}

The snippet will now have access to both snippet_variable_1 and snippet_variable_2. We could also make a Liquid collection available in the following format:

{% assign all_products = collections.all.products %}
{% include ‘snippet’ %}

Using ‘with’

To round out our look at snippets, I’d like to spend some time looking at an example that uses the include tag parameter with. This approach really shows off the power of snippets and allows us to create reusable code that can be used in a variety of contexts.

To set the scene, let’s say we have a snippet that allows us to output a product collection in a template. Here’s a very basic example that we could save as collection-product-list.liquid:

{% for product in collections.all.products %}
<li><a href= "{{ product.url}}">{{ product.title}}</a>
{% endfor %}

Since the collections variable is global, this will work as intended in any template. This snippet simply outputs an unordered list of links to every product in the store.

What if we wanted to make it possible to work with any individual product collection? In order to achieve this we need to refactor the snippet to:

{% for product in collection-product-list %}
<li><a href= "{{ product.url}}">{{ product.title}}</a>
{% endfor %}

You’ll notice that instead of looping over every item in the collections.all.products Liquid collection we have a placeholder variable that has the same name as our snippet minus the .liquid extension.

Let’s have a look at how we make use of this more generic snippet:

{% assign c = collections.all.products %}
{% include ‘collection-product-list’ with c %}

Firstly, we are assigning the collection. all.products to a Liquid variable. In this instance, it’s called c but can be named however you see fit.

Next we move onto the include tag and reference the snippet without the .liquid extension and follow it with with c. The with parameter assigns a value to a variable inside a snippet that shares the same name as the snippet. Whilst this might sound confusing at first, have a quick look at the example above which has the following line in:

{% for product in collection-product-list %}

Effectively what is happening is that the variable c is referenced within the snippet by collection-product-list. As such, our snippet will now function with any product collection we pass in using the with parameter.

Extending our generic snippet

It’s also possible to pass in more than one variable to our snippet. A good example of this might be the number of products to show. We can achieve this in our snippet by using a limit clause on the <for loop.

Here’s the refactored snippet:

{% for product in collection-product-list limit: limit_count %}
<li><a href= "{{ product.url }}">{{ product.title }}</a> 
{% endfor %}

And here’s how we would pass in a value for our limit clause to reference:

{% assign c = collections.all.products %}
{% include ‘collection-product-list’ with c, limit_count: 2 %}

When the snippet is rendered it will exit after the second loop. This makes our snippet even more generic and will allow us to use it in a variety of situations.

Note that omitting this variable will mean all the items in the Liquid collection are iterated over. Also if the limit_count is higher than the number of items in the list, it will exit the for loop after the final list item.

You can pass in further variables by comma-separating them after the with parameter. For example:

% include ‘collection-product-list’ with c, limit_count: 2, heading_text: ‘All Products’ %}

You can output the heading_text within the snippet in the following way:

{{ heading_text }}

Start using snippets today

Whilst snippets might at first, seem to be just another simple tool in your arsenal, it’s possible to turn them into very powerful part of your theme that allows you to create boilerplate markup that can be used in a variety of contexts.

Want to learn more about building with Shopify? Check out our full list of Shopify tutorials.

You might also like: How to Get Published in the Shopify Theme Store

Photo of Keir Whitaker

About the Author

Keir is based in the UK and works on the Partner Growth Team at Shopify. You'll often find him at conferences and running workshops on Shopify theme building. You can subscribe to his newsletter, read his latest articles on Medium, listen to his podcast, and follow him on Twitter.

Grow your business with the Shopify Partner Program

Learn more