Transform Your Shopify Store with Section Customization

Shopify sections allow store owners to customize and change the layout of their online storefront without needing to directly edit code. This feature simplifies the process of modifying the store's appearance, making it accessible for users without technical expertise in coding, thereby democratizing the ability to create sophisticated, custom designs.

Power of Shopify Sections

Sections are Liquid files (Liquid is a template language built and used by Shopify) that allow you to create reusable modules of content that can be customized by merchants. Let us get familiar with Liquid and of course, let’s create an image banner to demonstrate how useful Shopify sections are in terms of customizing the Shopify storefront.

Have a look at the image below that shows how our banner will look with all the customizations.

A Step-by-Step Guide to Creating Shopify Sections

Marveling at the potential within Shopify sections, I eagerly sought to share this knowledge. The theme editor transformed into a canvas where I could guide others through creating sections. Let's demystify the art of seamless customization together:

The Shopify sections have mainly four components 

1. CSS styles, 
2. Liquid code, 
3. some javascript code (if required), 
4. schema for the customizable inputs. 

Note*- before making any changes it's recommended to create a duplicate theme to test your modifications before publishing it live. Shopify admin -> Online Store -> themes -> click on the three dots beside the customize button on the theme you want to make a copy of -> click on the duplicate theme. Otherwise, if anything breaks you will be in a problematic situation

1. Click on three dots next to the customize button on a theme then select edit code.

Now you can see the online theme editor which looks like the image below.

2. Now, let's take action and make your website shine! Head over to the sections folder on the left sidebar of your Shopify dashboard. Exciting, right? Click on it to expand the options, and then feel the thrill as you select "Add a new section." This is where the magic begins – you can unleash your creativity and bring your vision to life!
3. A pop-up will appear in which select the type as liquid section, enter a name for the section, and click on done.
4. Write the required code for the functionalities of the banner section.
   1. CSS styles

<style>
  div:empty.banner__overlay{
    display: block;
  }
  .banner__container{
    width: 100%;
    position: relative;
  }
  .banner__overlay{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9
  }
  .banner__image{
    width: 100%;
    height: 100%;
  }
  .banner__image img{
    width: 100%;
    object-fit: cover;
  }
  .banner__overlay--text{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    display: flex;
  }  
  .overlay__text--content{
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .banner__overlay--text a{
    text-decoration: none;
  }
  @media screen and (max-width: 578px){
    .banner__container{
      height: auto !important;
    }
  }
</style>

1. Liquid code

<div class="banner__container" style="height: {{ section.settings.height }}vh;">
  <div class="banner__overlay" style="background: rgba(0,0,0,{{ section.settings.opacity }}); display: {% if section.settings.isVisible %} block {% else %} none {% endif %}"></div>
  <div class="banner__image">
    <img src="{{ section.settings.banner_image | img_url: '1000x1000' }}" width="" height=""/>
  </div>
  <div class="banner__overlay--text" style="justify-content:{% if section.settings.h_align == "left" %}flex-start
        {% elsif section.settings.h_align == "right"%}flex-end{% else %}center{% endif %}; 
    align-items:{% if section.settings.v_align == "top" %}flex-start
    {% elsif section.settings.v_align == "bottom" %}flex-end{% else %}center{% endif %}; display: {% if section.settings.isVisible %} flex {% else %} none {% endif %}">
    
    <div class="overlay__text--content" style="align-items:{% if section.settings.text_v_align == "left" %}flex-start
    {% elsif section.settings.text_v_align == "right" %}flex-end{% else %}center{% endif %}; display: {% if section.settings.isVisible %} flex {% else %} none {% endif %}">
        <h1 style="color:{{ section.settings.content_text_color }}; font-size: {{ section.settings.heading_font_size }};">{{ section.settings.heading_text }}</h1>  
        <p style="color: {{ section.settings.content_text_color }}; font-size: {{ section.settings.subheading_font_size }};">{{ section.settings.subheading_text }}</p> 
        <a href="{{ section.settings.btn_url }}" style="color: {{ section.settings.btn_text_color }};
          background: {{ section.settings.btn_background }};
          font-size:{{ section.settings.btn_font_size }}px;
          padding: {{ section.settings.btn_padding_v }}px {{ section.settings.btn_padding_h }}px;">{{ section.settings.btn_text1 }}</a>
    </div>
  </div>
  </div>

1. Javascript code, in this case, we don’t have it, however, if you want to add some functionalities that require javascript logic then you can go ahead and add them.
2. Input schema: This JSON object represents the customization settings for the clients or merchants. The schema has the following properties.

{% schema %}
{
“name”: “Section name”,
“settings”: [
	//This object contains an array of setting input objects
	// object 1
{
	“type”: “type of input ”,
	“id”: “a unique string to identify the value of this input”,
	“label”: “ the text that will show up as a label of input in the customization settings”,
	“default”: “the default value of the input”
}
//object 2
{
	“type”: “ ”,
	“id”: “ ”,
	“label”: “ ”,
	“default”: “ ”
}
………..
// object n
{
	“type”: “ ”,
	“id”: “ ”,
	“label”: “ ”,
	“default”: “ ”
}
],
“presets”:[
	// Presets are default configurations of sections that enable users to easily add a section to a JSON template through the theme editor. Presets aren't related to theme styles that are defined in settings_data.json.
	{
	“name”: ”Section Name (this name should be similar to the value of name property of the schema)”,
	
}
]
}

Explore more https://shopify.dev/docs/themes/architecture/sections

Here is the schema for our banner section example,

{% schema %}
  {
    "name": "Banner",
    "settings": [
      {
        "type": "image_picker",
        "id": "banner_image",
        "label": "Image"
      },
      
      {
        "type": "range",
        "id": "height",
        "min": 30,
        "max": 100,
        "step": 5,
        "default": 80,
        "unit": "vh",
        "label": "Banner Height"
      },
      {
        "type": "checkbox",
        "id": "isVisible",
        "label": "Show Overlay",
        "default": false
      },
      {
        "type": "header",
        "content": "Overlay Content"
      },
      {
        "type": "range",
        "id": "opacity",
        "min": 0,
        "max": 1,
        "step": 0.1,
        "default": 0.2,
        "label": "Banner Overlay Opacity"
      },
      {
      "type": "select",
      "id": "v_align",
      "options": [
        {
          "value": "top",
          "label": "top"
        },
        {
          "value": "center",
          "label": "center"
        },
        {
          "value": "bottom",
          "label": "bottom"
        }
      ],
      "default": "center",
      "label": "Vertical Alignment"
    },
    {
      "type": "select",
      "id": "h_align",
      "options": [
        {
          "value": "left",
          "label": "left"
        },
        {
          "value": "center",
          "label": "center"
        },
        {
          "value": "right",
          "label": "right"
        }
      ],
      "default": "center",
      "label": "Horizontal Alignment"
    },
      {
      "type": "select",
      "id": "text_v_align",
      "options": [
        {
          "value": "left",
          "label": "left"
        },
        {
          "value": "center",
          "label": "center"
        },
        {
          "value": "right",
          "label": "right"
        }
      ],
      "default": "center",
      "label": "Overlay Content Alignment"
    },
      {
        "type": "text",
        "id": "heading_text",
        "label": "Heading Text",
        "default": "Heading"
      },
      {
         "type": "range",
        "id": "heading_font_size",
        "min": 10,
        "max": 50,
        "step": 1,
        "default": 24,
        "unit": "px",
        "label": "Heading Font Size"
      },
      {
        "type": "text",
        "id": "subheading_text",
        "label": "Subheading Text",
        "default": "Subheading"
      },
      {
         "type": "range",
        "id": "subheading_font_size",
        "min": 10,
        "max": 30,
        "step": 1,
        "default": 16,
        "unit": "px",
        "label": "Subheading Font Size"
      },
      {
        "type": "color",
        "id": "content_text_color",
        "label": "Content Text Color",
        "default": "#fff"
      },
      {
        "type": "text",
        "id": "btn_text1",
        "label": "Button Text",
        "default": "Shop Now"
      },
      {
        "type": "url",
        "id": "btn_url",
        "label": "Button Url"
      },
      {
        "type": "range",
        "id": "btn_font_size",
        "min": 10,
        "max": 30,
        "step": 1,
        "default": 16,
        "unit": "px",
        "label": "Button Font Size"
      },
      {
        "type": "range",
        "id": "btn_padding_h",
        "min": 10,
        "max": 30,
        "step": 1,
        "default": 10,
        "unit": "px",
        "label": "Button Padding Horizontal"
      },
      {
        "type": "range",
        "id": "btn_padding_v",
        "min": 10,
        "max": 30,
        "step": 1,
        "default": 10,
        "unit": "px",
        "label": "Button Padding vertical"
      },
      {
        "type": "color",
        "id": "btn_text_color",
        "label": "Button Text",
        "default": "#fff"
      },
      {
        "type": "color",
        "id": "btn_background",
        "label": "Button Background",
        "default": "transparent"
      }
    ],
    "presets": [
      {
        "name": "Banner"
      }
    ]
  }
{% endschema %}

5. Save the code and let’s head toward theme customization. In the customization panel on the left sidebar under Template scroll till the end and you will be able to see an add section option click on it which will open a pop-up with a search option for sections, enter the name of the section (in this case the name of the section we created is Banner).

6. Select the section from the suggested sections and the banner section will be added to the page. Now click and hold on to the section drag it upwards and leave it wherever you want to place it on the page.

7. Click on the banner section on the left sidebar to see the customization settings. Now you can see the images below where all the settings are there that we added in the schema in our liquid file.

8. Let's try adding an image by clicking on the select image button on the left sidebar.

https://www.loom.com/share/ad3cf033698240f5a4ee21659f1edb21?sid=d47172a8-0e04-4bf9-967f-e320caf8d4b9

9. Adjust the height of the banner.

https://www.loom.com/share/5b72e46673d94e248c0bac0c9b90dd84?sid=9420465f-5f20-4fba-9f64-d264eed23ed5

10. We have a show overlay check box, when the checkbox is checked we will be able to see the contents like heading subheadings and buttons on the banner.

https://www.loom.com/share/23c77abf0f5449b5896ef076eea1bc96?sid=3e9f9698-7e00-45c3-a512-ab4b4e8fa28b

11. Modifying the heading and subheadings of the banner content.

https://www.loom.com/share/ca48a68eef054a10848e74da4a12fd68?sid=43a126b6-1d7d-493d-91b5-f2b411576b08

12. Modifying button appearances, URL, and text.

https://www.loom.com/share/1e554b709d6c40ac940803134e082dbb?sid=77ce3d36-0ab6-4f5b-a410-43150776182c

13. Modifying the overlay opacity and positioning of the content on the overlay.

https://www.loom.com/share/c567afcd305f498dac8ba14acafc78d6?sid=5ee5bf91-9481-42aa-91b6-287ea56892b3

Well, that is pretty much about it, we have seen in the above video instructions that we can have complete control over the customization by using Shopify sections when it comes to providing an exceptional user experience. It’s easy to manage even for non-coders like most clients or merchants.

Advantages of Section Customization

As I immersed myself in the world of Shopify sections, I couldn't help but appreciate the numerous advantages:

User-Friendly Interface: As we have seen, making any customization to the sections doesn’t require technical expertise, even a non-technical person can do the modifications. The visual editor makes it so interactive for the users that they can see the preview in real-time.

Flexibility and Adaptability:  The developer can adapt the store's layout styling. Update, seasonal promotions, banners, and other modifications become a cakewalk for the merchants.

Consistent Branding: Maintain a cohesive visual identity effortlessly by customizing headers, footers, and more. Consistency in branding contributes to a polished and professional online presence.

Reusability: Creating sections makes it easy to insert similar-looking sections across various pages without having to duplicate mode (which would otherwise make it a maintenance nightmare)

Conclusion:

Shopify sections make it easy for us to truly collaborate with our clients and create the pixel-perfect store of their dreams.

Shopify sections aren't just tools – they're about giving power to both developers and clients. They make working together easier and let everyone create a website representing them.