Back to Details

responsive-storefront

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

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
  • 当超过50%的店面流量来自移动设备时（可查看你的分析数据）
  • 当从零搭建新店面、规划CSS架构时
  • 当审计现有店面的移动端可用性问题时
  • 当实现商品详情页、需要固定购买按钮模式时
  • 当优化移动端转化率和购物车弃购率时

Core Instructions

核心操作指南

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

步骤1：确定商家使用的平台并选择合适的方案

PlatformRecommended ApproachWhy
ShopifyUse a mobile-first OS2.0 theme (Dawn, Sense, Craft) — all are responsive by default; configure mobile layout in Theme EditorDawn scores 90+ on mobile PageSpeed out of the box; the Theme Editor exposes mobile-specific layout controls
WooCommerceUse a mobile-first WooCommerce theme (Astra, Kadence, or Flatsome) — all include responsive breakpoints and mobile cart drawer built inAstra and Kadence score well on Core Web Vitals; Flatsome has built-in sticky header and mobile menu without plugins
BigCommerceUse Cornerstone theme which is mobile-first by design; configure breakpoints in Theme EditorCornerstone is BigCommerce's reference theme and passes Google's mobile usability tests
Custom / HeadlessWrite mobile-first CSS with 
min-width
media queries and build a responsive product grid, sticky buy bar, and bottom-sheet cart drawer		Full control over all breakpoints and touch interactions; see patterns below
平台推荐方案原因
Shopify使用移动优先的OS2.0主题（Dawn、Sense、Craft）——所有主题默认都是响应式的；可在主题编辑器中配置移动端布局Dawn默认的移动端PageSpeed得分可达90分以上；主题编辑器提供了移动端专属的布局控制选项
WooCommerce使用移动优先的WooCommerce主题（Astra、Kadence、Flatsome）——所有主题都内置响应式断点和移动端购物车抽屉Astra和Kadence的Core Web Vitals表现优异；Flatsome无需插件即可实现固定头部和移动端菜单
BigCommerce使用原生支持移动优先的Cornerstone主题；可在主题编辑器中配置断点Cornerstone是BigCommerce的官方参考主题，通过了Google的移动端可用性测试
自定义/Headless使用
min-width
媒体查询编写移动优先的CSS，构建响应式商品网格、固定购买栏和底页式购物车抽屉		可完全控制所有断点和触摸交互；参考下方的实现模式

Step 2: Configure mobile layout on your platform

步骤2：在你的平台上配置移动端布局

Shopify

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
主题编辑器移动端配置：
  1. 进入 Online Store → Themes → Customize
  2. 点击顶部工具栏的移动端预览图标，预览手机端展示效果
  3. 配置头部设置：
    • 设置移动端菜单类型：抽屉式（推荐）或下拉式
    • 开启固定头部，滚动时导航栏保持可见
  4. 配置分类列表页：
    • 设置移动端每行商品数为2（标准）或1（大卡片）
    • 开启移动端筛选抽屉（而非侧边栏）
  5. 配置商品详情页：
    • 在商品区块设置中开启固定加入购物车按钮
    • 设置媒体资源位置为移动端将图库堆叠在商品信息上方（默认配置）
  6. 在主题设置 → 按钮中，将按钮高度设置为至少44px，满足触摸目标要求
测试移动端性能：
  1. 打开Google PageSpeed Insights（pagespeed.web.dev），输入你的店铺URL
  2. 查看移动端标签页的结果，目标是性能得分达到75分以上
  3. 最常见的优化方案：通过 Settings → Files 压缩图片，将大体积图片替换为WebP格式

WooCommerce

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
Astra主题移动端配置：
  1. 进入 Appearance → Customize → Header → Mobile Header
  2. 配置汉堡菜单的样式和位置
  3. 在 Appearance → Customize → WooCommerce → Shop Page 中，设置移动端每行商品数为2
  4. 在 Appearance → Customize → WooCommerce → Product Page 中，开启移动端固定加入购物车栏
  5. 在 Appearance → Customize → Global → Container 中，确保移动端容器宽度为100%（避免横向内边距问题）
Kadence主题移动端配置：
  1. 进入 Appearance → Customize → WooCommerce → Product Archive
  2. 设置移动端列数为2，配置卡片间距
  3. 在 Appearance → Customize → WooCommerce → Product Page 中，开启固定加入购物车按钮
  4. 在 Kadence → Header Builder 中配置移动端头部布局——Kadence支持拖拽元素（logo、菜单、购物车）到不同的移动端头部行
Flatsome主题：
  1. 在 Theme Options → WooCommerce → Products 中配置移动端商品网格列数
  2. 在 Theme Options → WooCommerce → Product 中开启固定加入购物车按钮
  3. Flatsome的UX Builder自带移动端预览模式，可使用它检查每个页面的移动端布局

BigCommerce

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
Cornerstone移动端配置：
  1. 进入 Storefront → My Themes → Customize
  2. 点击工具栏的设备图标切换到移动端预览
  3. 在 Global → Layout 中配置移动端断点和容器内边距
  4. 在 Product Page → Images 中，设置移动端图库布局为堆叠式（图片在商品信息上方）
  5. 开启购物车的移动端浮层——将移动端购物车从侧边栏转换为底页样式
  6. 在 Category Page → Product Cards 中，设置移动端列数为2

Custom / Headless

自定义/Headless

Mobile-first CSS foundations:
css
/* 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):
css
.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:
jsx
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>
  );
}
css
.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):
css
.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:
css
button, a, input[type="checkbox"], input[type="radio"], select, [role="button"] {
  min-height: var(--touch-target);
  min-width: var(--touch-target);
}
移动优先CSS基础：
css
/* tokens.css */
:root {
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --touch-target: 44px;     /* WCAG 2.5.5 最低点击目标要求 */
  --content-max-width: 1200px;
}

/* 断点: sm=640px, md=768px, lg=1024px */
/* 先编写移动端基础样式，再为更大的屏幕添加min-width媒体查询 */
响应式商品网格（根据可用宽度自动填充列数）：
css
.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); }
}

/* 商品卡片CTA的点击目标最少44px */
.product-card__cta { min-height: var(--touch-target); display: flex; align-items: center; }
固定购买栏——当主加入购物车按钮滚动出视野时显示：
jsx
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>
  );
}
css
.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底部指示条 */
  display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem;
}
.sticky-buy-bar.visible { transform: translateY(0); }
移动端购物车抽屉（底页模式）：
css
.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); }

/* 结算按钮保持在拇指可及范围内 */
.cart-checkout-btn {
  position: sticky; bottom: 0; background: #fff;
  padding: var(--space-md);
  padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom));
}
全局44px触摸目标设置：
css
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
  • 编写移动优先的CSS —— 从小屏样式开始编写，再添加
    min-width
    媒体查询适配更大的屏幕；反向的编写方式会导致样式优先级冲突
  • 使用
    env(safe-area-inset-bottom)
     —— 适配iPhone刘海/底部指示条的必要属性，否则底部固定按钮会被遮挡
  • 使用真实设备测试 —— 浏览器开发者工具的模拟无法复现iOS Safari的动态视口高度或触摸滚动惯性
  • 在滚动容器上使用
    overscroll-behavior: contain
     —— 避免用户在购物车抽屉内滑动时触发页面主体滚动
  • 全屏元素使用
    100dvh
    替代
    100vh
     —— iOS Safari的动态工具栏会导致
    100vh
    包含工具栏高度，引发溢出问题
  • <body>
    的font-size至少设置为16px     —— 避免iOS Safari在输入框聚焦时自动缩放页面

Common Pitfalls

常见问题

ProblemSolution
Sticky buy bar obscures footer or checkout buttonHide the bar when the footer or checkout button enters the viewport using IntersectionObserver
iOS Safari layout jumps when toolbar appearsUse 
100dvh
(dynamic viewport height) instead of 
100vh
; fall back with 
@supports (height: 100dvh)
Font too small to read without pinch-zoomingSet 
font-size: 1rem
(16px) on body; never set it lower on mobile
Cart drawer body scrollApply 
overflow: hidden
on 
<body>
when drawer is open; restore on close
Product images load slowly on mobileSpecify 
width
and 
height
attributes to prevent layout shift; use 
loading="lazy"
for below-fold images
问题解决方案
固定购买栏遮挡页脚或结算按钮使用IntersectionObserver监听，当页脚或结算按钮进入视口时隐藏固定购买栏
工具栏出现时iOS Safari布局跳动使用
100dvh
（动态视口高度）替代
100vh
；通过
@supports (height: 100dvh)
做降级适配
字体太小，需要捏合缩放才能阅读给body设置
font-size: 1rem
（16px）；移动端永远不要设置更小的字体
购物车抽屉滑动时触发页面主体滚动抽屉打开时给
<body>
添加
overflow: hidden
；关闭时恢复
移动端商品图片加载慢明确设置
width
和
height
属性避免布局偏移；首屏以下的图片添加
loading="lazy"
属性

Related Skills

相关技能

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