Responsive Storefront

Overview

Apply mobile-first responsive design patterns to a commerce storefront so that the shopping experience is fast and usable on phones, where the majority of commerce traffic originates. Key patterns include thumb-zone aware layouts, a sticky buy bar that appears on scroll, tap-target sizing, and responsive product grids that reflow without horizontal scrolling.

When to Use This Skill

• When more than 50% of storefront traffic comes from mobile devices (check your analytics)
• When building a new storefront from scratch and laying out the CSS architecture
• When auditing an existing storefront for mobile usability issues
• When implementing a product detail page and need a sticky buy button pattern
• When optimizing mobile conversion rate and cart abandonment

Core Instructions

Step 1: Determine the merchant's platform and choose the right approach