Responsive Storefront

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

Step 2: Configure mobile layout on your platform

---

Shopify

Theme Editor mobile configuration: 1. Go to Online Store → Themes → Customize 2. Click the Mobile preview icon in the top toolbar to preview on a phone 3. Configure Header settings:

• Set Mobile menu type: Drawer (recommended) or Dropdown
• Enable Sticky header so navigation stays visible while scrolling

4. Configure Collection page:

• Set Products per row (mobile) to 2 (standard) or 1 (large cards)
• Enable Filters as a drawer on mobile (not sidebar)

5. Configure Product page:

• Enable Sticky add-to-cart in the product section settings
• Set Media placement to stack gallery above product info on mobile (this is the default)

6. In Theme settings → Buttons, set button height to at least 44px to meet touch target requirements

Testing mobile performance: 1. Open Google PageSpeed Insights (pagespeed.web.dev) and enter your store URL 2. Review the Mobile tab — aim for 75+ Performance score 3. The most common fix: compress images via Settings → Files and replace large images with WebP versions

---

WooCommerce

Astra theme mobile configuration: 1. Go to Appearance → Customize → Header → Mobile Header 2. Configure hamburger menu style and position 3. Under Appearance → Customize → WooCommerce → Shop Page, set Products per row (mobile) to 2 4. Under Appearance → Customize → WooCommerce → Product Page, enable Sticky Add to Cart bar for mobile 5. In Appearance → Customize → Global → Container, ensure container width is 100% on mobile (no horizontal padding issues)

Kadence theme mobile configuration: 1. Go to Appearance → Customize → WooCommerce → Product Archive 2. Set mobile columns to 2 and configure card spacing 3. Under Appearance → Customize → WooCommerce → Product Page, enable Sticky Add to Cart 4. In Kadence → Header Builder, configure the mobile header layout — Kadence lets you drag elements (logo, menu, cart) to separate mobile header rows

Flatsome theme: 1. In Theme Options → WooCommerce → Products, configure mobile product grid columns 2. Enable Sticky Add to Cart in Theme Options → WooCommerce → Product 3. Flatsome's UX Builder has a mobile preview mode — use it to inspect every page's mobile layout

---

BigCommerce

Cornerstone mobile configuration: 1. Go to Storefront → My Themes → Customize 2. Preview on mobile using the device icon in the toolbar 3. Under Global → Layout, configure mobile breakpoints and container padding 4. Under Product Page → Images, set gallery layout to Stacked on mobile (image above product info) 5. Enable Mobile overlay for the cart — this converts the cart from a sidebar to a bottom sheet on mobile 6. Under Category Page → Product Cards, set mobile columns to 2

---

Custom / Headless

Mobile-first CSS foundations:

/* tokens.css */
:root {
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --touch-target: 44px;     /* WCAG 2.5.5 minimum tap target */
  --content-max-width: 1200px;
}

/* Breakpoints: sm=640px, md=768px, lg=1024px */
/* Write base styles for mobile, add min-width queries for larger screens */

Responsive product grid (auto-fills columns based on available width):

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
  gap: var(--space-md);
  padding: var(--space-md);
}

@media (min-width: 640px) {
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

@media (min-width: 1024px) {
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-lg); }
}

/* Minimum 44px touch target on product card CTA */
.product-card__cta { min-height: var(--touch-target); display: flex; align-items: center; }

Sticky buy bar — appears when primary Add to Cart scrolls out of view:

export function StickyBuyBar({ product, onAddToCart }) {
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    const primaryBtn = document.getElementById('main-add-to-cart');
    if (!primaryBtn) return;
    const obs = new IntersectionObserver(([e]) => setVisible(!e.isIntersecting));
    obs.observe(primaryBtn);
    return () => obs.disconnect();
  }, []);

  return (
    <div className={`sticky-buy-bar ${visible ? 'visible' : ''}`} aria-hidden={!visible}>
      <img src={product.image} alt="" width="40" height="40" />
      <span>{product.name}</span>
      <span>${product.price}</span>
      <button onClick={onAddToCart} tabIndex={visible ? 0 : -1}>Add to Cart</button>
    </div>
  );
}

.sticky-buy-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: #fff; border-top: 1px solid #e2e8f0;
  transform: translateY(100%); transition: transform 0.2s ease; z-index: 50;
  padding-bottom: env(safe-area-inset-bottom); /* iPhone home indicator */
  display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem;
}
.sticky-buy-bar.visible { transform: translateY(0); }

Mobile cart drawer (bottom sheet pattern):

.cart-drawer {
  position: fixed; right: 0; top: 0; bottom: 0;
  width: min(400px, 100vw); background: #fff;
  transform: translateX(100%); transition: transform 0.3s ease;
  overflow-y: auto; overscroll-behavior: contain;
}

@media (max-width: 640px) {
  .cart-drawer {
    top: auto; width: 100vw; height: 85vh;
    transform: translateY(100%); border-radius: 16px 16px 0 0;
  }
  .cart-drawer.open { transform: translateY(0); }
}

.cart-drawer.open { transform: translateX(0); }

/* Checkout button stays within thumb reach */
.cart-checkout-btn {
  position: sticky; bottom: 0; background: #fff;
  padding: var(--space-md);
  padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom));
}

Global 44px touch targets:

button, a, input[type="checkbox"], input[type="radio"], select, [role="button"] {
  min-height: var(--touch-target);
  min-width: var(--touch-target);
}

Best Practices

• Write mobile-first CSS — start with the smallest screen styles and add min-width media queries to enlarge; the reverse approach leads to specificity conflicts
• Use `env(safe-area-inset-bottom)` — required for iPhone notch/home indicator; without it, bottom-fixed buttons are obscured
• Test with real devices — browser DevTools emulation does not replicate iOS Safari's dynamic viewport height or touch scroll inertia
• Use `overscroll-behavior: contain` on scroll containers — prevents body scroll from leaking when users swipe in the cart drawer
• Use `100dvh` instead of `100vh` on full-screen elements — iOS Safari's dynamic toolbar causes 100vh to include the toolbar height, causing overflow
• Set font-size to at least 16px on <body> — prevents iOS Safari from auto-zooming on input focus

Common Pitfalls

Related Skills

• @mega-menu-builder
• @quick-view-modal
• @accessibility-commerce
• @storefront-theming

Mobile-Optimized Cart Drawer

Problem/Feature Description

Bloom Home, a home goods retailer, is rebuilding their cart experience after discovering that mobile users are abandoning their cart at twice the rate of desktop users. User testing revealed several pain points: the cart panel slides in from the side on phones, making it feel like a desktop pattern forced onto a small screen; users accidentally trigger page scrolling instead of scrolling the cart list; the checkout button disappears behind the iPhone home indicator; and tapping outside the cart is unreliable.

The engineering team wants a cart drawer component that feels comfortable on both mobile and desktop. Mobile users in testing kept accidentally triggering page scroll when they meant to scroll within the cart list, and the checkout button was obscured behind the phone's system UI at the bottom of the screen. On desktop, users expect the familiar right-side panel layout. The component must lock the underlying page from scrolling when the cart is open, and support standard cart contents: a scrollable list of items with quantity controls and a checkout button.

The storefront already uses a React codebase. The page also needs a hero banner image at the top that serves different crops for mobile versus desktop browsers, loaded efficiently.

Output Specification

Produce the following files:

• CartDrawer.jsx — React component for the cart drawer with open/close behavior and body scroll locking
• CartDrawer.css — all CSS for the drawer including responsive layout, open/close transitions, and checkout button positioning
• HeroBanner.jsx — a React component rendering a responsive hero image with art direction for mobile vs desktop
• implementation-notes.md — brief notes covering the mobile vs desktop layout switch, scroll locking approach, and image art direction technique

The component should accept props: isOpen (boolean), onClose (function), items (array of {id, name, price, quantity}), onCheckout (function). Use placeholder image paths in HeroBanner — no actual image files are needed.

Mobile-First Product Catalog Page

Problem/Feature Description

Finsi, a direct-to-consumer fashion brand, has seen mobile traffic climb to 68% of total storefront visits but conversion on phones is lagging behind desktop by 40%. Their product catalog page was built desktop-first years ago and suffers from images that overflow on small screens, buttons that are frustratingly difficult to tap accurately, and color swatch selectors that frustrate users on touch screens.

The team wants a fresh CSS foundation for their catalog page. They need a product grid that works well across phones, tablets, and desktop screens. Each product card should display a product image (portrait orientation), a name, a price, a row of color variant swatches, and an "Add to Cart" button.

Output Specification

Produce a self-contained HTML file named catalog.html containing:

• Inline <style> blocks (or a <style> tag in <head>) with all the CSS needed
• A <div class="product-grid"> containing at least 4 sample product cards
• Each card must include: a product image (can be a placeholder), product name, price, at least 3 color variant swatches, and an "Add to Cart" button
• A brief notes.md file explaining the key CSS decisions you made and which mobile UX concerns they address

Product Detail Page with Persistent Buy Button

Problem/Feature Description

Trove Goods, an outdoor gear e-commerce company, has identified that mobile shoppers frequently scroll past the primary "Add to Cart" button on their product detail pages and then lose it — they have to scroll back up to buy. Analytics show that 35% of users who scroll to the reviews section never return to complete a purchase. The product manager wants a persistent buy button that becomes visible only after the original Add to Cart button has scrolled off-screen, allowing customers to purchase at any point during their browsing.

Additionally, the PDP layout itself needs to work on phones (a single column view where the product details stack below the images) and scale up to a two-panel layout on larger screens where the image gallery stays anchored while the user scrolls through descriptions, specs, and reviews.

The solution must handle the iPhone home indicator safely — previous attempts had buttons hidden behind it — and the layout must not jump around when iOS Safari's dynamic toolbar appears and disappears.

Output Specification

Produce the following files:

• StickyBuyBar.jsx — a React component implementing the persistent buy bar behavior
• StickyBuyBar.css — the CSS for the sticky bar
• pdp-layout.css — CSS for the product detail page layout (single column mobile, two-panel desktop)
• implementation-notes.md — a short explanation of how the scroll detection works and how iOS edge cases are handled