Convert slider HTML to Liquid for Shopify

HTML structure

<div class="slider">
  <div class="slide">
    <img src="hero-1.jpg" alt="">
    <h2>Summer collection</h2>
  </div>
</div>

Repeated .slide children inside a .slider wrapper indicate a block loop candidate.

Liquid output

{% for block in section.blocks %}
  <div class="slide" {{ block.shopify_attributes }}>
    {{ block.settings.image | image_url: width: 1200 | image_tag }}
    <h2>{{ block.settings.heading }}</h2>
  </div>
{% endfor %}

Images and headings pull from block.settings; shopify_attributes enables editor highlighting.

Block schema

"type": "slide",
"settings": [
  { "type": "image_picker", "id": "image", "label": "Image" },
  { "type": "text", "id": "heading", "label": "Heading" },
  { "type": "url", "id": "link", "label": "Link" }
]

Each slide block exposes media, copy, and link settings merchants edit per slide.

Section settings

"settings": [
  { "type": "checkbox", "id": "autoplay", "label": "Autoplay" },
  { "type": "checkbox", "id": "show_arrows", "label": "Show arrows" }
]

Carousel behavior lives at section level—one toggle affects all slides.