How to create shopify custom section

Shopify Custom Section

by

If you are new in Shopify or you want to create your own section for your homepage or other pages then Schema help you to build a custom section as you want.

First, you need to understand the schema ( name, class, settings ).

{% schema %}
  {
    "name": "Section name",
    "class": "testClass",
    "settings": []
  }
{% endschema %}

Schema objects that contain information about your section like the name of your section with the key of name, you can give the class name of the section using the class key that help you in CSS, and the settings key contains section settings/features.

Schema settings key contains array of input objects that build your custom section as requirements using Input Settings( image, text, number, color, html, liquid etc ) .

{% schema %}
  {
    "name": "Section name",
    "class": "testClass",
    "settings": [
     {
      "type": "color",
      "label": "Background Color",
      "id": "color",
      "default": "#fff",
      "info": "Set your section background color"
     },
     {
       "type": "header",
       "content": "Text Box"
     },
     {
      "type": "text",
      "label": "Heading",
      "id": "heading",
      "placeholder": "Section Heading",
      "default": "Your Custom Section"
     }
    ]
  }
{% endschema %}

The section settings array contains the object which mainly contains 3 keys which help to show the input settings.

  1. The type of the input settings type (text, color, image, range, html, liquid, etc).
  2. The setting id, which is used to access the setting value.
  3. The label of the input that is used to label the input.

Others are not required but you can use them as per your requirement like show about input use info key, or if you want to add a default value use the default key etc.

Using id you can render schema input data into html code.

{{ section.settings.color }}
{{ section.settings.heading }}

Also you can create schema using Shopify Section Schema Generator and want to know more about Section Schema here is link

Here are the all Basic and Specialized Input settings

  • checkbox
  • number
  • radio
  • range
  • select
  • text
  • textarea
  • article
  • blog
  • collection
  • collection_list
  • color
  • color_background
  • font_picker
  • html
  • image_picker
  • inline_richtext
  • link_list
  • liquid
  • page
  • product
  • product_list
  • richtext
  • url
  • video
  • video_url