Category: 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.

Step 3:

Tap the Snippets heading to reveal the Snippets content.

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.

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.

What is hero banner section?

The hero banner area is the area of the page between the navigation and the start of your content. The hero banner is often an image, but it doesn’t have to be. It serves as the starting point for your page and its contents should orient the user to the content on the rest of the page.

How To Create Hero Banner Using Sections In Shopify

Let’s start, How To Create Hero Banner Using Sections In Shopify.

Suppose we are making a simple “Hero Banner” section .

Steps to follow:

1) From your Shopify admin, go to Online Store > Themes.
2) Find the theme you want to edit and click Actions > Edit code.
3) Go to Sections > Add a new section > Enter section name (eg:-hero-banner)
4) After entering the name of section Click “Create section”.
5) After the section is created copy the static “HTML” code to that section.

STATIC CODE :-

<div class="js-hero c-hero__wrapper" id="hero-banner">
  <div class="swiper-wrapper">
    
      <div class="swiper-slide">
        <div class="c-hero lazyload" src='img.jpg'>
          <div class="container">
            <div class="row">
              <div class="c-hero__content">
                <h1 class="c-hero__content-header heading-xlarge">Heading 1</h1>
               
                  <div class="c-hero__content-text">
                    <p class="para-large">paragraph..</p>
                  </div>
                <div class="c-hero__content-btn">
                  <a href="#" class="c-btn">Button</a>
                </div>
              </div>
            </div>
          </div>
          
      </div>
    </div>
  
</div>

</div>




  

6). Then add the presets details and SAVE it.

Note: Presets is used to Add Section in the backend “Customize” settings of the theme.

About Presets:

Presets must have a name and a category. Section presets and will be grouped by their category in the theme editor.

A preset’s settings object contains the values that will be assigned to the section when a merchant adds it to their home page. The preset’s settings schema must be valid according to the section’s settings schema.

Now test the code is working or not for that you have to follow these steps:

Testing Steps:

1). Click the Customize theme.

2). Under Sections select “Add section”.

3). Then search for the section you are made custom.

4). Then, select the section you made and add it. You can check the section is added at your right side screen.

5). After that SAVE it and Refresh your site. You can see the sections are added.

Congrats! Your Hero Banner section is successfully made & added to the home page . . .

If everything runs correctly, now you can make the “DYNAMIC” Code which is used to add multiple sections to the home page and edit their content without affecting the other sections.

But in “STATIC” code if we change one section it will affect others also:-

DYNAMIC CODE :-

<div class="js-hero c-hero__wrapper" id="hero-slider">
  <div class="swiper-wrapper">
    {% for block in section.blocks %}
      <div class="swiper-slide">
        <div class="c-hero lazyload" src='{{block.settings.image | img_url: "master"}}'>
          <div class="container">
            <div class="row">
              <div class="c-hero__content">
                <h1 class="c-hero__content-header heading-xlarge">{{ block.settings.Header }}</h1>
                {% if block.settings.Text != '' %}
                  <div class="c-hero__content-text">
                    <p class="para-large">{{ block.settings.Text }}</p>
                  </div>
                {% endif %}
                <div class="c-hero__content-btn">
                  <a href="{{ block.settings.URL }}" class="c-btn">{{ block.settings.ButtonText }}</a>
                </div>
              </div>
            </div>
          </div>
          {% if block.settings.videoUrl != '' %}
            <style>#player + .plyr__poster{background-image:url({{block.settings.image | img_url: "master"}})}</style>
            <video id="player" class="player" preload="metadata" muted playsinline controls loop autoplay poster="{{block.settings.image | img_url: "master"}}">
              <source src="{{block.settings.videoUrl}}" type="video/mp4" />
            </video>
          {% endif %}
      </div>
    </div>
  {% endfor %}
</div>
</div>
{% schema %}
{ "name": "Hero slider",
"blocks": [
{
"type": "item",
"name": "Hero item",
"settings": [
{ 
  "id": "image",
  "type": "image_picker",
  "label": "Image or video placeholder" 
},
{ 
  "id": "Header",
  "type": "text",
  "label": "header"
},
{ 
  "id": "Text",
  "type": "textarea",
  "label": "Text" 
},
{ 
  "id": "ButtonText",
  "type": "text",
  "label": "Button Text" 
},
{ 
  "id": "URL",
  "type": "url",
  "label": "Link" 
}
]
}
],
"presets": [{
"name": "Hero slider",
"category": "Banner"
}]
}
{% endschema %}

After that follow the “Testing Steps” as mentioned above.

Now you can see output below picture:

You can drag the sections up and down according to you from the backend “customize settings”.

NOTE: A maximum of 25 dynamic sections can be added to the home page.

Found the article useful? Share it with your friends and family… Now!