When you take a peak at your Shopify theme files, you see a number of different folders: layout, templates, sections… the list goes on. These folders all serve a different purpose in building out your theme: locales handle language support, assets handle images and styling, etc. but the bulk of your theme – the HTML – lives in the templates, sections and snippets folders. Today, we’ll be focusing on snippets: What are snippets? How can I use them, and why use snippets at all?
Note: If you plan on editing snippets, or any theme files, yourself, we recommend that you have a thorough understanding of HTML and of Shopify’s templating language, Liquid.
What are Shopify liquid snippets?
Simply put, a snippet is just code; it can be one line, several lines, or even hundreds of lines of code. A snippet file will always have a title ending in ‘.liquid’, and typically the title tells you what the snippet does. For example, you may have a snippet titled “related-products.liquid”; you may have guessed what this does, and you would be correct if you said that it contains code for displaying a few products in the same collection as the current product.
An example of what Shopify liquid snippets might look like:
<quantity-input class="quantity cart-quantity">
<button class="quantity__button" name="minus" type="button">
<span class="visually-hidden">
{{- 'products.product.quantity.decrease' | t: product: variant.title | escape -}}
</span>
{% render 'icon-minus' %}
</button>
<input
class="quantity__input"
data-quantity-variant-id="{{ variant.id }}"
type="number"
name="updates[{{ variant_id }}]"
{% # theme-check-disable %}
value="{{ cart | item_count_for_variant: variant.id }}"
data-cart-quantity="{{ cart | item_count_for_variant: variant.id }}"
min="{{ min }}"
data-min="{{ variant.quantity_rule.min }}"
{% if variant.quantity_rule.max != null %}
max="{{ variant.quantity_rule.max }}"
{% endif %}
step="{{ variant.quantity_rule.increment }}"
{% # theme-check-enable %}
aria-label="{{ 'products.product.quantity.input_label' | t: product: variant.title | escape }}"
id="Quantity-{{ variant.id }}"
data-index="{{ variant.id }}"
>
<button class="quantity__button" name="plus" type="button">
<span class="visually-hidden">
{{- 'products.product.quantity.increase' | t: product: variant.title | escape -}}
</span>
{% render 'icon-plus' %}
</button>
{%- render 'progress-bar' -%}
</quantity-input>
How are Snippets Different from Sections or Templates?
A template is a Shopify page type, and controls what content is rendered on each page – the homepage, collection page, blog article page, and product page are all examples of templates. Templates contain Sections, which are reusable widgets that can be dragged and dropped into the templates through the Shopify customizer. Snippets are reusable files that can be used in templates, sections or other snippets.
In summary: Snippets are really just bits of code that can be plugged in almost anywhere in your theme. Sections are specialized content with their own schema and associated data, designed to be customized by the merchant. Templates are structured layout documents that contain snippets and sections, using Shopify template language: Liquid
How to use liquid snippets in a Shopify theme
How to create a snippet
When working with theme files, there are 2 ways to edit them: through a code IDE, like VSCode, or by editing the files directly through Shopify’s “Edit Code” function in the admin. If you’re using an IDE just create a new file in the ‘snippets folder.’ This allows you to add custom Liquid code for Shopify and other Shopify custom Liquid elements.
[alt tag: The edit code dashboard of a Shopify theme, showing the article-card.liquid snippet.]
If you’re using the Shopify admin, head into your theme’s files by selecting “Online Store”, then “Themes”, click on the 3 dots, and select “Edit HTML/CSS”. From here, you will see a list of files and folders. Expand the “Snippets” folder, and click “Add a new snippet”.
The title you select here is for your purposes, and it is the name you will use when including your snippet in your other files. Typical naming convention is to use all lowercase characters, separate multiple words with a dash (-) or underscore (_), to try to avoid using more than three words, and to make the title something that is relevant to what the code accomplishes and is easy to read. Shopify will automatically add “.liquid” to the end of your file name, so you do not need to include that when naming it. After creating the snippet, paste your desired Liquid code for Shopify in, and click save.
How to add a snippet to another file
A snippet doesn’t appear in your theme all by itself - you have to invoke it! Snippets can be rendered with 1 line of text. For example, if your snippet is named ‘progress-bar.liquid’, you can invoke it from a Shopify template, section, or another snippet by writing {% render ‘progress-bar’ %}. As a note, you may sometimes come across old code that uses the word ‘include’ instead of ‘render’. The term ‘include’ has been deprecated by Shopify, so try and stick with using ‘render’ instead!
Here’s an example of how you can invoke a snippet through the ‘render’ function
{% render 'icon-plus' %}
How to pass data to a snippet
Snippets have access to the same theme data as any other file in your repository. Specific bits of data that aren’t contained in the theme data can be passed through to the snippet.
You can pass as much data to a snippet as you like using this setup:
{% render 'quantity-input', variant: variant, min: 0 %}
In this example, the variables being passed are named “variant” and “min”, and are separated by commas. These variables can then be referenced within the snippet:
<input class="quantity_input" data-quantity-variant-id="{{ variant.id }}">
Best Practices for Liquid Snippets
Cleaning up your Code
The last thing anyone wants is code that is difficult to navigate and/or read. We have browsed a few Shopify stores’ theme files that are nothing but clutter. More often than not, these stores could benefit from organizing code into snippets. Remember, you might not be the only one who will be working with this code, so try to keep it simple to help future developers. While writing Shopify code, we like to, for example, place the footer and header contents into snippets, allowing for a very clean theme.liquid file. Also ensuring that anything in the footer of the site can be found in the footer snippet.
Keeping old code safe
While the idea behind developing a site is typically to leave the old code behind and move forward, it can sometimes help to keep the old code tucked away in a snippet just in case you want to switch back. This may be very helpful if you are doing a complete restructure of a particular section of the site. For example, you may wish to move the main navigation from under the logo to the right of the logo. This process might seem simple, but it’s always nice to have a backup in case something goes wrong. You can create a Shopify liquid snippet to save old code in 3 easy steps:
- Locate the code you are looking to edit. This will typically be located in your theme.liquid file, or a page template file.
- Cut out the desired code and paste it into a snippet with a title ending in “-old”.
- Also paste it into a new snippet, and include this new snippet where the old code lay.
You can now edit this new snippet without any worries. If something on the site breaks, just switch the include to use the old snippet while you work on a fix.
If you’re using a code IDE and have your code connected to github, these steps may not be necessary.
Use Snippets at the right time, in the right place
Can I use too many snippets?
Yes and no – the Liquid code behind the snippets processes extremely quickly, so you won’t really hurt your page speed; however, there are many times when using snippets is not beneficial. It can make code trickier for future developers to read, since the code is referencing so many other files, and can bloat your snippets folder.
How do I know when I should refactor my code into a snippet?
Ask yourself a few questions before making a snippet:
- Will I be using this code segment across multiple pages or sections of my site?
- Is this code bloating a major theme layout file (theme.liquid, product.liquid, etc.), and will it make my code easier to read if it isn’t here?
- Do I plan on sharing this code with another user or site?
- Am I editing code from an existing theme in a major way, and I want to keep a backup of the old code safe?
If you were unable to answer yes to any of these questions, you probably do not need a snippet in this case. This brings us to a more advanced use for snippets, which you would probably only utilize if you are a theme developer, or your client wants easy theme settings.
Final Thoughts on Snippets
Snippets can be a great way to share code easily with other store owners. If you have ever searched the web for some code to add to your Shopify store, you may have come across a file to copy and paste into a snippet on your site. And then you were told to include this snippet in your Shopify template file. This may seem like extra steps, but it actually helps to keep your code clean, and can allow for very easy insertion of code with a reduced chance of something breaking. Many apps also use snippets to insert their code into the proper places across your site.
Snippets are not solely to be used as a means to include code that you obtain from an outside source, but they can also be a great way to keep your own thoughts organized, create reusable code (that you might use across multiple pages on your site), or even keep old code in a secure location so you can always bring it back at a later time.
If you’re interested in learning a bit more about snippets as they apply in other languages, consider this Drupal article for more information. Should you have any more questions about anything we've covered, feel free to reach out to our team directly at info@arcticleaf.io.
