Shopify Liquid examples for common sections

How to use these examples

Each example shows the Liquid pattern, the schema shape, and when to use Flat settings vs blocks. Adapt class names to your theme. For full HTML-to-section conversion, use /converter or read /convert-hero-section-html-to-liquid and related component guides.

Hero section example

Heroes are single-instance layouts—use section.settings for heading, subheading, CTA, and background image. Flat export mode in the converter handles this pattern automatically.

<div class="hero">
  <h1>{{ section.settings.heading }}</h1>
  <p>{{ section.settings.subheading }}</p>
  <a href="{{ section.settings.button_link }}">
    {{ section.settings.button_label }}
  </a>
</div>

FAQ accordion example

FAQ rows are classic block content—each question and answer is a block merchants reorder. Use details/summary for accessible accordions.

{% for block in section.blocks %}
  <details {{ block.shopify_attributes }}>
    <summary>{{ block.settings.question }}</summary>
    <div>{{ block.settings.answer }}</div>
  </details>
{% endfor %}

Collection and product grid examples

Product grids wire to Shopify collection objects. Assign the collection from settings, loop products, and render cards with live price and image data.

{% assign col = section.settings.collection %}
{% for product in col.products limit: section.settings.limit %}
  <a href="{{ product.url }}">
    {{ product.featured_image | image_url: width: 600 | image_tag }}
    <span>{{ product.title }}</span>
    <span>{{ product.price | money }}</span>
  </a>
{% endfor %}

Tabs example

Tab panels map to blocks with label and richtext content settings. Section-level settings control tab style. See /convert-tabs-html-to-liquid for conversion workflow.

{% for block in section.blocks %}
  <button>{{ block.settings.label }}</button>
  <div>{{ block.settings.content }}</div>
{% endfor %}

Accordion example

Accordions extend the FAQ pattern with richer richtext bodies and optional icons per row. Product detail pages use accordion_item blocks for materials, sizing, and care instructions.

{% for block in section.blocks %}
  <details class="accordion__item" {{ block.shopify_attributes }}>
    <summary>{{ block.settings.title }}</summary>
    <div class="accordion__body">{{ block.settings.content }}</div>
  </details>
{% endfor %}

Banner and announcement examples

Promo banners typically use Flat settings—text, url, and color fields. No block loop required. Convert from HTML with /convert-banner-html-to-liquid.

<div class="announcement">
  <p>{{ section.settings.text }}</p>
  <a href="{{ section.settings.link }}">{{ section.settings.link_label }}</a>
</div>

From examples to production sections

• Paste your HTML variant into /converter to generate schema automatically.
• Cross-check setting ids against /shopify-schema-guide conventions.
• Validate block limits and presets before client handoff.
• Browse /shopify-liquid-cheatsheet for filter and tag reference.