Categories
Shopify

how to create a snippet in shopify

Snippet

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

 Snippets are files which contain the reusable code’s chunks.

 They reside in the snippets folder.

 They have the .liquid extension.

 They are mostly employed for code which is displayed on more than only 1 page but not across the entire theme.

 Snippets are contained in a template which uses the Liquid tag.

 There is no need to append the .liquid extension when referencing the snippet name.

 When a snippet is included, it will have the access to the variables within its parent template.

 The examples of snippets do include pagination blocks and social links.

How to create a snippet in shopify

Step 1:

Go to Online Store > Themes from your Shopify Admin panel.

Step 2:

Choose the theme you want to edit and click Actions > Edit code.

how to create a snippet in shopify

Step 3:

Tap the Snippets heading to reveal the Snippets content.

how to create a snippet in shopify

Step 4:

Search for the template-banner.liquid snippet. It is possible that your theme does contain that snippet already. In case it does not, let’s create one now.

Step 5:

Below the Snippets heading, tap the link Add a new snippet. Create a snippet called template-banner.liquid using the singular form.

Step 6:

Add the code here in your new template-banner.liquid snippet.

how to create a snippet in shopify

Step 7:

Save the file of snippets.

Step 8:

Stay still on the Edit CSS/HTML page, click theme.liquid which is under Layouts on the left menu.

Step 9:

Locate the closing </head> tag, and add this code right above it:

{% include 'template-banner' %}

Step 10:

Tap Save.

Leave a Reply

Your email address will not be published. Required fields are marked *