Hyvä theme migration, Tailwind + Alpine.js patterns, extension compatibility, Hyvä Checkout customization.
10 articles
Customize a Hyvä theme without breaking the production build: the four layers a change can live in, the Tailwind pipeline end to end, and the purge bug that bites every team exactly once.
A custom My Account tab needs a route, a controller, and a sidebar link working together, wire up only one and you get a 404. This guide builds all three on Magento 2.4.4-2.4.9 (Luma + Hyvä) and explains exactly why the 404 happens.
Five Hyvä Checkout customizations that actually shipped on production Magento 2.4.4-2.4.9 stores: what the merchant asked for, what was tricky, and the code shape. Google Places address autocomplete bound to the Magewire shipping component via an Alpine.js bridge. CPF for Brazil / VAT for the EU as reactive Magewire fields with wire:model.live. Runtime carrier filtering through a collectShippingRates plugin. A post-purchase upsell Magewire component on the success page with one-click PayPal Express. Locale-aware date pickers via the Hyvä i18n partial. For each: the trigger, the file shape, the gotcha.
There are two honest ways to check whether a Magento extension is Hyvä-compatible, manual grep across the module source, and the hyva-themes/magento2-compatibility-checker CLI. Neither one catches everything. This post lists the exact bash one-liners I run against vendor/, walks through what the official Hyvä compat CLI flags and what it silently ignores (Magewire deps, GraphQL schema needs, form validation libs), and ends with the checklist I work through when the CLI prints "compatible" but the module still throws KO errors in the Hyvä storefront on Magento 2.4.4-2.4.9.
Generic Alpine.js docs do not tell you how to wire cart counts from PHP, why x-cloak is non-negotiable on PDP swatches, or how $dispatch lets an Alpine.js drawer talk to a Magewire form without a refresh. After shipping 40+ Hyvä modules across Magento 2.4.4-2.4.9, the same 10 patterns appear in nearly every one. This post walks through each, x-data hydrated from PHP, x-cloak flash-prevention, $store cross-component state, x-bind:class active tabs, x-on:click.outside drawers, x-intersect lazy loads, x-show transitions, x-html with DOMPurify, x-init with $watch + localStorage, and $dispatch for Magewire, with copy-pasteable snippets, when-to-reach-for-it notes, and the trap that bites first-time Hyvä devs.
Most Hyvä checkout customization tutorials stop at "render a field" and skip the backend plumbing that actually persists the value to the order. Here is a complete, copy-pasteable delivery_date field for Hyvä Checkout 1.2+ on Magento 2.4.4-2.4.9: the Magewire vs Alpine.js decision tree, the extension_attributes.xml declaration, the Magewire component class, the date input partial with HTML5 min/max constraints, the QuoteRepository save plugin, and the admin sales_order_view.xml display. Plus the gotcha that breaks guest checkouts: the date does not survive submitQuote without a second plugin.
Most Hyvä compatibility tutorials stop at "install hyva-themes/magento2-default-theme and pray". This one ports a real Luma-only filter extension, Mageplaza Layered Navigation, to Hyvä across five concrete phases with diffs at every step. Phase 1: composer require the compat-module shell. Phase 2: copy the phtml and strip Knockout data-bind. Phase 3: rebuild the live-filter UI in Alpine.js against the existing Magento AJAX endpoint. Phase 4: swap Luma selectors for Tailwind utility classes that follow the Hyvä theme tokens. Phase 5: a Magewire wire-up for the count badges that need server-side reactivity. Plus a decision matrix on when to ditch the port and buy the Hyvä Catalog Add-on instead.
Your Luma extension worked yesterday on Magento Blank. Today on Hyvä it renders nothing, or worse, breaks the page silently with no console error. The fix is not "reinstall the module" or "flush cache". There is a diagnostic order, four checks in sequence, each with a distinct DevTools signal, that resolves 95% of Luma-to-Hyvä incompatibilities. This guide walks the order using real modules we have debugged (Mageplaza, Amasty, MGS) on Magento 2.4.4-2.4.9 production sites. Each step has the actual symptom, the actual signal, and the actual fix, not a generic compatibility checklist.
Adding a custom field to Magento 2 checkout (delivery date, VAT number, gift message) is well-documented for Luma, and a moving target on Hyvä. Here is the complete path for both stacks, with quote extension attribute wiring and admin order display.
Most Magento 2 extensions ship for Luma only: Knockout bindings, RequireJS components, jQuery widgets. Hyvä replaces all three. The good news: a 4-step pattern handles 90% of ports. Here is the exact workflow with code for Klarna, Stripe, and Yotpo.
