The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
A client came to us because their mobile Core Web Vitals report kept failing on Cumulative Layout Shift, even though the page felt fine on desktop.
We retested the live store at phone width and watched it load frame by frame. The page held still for the first second, then jumped - the header and mobile nav were rendering at one height, then settling into their real height once the menu script finished, pushing everything below down by a few dozen pixels. Google counts that as a layout shift even though it happens fast.
The fix was reserving the header's final height before its content painted, so there was nothing left to jump. No redesign, no new app, just locking the container to the size it was always going to end up at.
We retested the same product page fresh after the fix and the shift was gone.
If you want to check your own store, open PageSpeed Insights on mobile. If CLS is flagged, look at your header or announcement bar first - anything that could render narrower or shorter on first paint and then expand is almost always the culprit, not the big images further down the page.
Ecom Swift LLC
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Challenges
View all
Related posts
Icon cards for me, bouquets are such a visual purchase that a scannable icon beats reading "small/medium/large" every time. Did the compact chips version convert worse in testing, or are you still gathering data on that?
When your landing Page is so goated that you no longer need a launch video.
⚠️ The Challenge
The client’s legacy theme was actively hindering their growth. It was visually outdated compared to their top competitors and notoriously difficult for their team to update internally. They needed a polished, high-converting look without losing the ability to manage their own content.
💡 The Solution
I engineered a complete overhaul of their core informational pages (Science, Technology) and Best Seller collection using custom, responsive Liquid templates built on Shopify OS 2.0 architecture. By implementing a modern, component-based design system, I delivered a sleek, premium aesthetic—reminiscent of top-tier SaaS platforms—that immediately elevated their brand positioning.
🎯 Key Deliverables & Impact
🛠️ Shopify OS 2.0 Architecture: Engineered modular, highly responsive Liquid templates tailored specifically to the brand's unique content needs.
🎮 Zero-Code Client Control: Delivered a 100% editable infrastructure directly within the Shopify Theme Editor, empowering the client's team to update text, swap imagery, and build new layouts without touching a line of code.
✨ Premium UX/UI Elevation: Completely redesigned critical touchpoints to build customer trust, highlight product science, and streamline the path to purchase.
⚡ Performance & SEO Optimized: Ensured lightweight code and lightning-fast load times to maximize retention and boost organic search visibility.
💻 Skills & Tools
Shopify OS 2.0 • Custom Liquid Development • UX/UI Design • E-Commerce Optimization • Responsive Design
Curious how the Core Web Vitals actually moved after the OS 2.0 rebuild - custom Liquid on component-heavy pages can go either way depending on JS payload. Did you benchmark load time before and after, or was the win mostly on editability and brand trust?