Customizing sections

Every section is yours to restyle. Change Tailwind classes, swap content, or extend the Alpine behaviour.

Styling with Tailwind#

Sections use utility classes throughout. Edit them directly — no build step is required if your theme already loads Tailwind.

<div class='grid gap-6 sm:grid-cols-3'>{% for block in section.blocks %}  {% render 'collection-card', block: block %}{% endfor %}</div>

Adding settings#

Expose new options to merchants by adding entries to the section schema:

{ "type": "color", "id": "overlay", "label": "Overlay color" }