How to Create a Custom Section in Shopify with Schema (Updated for 2025)

How to Create a Custom Section in Shopify with Schema (Updated for 2025)

by

If you’re new to Shopify or want to create a custom section for your homepage or other pages, Shopify Schema helps you easily build sections as per your requirements. In this guide, we’ll cover how to create custom sections, add new input settings, and use custom metafields in product pages from the Shopify admin.

Understanding Shopify Schema

The schema in Shopify defines the structure of a section using JSON. It includes the name, class, and settings for the section.

Basic Schema Structure

{% schema %}
{
"name": "Custom Section",
"class": "custom-section",
"settings": []
}
{% endschema %}
  • name: The section name that appears in the Shopify editor.
  • class: A CSS class name you can use for styling.
  • settings: An array of settings that define the input fields for customization.

Adding Settings to Your Custom Section

The settings key allows you to add input fields that merchants can customize in the Shopify theme editor. Here’s how you can add different types of input settings:

Example Schema with Common Input Settings

{% schema %}
{
"name": "Custom Section",
"class": "custom-section",
"settings": [
{
"type": "color",
"label": "Background Color",
"id": "bg_color",
"default": "#ffffff",
"info": "Select a background color"
},
{
"type": "text",
"label": "Heading",
"id": "heading",
"placeholder": "Enter heading",
"default": "Your Custom Section"
},
{
"type": "image_picker",
"label": "Section Image",
"id": "section_image",
"info": "Upload an image for this section"
},
{
"type": "video_url",
"label": "Video URL",
"id": "video",
"info": "Add a YouTube or Vimeo video URL"
},
{
"type": "richtext",
"label": "Content",
"id": "content",
"default": "<p>Enter your content here</p>"
}
]
}
{% endschema %}

Supported Input Types in All Shopify Themes

The following input types are supported in any Shopify theme:

  • Text Inputs: text, textarea, inline_richtext, richtext
  • Media Inputs: image_picker, video_url
  • Color Pickers: color, color_background
  • Selection Inputs: checkbox, radio, select
  • Numeric Inputs: number, range
  • Content References: article, blog, collection, product, page, link_list

Using Schema Settings in Liquid

Once the settings are defined in your schema, you can use them in your Liquid template like this:

<div class="custom-section" style="background-color: {{ section.settings.bg_color }}">
<h2>{{ section.settings.heading }}</h2>
<img src="{{ section.settings.section_image | img_url: 'large' }}" alt="Custom Image">
{% if section.settings.video %}
<iframe src="{{ section.settings.video }}" frameborder="0" allowfullscreen></iframe>
{% endif %}
<div>{{ section.settings.content }}</div>
</div>

Adding Custom Metafields in Shopify Product Pages

Shopify metafields allow you to store additional custom data for products, orders, and customers. You can now manage metafields directly from the Shopify Admin Dashboard without third-party apps.

Creating a Custom Metafield in Shopify Admin

  1. Go to Shopify Admin > Settings > Custom Data > Products.
  2. Click “Add Definition” and enter:
    • Name: Product Subtitle
    • Namespace & Key: custom.subtitle
    • Type: Single line text
  3. Save the metafield.

Displaying Metafields in Product Page (Liquid Code)

Add this code inside your product.liquid or product-template.liquid file:

{% if product.metafields.custom.subtitle %}
<p class="product-subtitle">{{ product.metafields.custom.subtitle }}</p>
{% endif %}

Final Thoughts

By using Shopify schema and custom metafields, you can create dynamic, flexible sections and enhance product pages with additional data. This makes your Shopify store more customizable and improves the user experience.

If you want to generate schema JSON automatically, use the Shopify Section Schema Generator.

For more details, check out the official Shopify documentation: Shopify Section Schema.

Leave a Comment