When the user wants to design,…

# 淘宝店铺首页商品列表重排版方案（12款女装 / 每行4个）

一、整体布局结构

• 网格布局：采用 4列 × 3行 的卡片式布局，共12个商品位
• 页面宽度：主内容区建议 1200px 左右，居中展示
• 卡片间距：列间距 15-20px，行间距 20-25px，保证呼吸感
• 移动端适配：小屏自动降级为 2列布局，避免图片过小

二、单个商品卡片规格

• 图片尺寸：240×320px（宽×高，3:4 竖版比例，适合女装展示）
• 图片要求：统一白底或浅色底，模特图居中裁剪，预留底部 15% 区域放标签
• 卡片下方信息区（高度约 90-110px）：
• 商品标题：1-2行截断，字号 13-14px
• 价格行 + 标签行

三、价格突出设计

• 字号：价格是标题的 1.5 倍以上，建议 18-22px
• 颜色：使用淘宝红（约 #FF5000 / #FF4400 一类暖红色）
• 结构：
• ¥ 符号小一号 + 整数大号 + 小数小号
• 原价划线置灰（可选），突出到手价
• 可加“券后价”“限时价”角标强化促销感

四、销量标签设计

• 位置：价格右侧或图片左下角
• 样式：小圆角胶囊标签，浅红/橙色底 + 白字或红字
• 文案模板：“已售1万+”“月销5000+”“热卖中”
• 建议：销量数据用区间或“万/千”单位表述，避免精确到个位显得刻意

五、排列顺序建议

1. 第1行（黄金位）：主推款、爆款、高销量款

2. 第2行：新品 / 应季款

3. 第3行：清仓款、高性价比引流款

六、实施方式（二选一）

• 店铺装修后台：淘宝旺铺/千牛后台 → 首页装修 → 添加“商品列表/宝贝墙”模块 → 设置每行4个、图片240×320、勾选显示价格与销量
• 自定义代码（高级装修）：用 CSS Grid grid-template-columns: repeat(4, 1fr) 实现，标签用绝对定位叠在图上

七、上线检查清单

• [ ] 12张图统一裁剪比例，无拉伸变形
• [ ] 价格标签清晰、无遮挡商品主体
• [ ] 手机端预览正常换行为2列
• [ ] 点击商品可正确跳转链接

需要的话，我可以帮你写出具体的 HTML+CSS 代码模板，直接套用即可。