DEV Community

Cover image for Dev Log: Modernizing the Oatopia Shopify Experience
Vicente G. Reyes
Vicente G. Reyes

Posted on โ€ข Originally published at blog.vicentereyes.org

Dev Log: Modernizing the Oatopia Shopify Experience

Weekly Sprint Report: February 4 โ€“ February 6, 2026

This week, we executed a comprehensive technical overhaul of the Oatopia Shopify theme. Our focus shifted from foundational modernization of legacy assets to high-level performance tuning and UX polishing.

โšก Performance & Core Web Vitals

Speed is a feature. We spent significant time reducing page weight and optimizing how the browser handles our most important assets.

  • Image Modernization: Conducted a project-wide audit to replace legacy filters (img_url, file_img_url, asset_img_url) with the modern image_url standard.

  • Next-Gen Delivery: Enabled automatic WebP/AVIF delivery via Shopify CDN and implemented loading="lazy" for off-screen images.

  • LCP Optimization: Updated the collection banner to use fetchpriority="high", signaling the browser to prioritize the hero image immediately.

  • HTML Bloat Reduction: Refactored the QuickBuy feature to use a minimal manual JSON object instead of injecting massive data for every product card, drastically reducing page weight.

  • Asset Loading: Moved global.bundle.js to the end of the body to unblock rendering and implemented a "print" media trick for non-blocking Adobe Typekit fonts.

๐Ÿ—บ๏ธ Navigation & Header Architecture

We addressed several layout shifts and usability hurdles within the site's navigation.

  • Smart Hover Logic: Added a 150ms grace period to dropdowns and implemented auto-close logic for adjacent menus to prevent overlapping during mouse sweeps.

  • Desktop-to-Mobile Parity: Fixed an issue where secondary links like "Account" were missing from the mobile drawer by updating snippets/sidebar-nav.liquid.

  • Mega Menu Styling: Updated the layout to support a 3-column categorical structure (e.g., Shop > Oat Bakes, Flapjacks, Giftboxes).

  • Flexibility: Removed hardcoded CSS constraints to restore dynamic logo sizing based on theme settings.

๐Ÿ–Œ๏ธ UI/UX & Visual Consistency

Refining the "feel" of the store to match the Oatopia brand identity.

  • Grid Stability: Optimized product grids to ensure rows are fully filled (no empty slots).

  • Mobile "Gap" Fix: Forced mobile 2-column grids to always be divisible by 2 to prevent "hanging" items at the end of a page.

  • Interactive Polish: Added a "Zoom + Bold" effect for dropdown items and increased horizontal padding on "View All" buttons for better prominence.

  • Brand Styling: Customized the footer "Subscribe" button with a Blueberry background and Demarara text.

  • Layout Fixes: Applied flex-nowrap to the header to prevent the Search and Cart icons from "squishing" on smaller desktop screens.

๐Ÿ› ๏ธ Technical Fixes & SEO

Behind-the-scenes improvements for long-term site health.

  • Scroll Locking: Implemented JavaScript handlers for full body-scroll locking when menus are open to prevent secondary page scrolling.

  • SEO Hardening: Applied rel="nofollow" to all raw image thumbnail links to prioritize high-value page indexing.

  • Enhanced Product Blocks: Updated the product template schema to support multiple independent, per-product FAQ/Collapsible blocks.

  • Alpine.js Integration: Enhanced the menu state management using Alpine.js to handle hover delays and click-outside events effectively.

๐Ÿ Conclusion

By the end of this sprint, all core modernization, performance optimization, and layout stabilization tasks have been completed and verified on the development theme. The site now boasts a significantly more robust navigation system and a leaner code architecture, particularly regarding image handling and HTML delivery

Top comments (1)

Collapse
ย 
stackedboost profile image
Peter Hallander โ€ข

Really solid sprint. The 150ms hover grace period on dropdowns is one of those changes that feels invisible to users but makes the nav feel dramatically less frustrating โ€” especially when someone is mousing toward a submenu item diagonally.

On the navigation side: since you're already investing in hover UX, you might find Prefetch (apps.shopify.com/prefetch) pairs well. It intercepts the same hover event to start preloading the destination page, so by the time a user actually clicks they're loading from cache. Complements the snappy dropdown work nicely.

On the visual consistency side โ€” the grid stability work and making sure product rows are always full is exactly the kind of detail that shapes how "premium" a store feels. If Oatopia has product images with varying backgrounds or aspect ratios, Eye Catching (apps.shopify.com/beautiful-brands) handles standardizing those backgrounds and adding brand overlays without manual image editing.

(Disclosure: I built both of those apps.) Nice writeup โ€” this kind of dev log format is useful for communicating sprint value to non-technical stakeholders too.