Convert hero section HTML to Liquid

HTML structure

<section class="hero">
  <h1>Winter collection</h1>
  <p>New arrivals are here.</p>
  <a href="/collections/winter">Shop now</a>
</section>

Single-instance hero markup maps to section.settings—not blocks—for headline, copy, and CTA.

Liquid output

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

Every editable text node and link becomes a section.settings reference.

Schema settings

"settings": [
  { "type": "text", "id": "heading", "label": "Heading" },
  { "type": "text", "id": "subheading", "label": "Subheading" },
  { "type": "image_picker", "id": "bg_image", "label": "Background" },
  { "type": "url", "id": "button_link", "label": "Button link" }
]

Typed settings give merchants text fields, image upload, and URL picker in the editor.

Background Liquid

{{ section.settings.bg_image
  | image_url: width: 2000
  | image_tag: class: 'hero__bg' }}

image_picker settings use Shopify image filters for responsive, CDN-backed delivery.