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