Building a mobile-first user experience with Hyvä for complex product catalogs starts with restructuring your navigation taxonomy for touch interactions, implementing progressive disclosure for product attributes, optimizing image delivery for mobile bandwidth, and leveraging Hyvä's Alpine.js foundation for lightweight interactivity that keeps page weight under 200KB. The result is a storefront that loads in under two seconds on 4G connections while handling catalogs with thousands of SKUs and dozens of filterable attributes.
Why Hyvä Changes the Equation for Complex Catalogs
Traditional Magento frontends — built on Luma with its RequireJS dependency chain, KnockoutJS bindings, and jQuery libraries — create a fundamental tension between catalog complexity and mobile performance. Every filterable attribute, every layered navigation option, and every product variation adds JavaScript weight and rendering time. By the time a complex catalog page loads all its dependencies on a mobile device, the customer has already bounced.
Hyvä eliminates this tension by replacing the entire frontend stack. Alpine.js replaces KnockoutJS and jQuery for interactivity. Tailwind CSS replaces LESS compilation for styling. The result is an 80 to 90 percent reduction in frontend payload — from 2-3MB on Luma to 200-400KB on Hyvä. For complex catalogs, this is transformative because it means you can add filterable attributes, product variations, and interactive elements without the performance penalty that makes Luma increasingly unworkable on mobile.
Bemeir has built Hyvä-powered storefronts for catalogs ranging from industrial manufacturers with thousands of technical specifications per product to multi-brand retailers with complex category hierarchies. The architectural patterns that follow are drawn directly from that experience.
Step 1: Restructure Navigation for Touch-First Interaction
Desktop navigation patterns do not translate to mobile. Mega menus with deeply nested categories become unusable on small screens. The first implementation step is rethinking how customers navigate your catalog on devices where thumbs are the primary input.
Flatten your category hierarchy for mobile. If your desktop navigation has four or five levels of category depth, your mobile navigation should expose no more than three. This does not mean reducing your catalog structure — it means designing the mobile navigation path to surface popular categories and search as primary discovery mechanisms rather than forcing customers through deep hierarchical drilling.
Implement a sticky category bar. For catalogs with well-defined top-level categories, a horizontally scrollable category bar that remains visible as customers scroll provides constant wayfinding context. Hyvä's Alpine.js makes this straightforward to implement without the JavaScript overhead of a Luma implementation.
Prioritize search over browsing for complex catalogs. When your catalog has thousands of SKUs with technical specifications, mobile customers are more likely to find what they need through search than through hierarchical browsing. Invest in search prominence — large, persistent search fields with autocomplete suggestions — and configure Elasticsearch or Algolia to handle attribute-specific queries effectively.
Design filter interactions for thumbs. Layered navigation filters should use full-width slide-out panels rather than small dropdown menus. Toggle switches work better than checkboxes on mobile. Price range filters should use slider controls rather than text input fields. Each interaction should be comfortable for one-handed operation.
Step 2: Implement Progressive Disclosure for Product Attributes
Complex products with dozens of specifications cannot display everything at once on a mobile screen without overwhelming the customer.
Lead with buying-decision attributes. Identify the three to five attributes that most directly influence purchase decisions for your products. Price, availability, primary specification (size, capacity, compatibility), and visual appearance should be immediately visible. Secondary specifications load on demand.
Use collapsible sections with clear affordances. Hyvä's Alpine.js x-show and x-collapse directives create smooth expand/collapse interactions with minimal code. Group related specifications into logical sections: dimensions, electrical specifications, compatibility, certifications, shipping information. Each section should clearly indicate that it is expandable — not hidden behind ambiguous icons.
Implement tabbed interfaces for product detail pages. Description, specifications, reviews, and related products work well as tabs on mobile when each tab loads its content independently. Hyvä's reactive data binding makes tab switching instantaneous without requiring additional network requests.
| Content Priority | Mobile Visibility | Implementation Pattern |
|---|---|---|
| Product images and price | Always visible above the fold | Swipeable gallery with lazy-loaded thumbnails |
| Primary specifications (3-5 key attributes) | Always visible, below images | Compact attribute grid with icons |
| Add to cart and quantity | Always visible, sticky footer | Fixed-position CTA bar |
| Full technical specifications | On demand, expandable | Alpine.js collapsible sections |
| Product reviews | On demand, tab or section | Lazy-loaded with pagination |
| Related and cross-sell products | Below fold, scrollable | Horizontal card carousel |
| Detailed description and content | On demand, expandable | Collapsible with "Read more" trigger |
Step 3: Optimize Image Delivery for Mobile
Product images are the single largest contributor to page weight on eCommerce sites. Complex catalogs multiply this challenge because category pages display multiple products, each potentially needing multiple image angles.
Implement responsive images with Hyvä's picture element support. Serve appropriately sized images based on device viewport — 400px wide images for mobile, 800px for tablet, 1200px for desktop. Magento's image resize capabilities combined with Hyvä's template flexibility make this straightforward. The bandwidth savings on mobile are dramatic: a category page showing 24 products drops from 8MB of images to under 2MB.
Use WebP with JPEG fallback. WebP compression typically delivers 25 to 35 percent smaller file sizes compared to JPEG at equivalent quality. Magento 2.4+ supports WebP conversion natively, and Hyvä's picture element implementation handles format selection based on browser support.
Lazy load below-fold images aggressively. Only the first visible row of products (typically four to six on mobile category pages) should load eagerly. Everything below the fold uses intersection observer-based lazy loading. Hyvä includes lazy loading utilities that integrate cleanly with Magento's image rendering.
Optimize product gallery interactions. On mobile, the product image gallery should be swipeable rather than thumbnail-click navigated. Implement touch gesture handling for swipe between images, pinch-to-zoom on product detail pages, and smooth transitions between gallery images. Hyvä's lightweight foundation makes these interactions performant without the heavy gallery libraries that Luma implementations typically require.
Step 4: Build Performant Layered Navigation
Layered navigation (filtering) is where complex catalogs either serve customers well or fail them completely on mobile.
Use AJAX-powered filtering. Full page reloads on filter selection are unacceptable on mobile. Implement AJAX-based filtering that updates product results without losing scroll position or resetting other filter selections. Bemeir implements this pattern across Hyvä builds using Alpine.js fetch combined with Magento's category API.
Show active filter count and clear options prominently. Mobile customers lose track of active filters easily. Display a persistent count of active filters and provide one-tap clear functionality for individual filters and all filters. This reduces the frustration of empty result sets caused by overly restrictive filtering combinations.
Optimize filter rendering for large attribute sets. If a category has 50 filterable attributes, showing all of them overwhelms the mobile filter panel. Implement a two-tier approach: show the five to eight most-used filters by default, with an expandable "More filters" section for the remainder. Analytics on filter usage frequency drives this prioritization.
Handle filter-driven zero results gracefully. When filter combinations produce no results, provide immediate feedback with suggestions: relax the most recently applied filter, show the closest matching products, or suggest alternative categories. An empty results page on mobile is a dead end that costs conversions.
Step 5: Optimize Cart and Checkout for Mobile Completion
The mobile cart and checkout experience determines whether your catalog browsing investment converts into revenue.
Implement a sticky add-to-cart bar. On product detail pages, the add-to-cart button should remain accessible regardless of scroll position. A compact sticky bar at the bottom of the screen showing price and the add-to-cart action ensures the purchase trigger is always one tap away.
Streamline the mobile checkout flow. Reduce form fields to the absolute minimum. Enable address autocomplete with Google Places API. Default to the most common shipping method. Implement digital wallet options (Apple Pay, Google Pay, Shop Pay) that bypass form filling entirely. Each additional form field on mobile checkout costs measurable conversion rate.
Optimize cart review for complex orders. For B2B catalogs where customers order multiple SKUs with specific quantities, the cart review page needs to be scannable on mobile — clear product identification, editable quantities without navigating away, and visible line item totals. Bemeir designs cart interfaces that accommodate both simple consumer orders and complex multi-line B2B orders.
Step 6: Measure and Iterate
Mobile UX optimization for complex catalogs is not a one-time implementation. It is a continuous discipline.
Monitor Core Web Vitals by device. Track LCP, FID/INP, and CLS separately for mobile and desktop. Hyvä implementations typically achieve sub-2-second LCP on mobile, but ongoing monitoring ensures that new products, categories, and content additions do not degrade performance.
Track mobile-specific funnel metrics. Monitor category-to-product click-through rates, filter usage patterns, search-to-purchase conversion, product detail page engagement depth, and cart abandonment rates — all segmented by device type.
Conduct mobile usability testing with your actual catalog. Automated tools catch performance issues. Usability testing with real customers navigating your specific catalog reveals interaction patterns, confusion points, and opportunities that analytics alone cannot surface.
