Convert banner HTML to Liquid for Shopify

HTML structure

<div class="promo-banner">
  <p>Free shipping over $50</p>
  <a href="/collections/all">Shop now</a>
</div>

Single-instance markup maps to section.settings—not blocks—for fast merchant editing.

Liquid output

<div class="promo-banner">
  <p>{{ section.settings.text }}</p>
  <a href="{{ section.settings.link }}">
    {{ section.settings.button_label }}
  </a>
</div>

Static copy and href values become section.settings output tags.

Schema settings

"settings": [
  { "type": "text", "id": "text", "label": "Banner text" },
  { "type": "text", "id": "button_label", "label": "Button label" },
  { "type": "url", "id": "link", "label": "Link" },
  { "type": "color", "id": "bg_color", "label": "Background" }
]

Typed settings render as text fields, URL picker, and color swatch in the editor.

Scoped CSS

#shopify-section-{{ section.id }} .promo-banner {
  background: {{ section.settings.bg_color }};
}

Styles scoped with section.id prevent banner CSS from affecting other sections.