Page 3 - Hyvä

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.

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.

The store switcher and the currency switcher in the header are not ordinary dropdowns: both must trigger a real form submit to a Magento controller so a cookie and session get updated on the server and survive a full page reload. This article shows how to build both components as an accessible Alpine.js dropdown in the Hyvä header, including the ARIA listbox pattern, keyboard control, grouping by website for many store views, and CSP-compliant inline registration, all without shipping any extra JavaScript bundle.

A Hyvä migration is not a simple theme update, it is a structured project with an audit, a compatibility check, a checkout rebuild and a staged rollout. Anyone who knows the four phases and plans for the typical pitfalls early gets from a Knockout.js heavy Luma theme to a noticeably faster, more maintainable Hyvä frontend, without putting live shop operations at risk during the switch.

The Hyvä Tailwind config is the central control point for colors, fonts, spacing and plugins in a Magento 2 frontend, but it also decides whether Tailwind actually finds every used class in the built CSS or whether styles suddenly go missing on the storefront. This article shows how a child theme like Mironsoft/default extends the tailwind.config.js of the Hyvä parent theme via require() and object spread, how theme.extend picks up custom design tokens for colors, fonts and spacing, how plugins like Typography, Forms and Aspect Ratio get registered, and how content paths are configured so Tailwind reliably scans every phtml, JS and Alpine file in the theme and in Hyvä modules.

Anyone customizing the category page toolbar in the Hyvä theme works with a single block, a single template, and Alpine.js instead of Knockout bindings and UI Components grids. This guide shows how to extend sort fields, build a view-mode switcher with persistence, and adjust pagination on the Hyvä category page without breaking full page cache.

Anyone who forks a separate theme for every brand pays twice with every Hyvä update. A well thought out multi-store theme strategy instead uses Magento's fallback hierarchy of theme, website, and store view to run one shared Hyvä theme for multiple stores in a way that stays consistent, maintainable, and update-safe.

Anyone looking to customize the Hyvä checkout in Magento 2 runs into an architecture with no Knockout.js and no UI Components at all: checkout steps are rendered server-side as phtml templates and made reactive through Alpine.js. This article uses real code to show how custom checkout steps, additional form fields, and clean validation get integrated into the Hyvä checkout without touching the theme core and without touching a single Knockout template.