How to Create Your First Shopify Theme Section

 sections are modular components of a Shopify theme that merchants can customize. Sections contain content and settings for specific areas of a Shopify store, such as the basic elements of a product page, or a slideshow component. 

The theme section is represented as .Json in the Product liquid page

A basic example of what a product.json template file could look like would be:

{
  "name": "Product",
  "sections": {
    "main": {
      "type": "main-product"
  }
  },
  "order": [
    "main"
  ]
}
<div class="custom-text-section">
  <h2> {{ section.settings.custom_text_title }} </h2>
  <div>{{ section.settings.custom_text_body }}</div>
</div>

{% schema %}
  {
    "name": "Text Box",
    "settings": [
      {
        "id": "custom_text_title",
        "type": "text",
        "label": "Text box heading",
        "default": "Title"
      },
      {
        "id": "custom_text_body",
        "type": "richtext",
        "label": "Add custom text below",
        "default": "<p>Add your text here</p>"
      }
    ]
  }
{% endschema %}

Leave a comment

Your email address will not be published. Required fields are marked *