How to add snippet in Shopify?

Have you ever opened up the HTML or CSS theme files in your Shopify store’s admin area? In Shopify’s admin, have you noticed some files with the title “Snippets”? Another thing that you would have seen on the way is that all they end with a “.liquid” extension.

If you have never worked with any of the server-side languages, then you would have questions like what are snippets? How are they useful? Why use snippets? How can you use it?

You might have more questions in your mind before reading this article. But by the time you reach the end of this article, you’ll be more excited to use the snippets throughout your Shopify store.

What are Shopify Snippets?

A snippet is just a code. This code can be of one line or several lines. To identify a snippet file, you need to keep in mind that it always ends in the “.liquid” extension. The snippet title will tell you exactly what it does.

Why are snippets useful?

There are many reasons to prove the usefulness of snippets on Shopify. Some of them are:

• Snippets are a great way to keep repetitive codes in a single file.
• It enables us to update all the instances of a particular code from a single file.
• They allow us to focus on individual pieces of code, and we don’t need to deal with long files.
• It eases down working with Shopify’s sections.

Can you overuse snippets?

The answer to this query is both yes and no. As the code behind the snippets processes quickly and so, if you overuse the snippets, it will affect your page’s speed. Before making a snippet, ask yourself a few sets of questions, which includes:

• Will I use this code across different pages of the website? Or the other way could be to use the snippet code in one of the several locations.
• Do you want to share the snippet code with another site user?
• Is this code bursting out the major theme of the website?
• Will it make my code easier to read if it weren’t there?
• Do I want to edit the snippet code from an existing theme?

Have you answered yes to any of the above-mentioned questions? If this is so, then you don’t need to add a snippet in this case.

How to add the snippet on Shopify?

Step 1: Edit the snippet code

Go to the Shopify store’s Admin > Online Store > Themes > Actions > Edit code.

Step 2: Create the snippet

Scroll down to find ‘Snippets’. Next, you need to click on ‘Add a new Snippet’.

A pop-up menu will be displayed. You need to add a title to this snippet. For example, here

we added the snippet name as ‘article-card’. Click on ‘Create snippet’. Click on save.

That’s it! This is how our snippet looks.

Step 3: Include the snippet file

The last and foremost step you need to do is to include the snippet using the liquid tag render, for example {%render ‘article-card’ %}

These were just the simple steps that you need to follow to add or create snippets in your Shopify store.

If you followed these steps but still have some questions in mind, please do get in touch with us and clear all your queries.