How To Create Custom Section In Shopify

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!