Page 5 - Hyvä

Recurring Magento specific patterns such as loading states, store grid spacing or Alpine visibility states cannot always be mapped cleanly onto standard utilities. A custom Tailwind plugin captures this knowledge once and makes it reusable across the entire Hyvä theme, including correct compilation in the build pipeline.

B2B buyers who already know exactly which SKUs they need, often pulled straight from an ERP export or a purchasing spreadsheet, do not want to click through category pages and product detail pages one item at a time. A quick order form with free-form SKU and quantity entry, optional CSV import, and a GraphQL batch mutation behind the scenes shortens the path from purchasing list to cart considerably, backed by real-time validation against actual stock.

Anyone who implements swatches for configurable products as mere color boxes without a well thought out state model ends up with price, gallery, and stock bugs on the product detail page. A clean Alpine.js state machine, a proper ViewModel, and a GraphQL-ready data model make Hyvä swatches robust, accessible, and cache friendly at the same time.

Alpine.js components often look interactive and modern, yet remain unusable for screen reader and keyboard users whenever ARIA attributes are not reactively wired to component state. This article shows, hands on, how to correctly use x-bind:aria-expanded, x-on:keydown and clean focus management, then builds a fully accessible accordion and a dropdown menu from scratch, including keyboard navigation and screen reader support.

A mobile navigation that only toggles visibility is not enough: without a state model for nested categories, without a focus trap and without scroll lock, the off-canvas menu quickly becomes a dead end for keyboard and screen reader users. This article shows how to build the mobile navigation of a Hyvä theme as a self-contained Alpine component, with a state stack for category levels, x-transition for the slide-in panel, a focus trap, ARIA attributes and performant CSS transform animation instead of layout thrashing.

Generic SEO extensions often produce Schema.org markup that is duplicated or incomplete, because they have no access to the actual Hyvä ViewModel data. Building Hyvä Schema.org markup directly in the phtml template through a dedicated ViewModel gives full control over Product, Breadcrumb and Organization data, without extra module overhead and without conflicts with the CSP setup.

A Magento 2 store switcher looks like a simple dropdown in the storefront, but behind it hides redirect logic that decides whether a customer lands on the same product page when switching language, or unexpectedly jumps to the homepage. Anyone who cleanly customizes the store switcher in Hyvä with Alpine.js preserves page context, respects cookie preferences, and avoids frustrating international visitors.

A template gets edited, but the change never shows up in the frontend. The cause is almost always somewhere in the fallback chain between module, theme, and parent theme, and hunting for it without the right tools wastes real time. This article walks through a systematic debug workflow.

Anyone who carries Luma layout habits unreflected into a Hyvä theme drags along jsLayout leftovers, RequireJS references and unnecessary block classes. Hyvä layout XML still uses the regular Magento schema, but replaces Luma's Knockout-heavy conventions with lean block, template and view model combinations.

A Hyvä theme is lean by design, but a high Lighthouse score does not appear automatically. If you do not deliberately align Tailwind purging, image strategy, font loading and full page cache, you give away exactly the advantage Hyvä was built for. This Hyva performance optimization walks through the concrete levers with real code examples from Magento 2.4.8 and Tailwind CSS v4.