Shopify Liquid Snippets - Our Flexible Friends

Learning Center

Shopify Liquid Snippets - Our Flexible Friends | Arctic Leaf

By: Arctic Leaf Team | May 30, 2019 | 5 Minute Read

If you have ever opened up the HTML/CSS theme files in your Shopify theme admin, you may have noticed a group of files titled “Snippets” that all end with a “.liquid” extension. What are snippets? How can I use them, and why use snippets at all?

You might have these and many more questions, fears or concerns before reading this article; however, by the end you will be excited to utilize snippets throughout your store and even work on creating your own.

list-of-liquid-snippets

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.

newsletter-snippet

How to use liquid snippets in a Shopify theme

The fundamentals of including a snippet in your Shopify store’s liquid are the “include” tag and the snippet file. To create a snippet, first 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 code in, and click save. Now that we have created a snippet, the only thing left to do is include this in the desired location. The include tag is how we accomplish this – but you may now be wondering, why?

Why use snippets?

Snippets can be a great way to share code easily with other store owners. If you have ever searched 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 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.

Creating reusable snippets

Many sites use repeating sections on their site, whether it be a logo slider, a testimonial rotator, or a featured product section. If you know you are going to want some rotating testimonials on your site on more than just a single page, consider making a snippet containing the basic code layout. The amazing part of snippets is that you can tell the snippet what content to actually output, depending on where the snippet is being included.

The ‘with statement’ in a snippet include allows for using a single snippet to accomplish many things. When you say , you are passing that variable ‘X’ through to the snippet. You can then set up your snippet to take this variable and use it allow for different code based on what you pass through as the variable. For example, if you want to show some products, most themes use a ‘product-grid-item’ snippet. But what if you want products on the homepage to have a slightly different look? That’s where the “if” statement comes in handy.

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 working on my themes, we like to, for example, place the footer and header contents into snippets, allowing for a very clean theme.liquid file. This way also helps because we know that anything in the footer of the site can be found in the footer snippet. Lastly, this can come in handy when editing an existing theme by allowing you to keep the old code.

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 snippet to save old code in 3 easy steps:

  1. Locate the code you are looking to edit. This will typically be located in your theme.liquid file, or a page template file.
  2. Cut out the desired code and paste it into a snippet with a title ending in “-old”.
  3. 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.

Can I overuse 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. Ask yourself a few questions before making a snippet:

  • Will I be using this code segment across multiple pages or sections of my site? Or, can I use this code in one of several locations based on settings?
  • 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.

Using a snippet with an IF statement

Through the development of themes, and trying to make things easy on our clients, we have started adding more theme options whenever we build a Shopify site. You can learn more about creating theme settings in my previous blog: Shopify Liquid Custom Fields. As an example, one option we give to users in our theme is whether to include their newsletter signup form within a column of the footer, or above the footer as a full-width row.

newsletter-above-footer

 

newsletter-in-footer

As you can see from these two images, both call for the same snippet, but only one will be used, based on what the user selects for the setting of ‘newsletter_enable’. This allows us as  developers to only have to edit the newsletter snippet if we ever want to make changes to it. This also keeps the code from getting too bloated with repeated code. All that code from the Newsletter snippet above will be injected in the proper place, without requiring it to be typed over and over.

Wrapping up, we see what it is that snippets can do for you – make previously tedious, error prone works infinitely easier through the magic of copy/paste. 

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.