Shopify theme sections are a powerful tool for customizing the design and layout of your online store without requiring advanced coding skills. Shopify themes are built using a series of pre-designed sections, which can be easily edited and rearranged to suit your needs.

Each section contains a specific element of your store’s design, such as a banner image, product grid, or footer. You can customize each section by adjusting the layout, colors, and typography to match your brand and style.

Here are some tips for working with Shopify theme sections:

1. Familiarize yourself with the available sections: Before making any changes, take some time to explore the available sections and understand how they work. Each theme will have a different set of sections, so it’s important to know which ones are available to you.
2. Use the preview mode: Before making any changes to your live store, use the preview mode to see how your changes will look. This way, you can experiment with different layouts and designs without affecting the customer experience.
3. Customize the layout: Use the section editor to adjust the layout of each section. This includes changing the number of columns, adjusting the spacing between elements, and rearranging the order of items.
4. Customize the design: Use the design settings to adjust the colors, typography, and other design elements of each section. This can include changing the font size, color scheme, or background image.
5. Use custom HTML and CSS: If you have some coding skills, you can also use custom HTML and CSS to further customize your theme sections. This can be useful for adding custom elements or making more advanced design changes.
6. Consider mobile optimization: Make sure your theme sections are optimized for mobile devices, as more and more customers are using their smartphones to shop online. Test your changes on both desktop and mobile to ensure a consistent and user-friendly experience.

By using Shopify theme sections, you can create a custom and professional-looking online store that reflects your brand and style, without requiring advanced coding skills.

In this tutorial, I will show you ” How to add sections to custom pages in Shopify ” If you are looking for easy guidelines with video, you can continue this tutorial.

As always, when making code changes to your theme, please remember to create a backup, in case you need to revert back to previous versions of the theme.

Here are the step-by-step guideline

Step – 1: Create a custom template called page.featured-product.liquid

Step – 2: Create a new section within the theme’s sections folder, called featured-product-on-page.liquid, paste the code, and hit save.

{% schema %}
  {
    "name": "Featured product",
    "class": "index-section index-section--featured-product",
    "settings": [
      {
        "type": "product",
        "id": "featured_product",
        "label": "Product"
      },
      {
        "type": "select",
        "id": "image_size",
        "label": "Image size",
        "options": [
          {
            "value": "small",
            "label": "Small"
          },
          {
            "value": "medium",
            "label": "Medium"
          },
          {
            "value": "large",
            "label": "Large"
          },
          {
            "value": "full",
            "label": "Extra large"
          }
        ],
        "default": "medium"
      },
      {
        "type": "checkbox",
        "id": "show_quantity_selector",
        "label": "Show quantity selector",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "show_variant_labels",
        "label": "Show variant labels",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "show_vendor",
        "label": "Show vendor",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "enable_zoom",
        "label": "Enable image zoom",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "show_share_buttons",
        "label": "Show social sharing buttons",
        "default": true
      }
    ]
  }
{% endschema %}

Step – 3: Add below in the page template I created in step 1, called page.featured-product.liquid.

{% section 'featured-product-on-page' %}

For any support, Contact Now