responsive-storefront

响应式店面

概述

为电商店面应用移动优先的响应式设计模式，让购物体验在手机上既快捷又易用。大多数电商流量都来自手机。关键模式包括：适配拇指活动区域的布局、滚动时显示的粘性购买栏、合适的点击目标尺寸，以及无需水平滚动即可重新排列的响应式商品网格。

何时使用此技能

• 当店面流量中超过 50% 来自移动设备时（请查看分析数据）
• 从头开始构建新店面并设计 CSS 架构时
• 审查现有店面的移动端易用性问题时
• 实现商品详情页并需要粘性购买按钮模式时
• 优化移动端转化率和购物车放弃率时

核心说明

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

平台	推荐方法	原因
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 的移动端易用性测试
自定义 / 无头架构	使用 min-width 媒体查询编写移动优先的 CSS，并构建响应式商品网格、粘性购买栏和底部弹出式购物车抽屉	可全面控制所有断点和触控交互；请参阅下方模式

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

---

Shopify

主题编辑器移动端配置：

1. 前往 在线商店 → 主题 → 自定义
2. 点击顶部工具栏中的 移动端 预览图标，以手机视图预览
3. 配置 页眉设置：
   • 将 移动端菜单类型 设为：抽屉式（推荐）或下拉式
   • 启用 粘性页眉，使导航栏在滚动时保持可见
4. 配置 集合页面：
   • 将 每行商品数（移动端） 设为 2（标准）或 1（大卡片）
   • 在移动端启用抽屉式 筛选器（而非侧边栏）
5. 配置 商品页面：
   • 在商品分区设置中启用 粘性加入购物车
   • 将 媒体位置 设为在移动端将图库堆叠在商品信息上方（这是默认设置）
6. 在 主题设置 → 按钮 中，将按钮高度设为至少 44px，以满足触控目标尺寸要求

测试移动端性能：

1. 打开 Google PageSpeed Insights（pagespeed.web.dev）并输入店铺网址
2. 查看“移动端”标签页——性能得分目标为 75+
3. 最常见的修复方法：通过 设置 → 文件 压缩图片，并将大图片替换为 WebP 版本

---

WooCommerce

Astra 主题移动端配置：

1. 前往 外观 → 自定义 → 页眉 → 移动页眉
2. 配置汉堡菜单的样式和位置
3. 在 外观 → 自定义 → WooCommerce → 商店页面 下，将 每行商品数（移动端） 设为 2
4. 在 外观 → 自定义 → WooCommerce → 商品页面 下，为移动端启用 粘性加入购物车 栏
5. 在 外观 → 自定义 → 全局 → 容器 中，确保移动端容器宽度为 100%（避免水平内边距问题）

Kadence 主题移动端配置：

1. 前往 外观 → 自定义 → WooCommerce → 商品归档
2. 将移动端列数设为 2，并配置卡片间距
3. 在 外观 → 自定义 → WooCommerce → 商品页面 下，启用 粘性加入购物车
4. 在 Kadence → 页眉构建器 中配置移动端页眉布局 — Kadence 支持将元素（徽标、菜单、购物车）拖动到独立的移动端页眉行

Flatsome 主题：

1. 在 主题选项 → WooCommerce → 商品 中，配置移动端商品网格列数
2. 在“主题选项 → WooCommerce → 商品”中启用 粘性加入购物车
3. Flatsome 的 UX Builder 提供移动端预览模式 — 使用该模式检查每个页面的移动端布局

---

BigCommerce

Cornerstone 移动端配置：

1. 前往 店面 → 我的主题 → 自定义
2. 使用工具栏中的设备图标预览移动端效果
3. 在 全局 → 布局 下，配置移动端断点和容器内边距
4. 在 商品页面 → 图片 下，将移动端图库布局设为 堆叠（商品信息上方显示图片）
5. 为购物车启用 移动端浮层 — 这会将购物车从侧边栏转换为移动端底部弹出面板
6. 在 分类页面 → 商品卡片 下，将移动端列数设为 2

---

自定义 / 无头架构

移动端优先的 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 */

响应式商品网格（根据可用宽度自动填充列）：

.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; }

粘性购买栏 — 当主要的加入购物车按钮滚出视野时显示：

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); }

移动端购物车抽屉（底部弹出面板模式）：

.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));
}

全局 44px 触控目标：

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

最佳实践

• 编写移动端优先的 CSS — 从最小屏幕的样式开始，并添加 min-width 媒体查询以逐步扩展；反向处理会导致优先级冲突
• 使用 env(safe-area-inset-bottom) — iPhone 刘海屏/主屏幕指示器必需；不使用时，底部固定按钮会被遮挡
• 使用真实设备测试 — 浏览器 DevTools 仿真无法复现 iOS Safari 的动态视口高度或触控滚动惯性
• 在滚动容器上使用 overscroll-behavior: contain — 用户在购物车抽屉中滑动时，可防止滚动传递到页面主体
• 在全屏元素上使用 100dvh 而不是 100vh — iOS Safari 的动态工具栏会导致 100vh 包含工具栏高度，从而造成溢出
• 将 <body> 上的字体大小设为至少 16px — 防止 iOS Safari 在输入框获得焦点时自动缩放

常见问题

问题	解决方案
粘性购买栏遮挡页脚或结账按钮	使用 IntersectionObserver，在页脚或结账按钮进入视口时隐藏该栏
工具栏出现时 iOS Safari 布局跳动	使用 100dvh（动态视口高度）而不是 100vh；通过 @supports (height: 100dvh) 提供回退方案
字体太小，必须捏合缩放才能阅读	将 body 上的 font-size 设为 1rem（16px）；移动端切勿设得更小
购物车抽屉中的页面主体滚动	抽屉打开时，对 <body> 应用 overflow: hidden；关闭时恢复
商品图片在移动端加载缓慢	指定 width 和 height 属性以防止布局偏移；对首屏以下的图片使用 loading="lazy"

相关技能

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