销售提升版块
这些是 Vertex 中的 转化导向版块 —— 紧迫感提示、促销表面、弹窗流程、套装块。它们均不需要第三方 App。它们均遵守 Shopify 主题商店政策(无持久化心愿单、无追踪脚本、无联盟链接)。
堆叠过多紧迫感提示会相互抵消。倒计时旁边是低库存计数器,再旁边是促销弹窗,这会让人觉得 绝望。挑选与您活动匹配的那一个,深入投入,并定期轮换。
promo-banner
版块文件: sections/promo-banner.liquid
可关闭的顶部横幅 —— 通常用于推广全站促销、免运费门槛或季节性活动。区别于通告栏(始终开启的外壳);促销横幅是 活动驱动 且可关闭的。
设置
| 设置 | 类型 | 说明 |
|---|---|---|
| 文本 | 富文本 | 简短价值信息 —— "Spring Sale · 15% off orders over $1,000"。 |
| 背景色 | 颜色 | 选择高对比度强调色 —— 钴蓝、橙红、青色等。 |
| 链接 URL | URL | 横幅的点击目标(整个横幅都可点击)。 |
| 链接标签 | 文本 | 内联 CTA —— "Shop the sale →"。 |
| 可关闭 | 复选框 | 默认 开启。添加 × 关闭按钮 + localStorage 持久化。 |
| 位置 | 选择 | above_header(默认)· below_header。位于页眉上方更显紧迫;位于页眉下方更像横幅。 |
可关闭性
启用 可关闭 时,× 按钮会向 localStorage 写入 vertex_promo_dismissed:{section-id} 键。横幅保持隐藏,直到访客清除站点数据 —— 或您以不同 ID 重新发布该版块。
如果您想为新活动重新显示已关闭的促销,请更改版块 ID(在定制器中删除 + 重新添加版块)。旧的 localStorage 键不再匹配,横幅将对所有人重新出现。
promo-popup
版块文件: sections/promo-popup.liquid
自动打开的弹窗,包含图片、标题、正文和 CTA。可配置触发器和基于 Cookie 的节奏,让访客不会在每次页面加载时都看到。
设置
| 设置 | 类型 | 说明 |
|---|---|---|
| 标题 | 文本 | "Subscribe & save 10%" / "Wait — get a free swatch kit"。 |
| 正文 | 富文本 | 简短安抚信息 + 价值主张。 |
| 图片 | 图片 | 侧面渲染的插图(或全幅背景)。 |
| CTA 标签 | 文本 | "Sign up" / "Get the kit"。 |
| CTA URL | URL | 表单页或产品。 |
| 触发器 | 选择 | immediate · on_scroll(滚动 50% 后)· exit_intent(检测鼠标离开)。 |
| 延迟秒数 | 数字 | 仅当触发器为 immediate 时使用。默认 5。 |
| Cookie 有效期(天) | 数字 | 默认 7。关闭或转化的访客在 N 天内不会再看到。 |
触发器说明
| 触发器 | 适合 | 用户体验考量 |
|---|---|---|
| 立即(延迟) | 邮件订阅、首次访客优惠 | 最具侵扰性 —— 至少使用 5–10 秒延迟 |
| 滚动时(50%) | 参与度信号 —— 仅在访客滚动后触发,代表兴趣 | 最佳的转化 + 体验平衡 |
| 退出意图 | 最后机会优惠、放弃挽回 | 仅桌面端 —— 退出意图在移动端无法可靠触发 |
Cookie 键为 vertex_promo_popup:{section-id}。Cookie 过期前弹窗不会再次打开。
countdown
版块文件: sections/countdown.liquid
天/时/分/秒计数器。通过 JS 实时计数,初始状态服务器端渲染(无闪烁)。
设置
| 设置 | 类型 | 说明 |
|---|---|---|
| 标题 | 文本 | "Spring sale ends in"。 |
| 结束日期 | 日期选择器 | 到期日期 + 时间。存储于商家店铺时区。 |
| 过期文本 | 文本 | 计时归零后替换计数器。"The sale has ended"。 |
| 链接 URL | URL | 计数器下方的可选 CTA。 |
| 链接标签 | 文本 | "Shop now"。 |
| 配色方案 | 选择 | 标准配色方案下拉框。 |
计数原理
assets/countdown.js 运行 requestAnimationFrame 循环,每秒更新计时器。达到目标时间后,计数器被 过期文本 替换。过期后链接/CTA 被隐藏。
虚假的倒计时(永远 24 小时,刷新页面时重置)会摧毁信任。将 结束日期 与真实活动结束时间绑定,让版块负责过期状态。
featured-bundles
版块文件: sections/featured-bundles.liquid
精心策划的套装卡片,包含图片、标题、折扣徽章和 ATC。每个块为一个套装(通常是捆绑 2–5 个 SKU 的父产品,在您的后台配置为 Shopify Bundle)。
每块设置
| 设置 | 类型 | 说明 |
|---|---|---|
| 产品 | 产品选择器 | 套装父产品。 |
| 套装标签 | 文本 | 覆盖产品标题 —— "Starter MRO Kit"。 |
| 折扣文本 | 文本 | 叠加在图片上的徽章 —— "Save 15%" / "3 for the price of 2"。 |
| 描述 | 富文本 | 标题下方的简短价值主张。 |
版块设置
- 标题 —— "Bundle & save"
- 列数 —— 2 / 3 / 4
- 显示价格 —— 切换(遵守需登录才显示价格)
折扣徽章样式
折扣文本以圆形胶囊形式渲染在图片右上角。使用强调色(钴蓝、橙红、青色)—— 徽章足够小,不会压过套装视觉。
库存计数器(低库存提示)
片段: snippets/stock-counter.liquid(作为块在 main-product 中渲染)
已在 产品页 中介绍。仅对您 追踪库存的变体显示,当库存降至低库存阈值(10 件)时切换为 "仅剩 N 件" 警告。在不向竞争者透露精确库存的情况下触发紧迫感。
状态:
- 超过 10:"In stock"
- 等于或低于 10:"Only 4 left in stock"
- 可缺货下单(为零,但设置为继续销售):"Back-ordered — ships in 7–10 days"
- 售罄(为零,不可缺货下单):"Sold out"
快速查看弹窗
资源: assets/quick-view.js + snippets/quick-view-button.liquid
由产品卡上的 Quick view 按钮触发。打开带有产品图库、变体选择器、数量输入和 ATC 的弹窗 —— 无需离开合集页。
弹窗中渲染内容
- 多图图库(移动端可滑动)
- 标题 + 价格(遵守需登录才显示价格 + B2B 目录价)
- 变体选择器
- 数量输入(含 MOQ / 最大值 / 整箱包装强制)
- ATC 按钮
- "View full details →" 链接到 PDP
设置(在产品卡 / 合集版块上)
- 显示快速查看按钮 —— 切换(每个版块:
featured-collection、collection-list、搜索结果、相关产品) - 快速查看按钮标签 —— 文本(默认为 "Quick view")
何时启用/禁用
| 使用场景 | 建议 |
|---|---|
| 买家快速比较变体的高量目录 | 启用 —— 加速 "浏览 20 件、添加 3 件" 流程 |
| 买家在决策前需要数据表 + 规格的高技术性目录 | 禁用 —— 快速查看不显示规格或文档;强制点击进入 PDP |
何时使用什么
| 目标 | 版块 |
|---|---|
| 引流至全站活动 | promo-banner |
| 获取邮箱 + 提供首单折扣 | promo-popup |
| 限时优惠且硬性到期 | countdown |
| 突出精心策划的多产品优惠 | featured-bundles |
| 在不透露精确库存的情况下营造 PDP 紧迫感 | 库存计数器 |
| 减少合集页 → ATC 流程的摩擦 | 快速查看 |