How to add sections to custom pages in Shopify - eCommerce Thesis

How to add sections to custom pages in Shopify

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 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' %}

Leave a Reply