Shopify’s Online Store 2.0 has transformed how themes are built and managed by using modular sections. With JSON schema, you can expose a range of settings directly in the Theme Editor, allowing store owners to customize content without having to modify the code. In this article, we’ll start by building a dynamic section for a promotion banner and then explore how to extend this method for specialized areas of your store.
The “Dynamic Promotion Banner” is designed to be a flexible, visually appealing section that merchants can add to various parts of their store. It includes a headline (as a prominent header), subtext, background image, and a call-to-action (CTA) button. Each element is configurable via JSON schema, which makes the section fully customizable within the Theme Editor.
First, create a new file in your theme’s sections directory (for example, dynamic-promotion-banner.liquid). Inside, you’ll combine Liquid markup with JSON schema to define both the rendering logic and the custom settings.
HTML:
<!-- dynamic-promotion-banner.liquid -->
<section class="dynamic-promotion-banner" style="background-image: url({{ section.settings.banner_image | img_url: '1600x' }});">
<div class="banner-content" style="text-align: center; padding: 60px 20px;">
<!-- Header Section -->
{% if section.settings.header_title != blank %}
<header>
<h1 style="color: {{ section.settings.header_color }};">{{ section.settings.header_title }}</h1>
</header>
{% endif %}
<!-- Promotional Headline -->
{% if section.settings.headline != blank %}
<h2 style="color: {{ section.settings.headline_color }};">{{ section.settings.headline }}</h2>
{% endif %}
<!-- Subtext -->
{% if section.settings.subtext != blank %}
<p style="color: {{ section.settings.subtext_color }};">{{ section.settings.subtext }}</p>
{% endif %}
<!-- Call-to-Action Button -->
{% if section.settings.cta_text != blank and section.settings.cta_link != blank %}
<a href="{{ section.settings.cta_link }}" class="btn" style="background-color: {{ section.settings.cta_bg_color }}; color: {{ section.settings.cta_text_color }};">
{{ section.settings.cta_text }}
</a>
{% endif %}
</div>
</section>
In this example, we’ve added a dedicated header section (<header>) with an <h1> tag to display a primary title. This is separate from the promotional headline and gives the section a clear structure.
The JSON schema at the bottom of the file exposes all the configurable options in the Theme Editor. Here’s an example schema that includes settings for the header, promotional headline, subtext, background image, and CTA button.
JSON:
{% schema %}
{
"name": "Dynamic Promotion Banner",
"settings": [
{
"type": "image_picker",
"id": "banner_image",
"label": "Banner Background Image"
},
{
"type": "text",
"id": "header_title",
"label": "Header Title",
"default": "Our Special Announcement"
},
{
"type": "color",
"id": "header_color",
"label": "Header Color",
"default": "#333333"
},
{
"type": "text",
"id": "headline",
"label": "Promotional Headline",
"default": "Welcome to Our Special Offer!"
},
{
"type": "color",
"id": "headline_color",
"label": "Headline Color",
"default": "#ffffff"
},
{
"type": "textarea",
"id": "subtext",
"label": "Subtext/Description",
"default": "Enjoy our exclusive deals and offers, tailored just for you."
},
{
"type": "color",
"id": "subtext_color",
"label": "Subtext Color",
"default": "#ffffff"
},
{
"type": "text",
"id": "cta_text",
"label": "CTA Button Text",
"default": "Shop Now"
},
{
"type": "url",
"id": "cta_link",
"label": "CTA Button Link",
"default": "/collections/all"
},
{
"type": "color",
"id": "cta_bg_color",
"label": "CTA Button Background Color",
"default": "#ff0000"
},
{
"type": "color",
"id": "cta_text_color",
"label": "CTA Button Text Color",
"default": "#ffffff"
}
],
"presets": [
{
"name": "Dynamic Promotion Banner",
"category": "Custom Sections"
}
]
}
{% endschema %}
This schema gives the merchant full control over the visual aspects and content of the banner. Once saved, the section appears in the Theme Editor where the user can update settings like the header title, colors, and images interactively.
After creating the section file:
1. Add the Section to a Template:
For example, include it in your homepage template (index.json):
JSON:
{
"sections": {
"banner": {
"type": "dynamic-promotion-banner"
}
},
"order": ["banner"]
}
2. Customize via Theme Editor:
Open Online Store > Themes > Customize in your Shopify admin. You’ll see the “Dynamic Promotion Banner” listed, and you can modify all settings (including the header) in real time.
The same principles used in our promotion banner can be adapted to specialized sections, such as a custom card-section or a single product page component. The key is to adjust the JSON schema and Liquid markup to match the context and content requirements.
For a product-specific section, you might want to display additional product details, such as a unique promotional message or a custom call-to-action that appears only on the product page. Here’s how you can adjust the approach:
product) to dynamically fetch information.HTML:
<!-- product-custom-promo.liquid -->
{% if product.available %}
<section class="product-custom-promo" style="background: {{ section.settings.background_color }};">
<div class="promo-content" style="padding: 40px;">
{% if section.settings.product_header != blank %}
<header>
<h1 style="color: {{ section.settings.product_header_color }};">{{ section.settings.product_header }}</h1>
</header>
{% endif %}
<p style="color: {{ section.settings.product_message_color }};">{{ section.settings.product_message }}</p>
{% if section.settings.cta_text != blank and section.settings.cta_link != blank %}
<a href="{{ section.settings.cta_link }}" class="btn" style="background-color: {{ section.settings.cta_bg_color }}; color: {{ section.settings.cta_text_color }};">
{{ section.settings.cta_text }}
</a>
{% endif %}
</div>
</section>
{% endif %}
JSON:
{% schema %}
{
"name": "Product Custom Promotion",
"settings": [
{
"type": "color",
"id": "background_color",
"label": "Background Color",
"default": "#f9f9f9"
},
{
"type": "text",
"id": "product_header",
"label": "Product Header Title",
"default": "Special Offer for This Product"
},
{
"type": "color",
"id": "product_header_color",
"label": "Product Header Color",
"default": "#333333"
},
{
"type": "textarea",
"id": "product_message",
"label": "Promotional Message",
"default": "Get an exclusive discount when you buy this product today!"
},
{
"type": "color",
"id": "product_message_color",
"label": "Message Text Color",
"default": "#333333"
},
{
"type": "text",
"id": "cta_text",
"label": "CTA Button Text",
"default": "Buy Now"
},
{
"type": "url",
"id": "cta_link",
"label": "CTA Button Link",
"default": "/cart"
},
{
"type": "color",
"id": "cta_bg_color",
"label": "CTA Button Background Color",
"default": "#ff6600"
},
{
"type": "color",
"id": "cta_text_color",
"label": "CTA Button Text Color",
"default": "#ffffff"
}
],
"presets": [
{
"name": "Product Custom Promotion",
"category": "Product Sections"
}
]
}
{% endschema %}
In this version, the schema is tailored to a product context. The settings focus on product-related promotional messaging. You can add this section to the single product template so that it displays alongside standard product details.
If you want to include a custom card within a card-section (for instance, showcasing featured products, testimonials, or promotional content in a grid layout), you would again modify both the markup and schema.
HTML:
<!-- card-section.liquid -->
<section class="custom-card-section">
<div class="cards-wrapper">
{% for block in section.blocks %}
<div class="card" style="border-color: {{ block.settings.border_color }};">
{% if block.settings.card_image != blank %}
<img src="{{ block.settings.card_image | img_url: '500x' }}" alt="{{ block.settings.card_title }}">
{% endif %}
{% if block.settings.card_title != blank %}
<h3 style="color: {{ block.settings.title_color }};">{{ block.settings.card_title }}</h3>
{% endif %}
<p style="color: {{ block.settings.text_color }};">{{ block.settings.card_text }}</p>
{% if block.settings.card_link != blank %}
<a href="{{ block.settings.card_link }}" class="btn">Learn More</a>
{% endif %}
</div>
{% endfor %}
</div>
</section>
JSON:
{% schema %}
{
"name": "Custom Card Section",
"max_blocks": 5,
"blocks": [
{
"type": "card",
"name": "Card",
"settings": [
{
"type": "image_picker",
"id": "card_image",
"label": "Card Image"
},
{
"type": "text",
"id": "card_title",
"label": "Card Title",
"default": "Card Title"
},
{
"type": "textarea",
"id": "card_text",
"label": "Card Text",
"default": "Some descriptive text for the card."
},
{
"type": "url",
"id": "card_link",
"label": "Card Link",
"default": "/"
},
{
"type": "color",
"id": "border_color",
"label": "Border Color",
"default": "#cccccc"
},
{
"type": "color",
"id": "title_color",
"label": "Title Color",
"default": "#333333"
},
{
"type": "color",
"id": "text_color",
"label": "Text Color",
"default": "#333333"
}
]
}
],
"presets": [
{
"name": "Custom Card Section",
"category": "Custom Sections"
}
]
}
{% endschema %}
Using blocks in your JSON schema lets merchants add multiple cards dynamically through the Theme Editor. Each block corresponds to an individual card that they can customize.
UNHYDE is a Munich-based web development agency dedicated to pushing boundaries in web development, user experience, and digital marketing. Our mission is to create high-performing digital platforms that drive meaningful customer engagement and measurable business growth. We operate internationally and are a recognized Shopify Partner agency, having successfully launched countless websites and webstores worldwide.
For more insights or if you're ready to take your website to the next level, feel free to reach out to us at UNHYDE®, the web design agency. We’re always here to collaborate and craft tailored solutions that meet your unique needs.
get in touch
MAKE CONTACT