Frontend Development
The yStore frontend is built with Twig templates, Alpine.js, and SCSS. This section is for developers building or customizing the customer-facing storefront.
This section is for frontend developers and theme authors who need to customize the storefront templates, hook into JS events, or work with the plugin's APIs from the browser.
If you're an admin configuring the Control Panel, see Backend instead. If you need to hook into PHP server-side events, see Backend → Extending yStore.
Start Here
New to yStore frontend? Start here — understand the pieces and the recommended path.
Theme Architecture
Layouts, pages, components, and blocks — the 4-layer template system explained.
Customizing Themes
Override templates, work with Alpine.js, handle localization and accessibility.
Twig Reference
All Twig functions and filters provided by yStore — products, cart, formatting, URLs.
JavaScript & Alpine.js
window.yui object, section data, client-side events, dispatch messages, x-defer.
JavaScript Utilities
Fetch API patterns, URL building, CSRF tokens, and form submission helpers.
Form Validation
HTML5 input types, native browser validation, and Alpine.js validation patterns.
Styling & CSS
SCSS setup, responsive mixins, and style overrides.
Patterns
Recommended Alpine.js approaches — state, inter-component communication, external JS.
Real-life Examples
Complete examples: product listing, product details, newsletter, caching strategies.
Release Checklist
Everything to verify before going live — pages, components, flows, and assets.
Technology stack
| Layer | Technology |
|---|---|
| Templating | Twig (via Craft CMS) |
| Reactivity | Alpine.js v3 |
| Styling | SCSS / Sass |
| API | GraphQL (/api) or REST |
| Bundler | Vite (recommended) |
yStore ships a full GraphQL API. If you're building a headless storefront (Next.js, Nuxt, SvelteKit), head to GraphQL for the complete query and mutation reference.