DocsAlpineAlpine basics
Alpine basics
CascadeKit sections stay interactive with a sprinkle of Alpine.js — no build step, no framework lock-in.
Why Alpine
Alpine gives you the reactivity of a framework with the footprint of a <script> tag. CascadeKit leans on it so behaviour lives right next to the markup it controls.
- Declarative state with
x-data, written inline in your Liquid. - No bundler — Alpine loads from a single CDN tag or your theme's vendor file.
- Plays nicely with Shopify's section rendering and the theme editor.
A first example
Every interactive section follows the same shape: an x-data scope, some state, and directives that react to it. Here's a minimal accordion:
sections/faq.liquid
<div x-data="{ open: false }" class="border-b border-neutral-200"><button x-on:click="open = !open" class="flex w-full justify-between py-4"> {{ block.settings.question }} <span x-text="open ? '–' : '+'"></span></button><div x-show="open" x-collapse class="pb-4 text-neutral-600"> {{ block.settings.answer }}</div></div>Common directives
These cover most of what CascadeKit sections need:
x-dataDeclare a component and its reactive state.
x-on:clickRun an expression on an event (shorthand
@click).x-showToggle visibility based on a boolean.
x-bindBind an attribute to an expression (shorthand
:class).x-textSet an element's text content.
Loading Alpine
Most CascadeKit themes already include Alpine. If yours doesn't, add it once in layout/theme.liquid with defer.