首页与营销区块
Vertex 内置 30+ 首页就绪区块,专为 B2B 与工业用品店铺设计:hero 旋转器、编辑感多列、信任标识、KPI 栏、带自动输出 JSON-LD 的 FAQ 折叠面板、转化横幅,以及在一条横幅中结合两个相关想法的 50/50 合并区块(品牌 + 快速订购、资源 + FAQ)。
此处的每个区块都是独立的 OS 2.0 区块。在定制器中按任意顺序拖入它们。你也不必只在首页使用它们 — 可拖到 page.about.json、page.services.json 或任何自定义页面模板。
Hero 与开篇区块
hero
区块文件: sections/hero.liquid
多幻灯片旋转器,带自动播放、圆点导航和编辑感构图(标签 + 主标题 + 副标题 + 双 CTA)。默认仅一张幻灯片,以保证最快 LCP — 额外幻灯片是渐进增强。
每张幻灯片块设置: 图片(通过 <picture><source> 支持移动端感知的宽度选择)、标签文字、主标题、副标题、主 CTA 标签 + URL、次 CTA 标签 + URL、对齐方式(左 / 中)。
区块设置: 自动播放间隔(秒)、显示圆点切换、配色方案。
如果 Lighthouse 性能是优先项,将首页保持为单张 hero 幻灯片。每张额外幻灯片都会向初始负载添加一张 hero 大小的图片。默认仅 1 张幻灯片,正是此原因。
featured-collection
区块文件: sections/featured-collection.liquid
从集合选择器拉取的产品网格。接受 @app 块以符合 Theme Store 规范。
设置: 集合选择器、标题、每行产品数(2 / 3 / 4 / 5)、移动端列数(1 / 2)、显示查看全部链接、配色方案。
collection-list
区块文件: sections/collection-list.liquid
带图片覆层的类别网格,标题居中覆盖在每个瓦片之上。可配置列数和宽高比。
编辑感模块
image-with-text
区块文件: sections/image-with-text.liquid
经典的 50/50 或非对称图文配对。适合关于我们、我们的流程、为什么选我们。
设置: 图片、标题、正文(富文本)、CTA 标签 + URL、布局(image-left / image-right)、配色方案。
multicolumn
区块文件: sections/multicolumn.liquid
2、3 或 4 列网格。每列有图标(或图片)、标题、正文和可选链接。用于价值主张(当日发货 · NET-30 · 批量定价 · ISO 9001 认证)。
每列块设置: 图标(图片)、标题、正文、链接标签 + URL。
rich-text
区块文件: sections/rich-text.liquid
居中引言或关于块。标题 + 富文本正文 + 可选 CTA。少用 — 这是"分页"块。
timeline
区块文件: sections/timeline.liquid
About 页面的年份 + 里程碑年表。每个块:年份、标题、正文。
信任与社会证明
testimonials
区块文件: sections/testimonials.liquid
带评级的卡片,采用头像重叠的页眉风格。每张卡片有评分(1–5 星)、引用、客户姓名、角色、公司、头像图片。
每个块设置: 姓名、角色、公司、引用(富文本)、评分(1–5)、头像(图片)。
logo-list
区块文件: sections/logo-list.liquid
带渐隐网格线的跑马灯滚动品牌 logo。用于受信任于 / 特色出现在 / 我们代理的品牌。
每个块设置: logo 图片、可选 URL。区块级:滚动速度、显示网格线。
press-coverage
区块文件: sections/press-coverage.liquid
Logo 条 + 摘录引用。结合媒体 logo 与简短的署名引用 — "……WordPress 的 McMaster-Carr。" — Trade Weekly。
stats-bar
区块文件: sections/stats-bar.liquid
深色模式 KPI 横幅。用于标志性数字 — 40,000+ SKU · NET-30 · 24 小时发货 · ISO 9001。
每个块设置: 数字(大文字)、标签(小文字)。
"40,000+ SKU" 比 "40,127 SKU" 读起来更有力,而且不必每次库存变动都更新区块。订单量同理。
转化与 CTA
cta-banner
区块文件: sections/cta-banner.liquid
页脚之上的行动召唤,带与页脚重叠的视觉效果 — 横幅视觉上突入页脚,呈现编辑感的精致。
设置: 标题、副标题、主 CTA、次 CTA、图片(可选)、对 B2B 客户隐藏切换。
对 B2B 客户隐藏切换是一个小但关键的细节。如果 CTA 写着*"成为经销商"或"申请报价"*,你不希望向已经是已登录经销商的买家显示。打开此项,当 customer.b2b? 为 true 时该区块消失。
newsletter
区块文件: sections/newsletter.liquid
带订阅按钮的邮箱订阅。使用 Shopify 原生 customer-newsletter 表单 — 订阅者落入你的 Shopify 客户列表,带 newsletter 标志。
industries-grid
区块文件: sections/industries-grid.liquid
编辑感卡片网格,用于展示你服务的垂直行业 — HVAC · 制造 · 设施 · 海事 · 航空航天。
每个块设置: 图片、标题、链接。
resource-hub
区块文件: sections/resource-hub.liquid
规格书、MSDS、宣传册、认证的下载列表。每个条目是一个文件链接。
每个块设置: 标题、文件(PDF)、描述、可选图标。
services-grid
区块文件: sections/services-grid.liquid
服务项目的图片覆层瓦片 — 按尺寸切割 · 定制套装 · 现场咨询 · 库存管理。
FAQ
faq
区块文件: sections/faq.liquid
基于 disclosure 的折叠面板(基于原生 <details> / <summary> 构建,完整支持键盘 + 屏幕阅读器)。自动输出 FAQPage JSON-LD 以获得 Google 富文本摘要。
每个块设置: 问题(文本)、答案(富文本)。
该区块自动输出 JSON-LD 图谱 — 你将在 Google 搜索结果中获得 FAQ 富文本摘要,无需修改代码。请确 保问题是买家真实会问的问题(而非营销文案),因为 Google 的内容指南适用。
双用途合并区块
某些区块在一个横幅中结合两个想法,节省垂直空间并营造编辑感节奏。
dual-brands-quickorder
区块文件: sections/dual-brands-quickorder.liquid
50/50 合并:一侧是品牌 logo 网格,另一侧是快速订购粘贴加购板。非常适合 B2B 首页 — 你希望在同一横幅中同时展示信任标识与转化路径。
dual-resources-faq
区块文件: sections/dual-resources-faq.liquid
50/50 合并:一侧是资源下载(规格书、宣传册),另一侧是 FAQ 折叠面板。支持密集型行业的常见配对。
区块排序建议
MRO / 工业用品首页的建议顺序:
- Hero — 价值主张 + 主 CTA(目录 vs RFQ)
- 统计栏 — 即时可信度标识
- 精选集合 — 畅销品或漏斗顶部类别
- 多列 — 3 列展示为什么选我们
- 行业网格 — 你服务的垂直行业
- Logo 列表 — 你代理的品牌
- 双品牌 + 快速订购 — 与贸易名单 CTA 配对
- 客户证言 — 带评分的买家引用
- 资源中心 — 下载
- FAQ — 头部异议
- CTA 横幅 — 申请报价(对已登录 B2B 隐藏)
- 邮件订阅 — 贸易名单注册
后续步骤
- 产品页面区块 → — 主产品、标签页、相关产品、最近浏览、粘性购物车
- B2B-only 区块 → — B2B 功能宣传、批量订购、RFQ、对比
- 销售助推区块 → — 促销横幅、倒计时、套装、库存计数器
- 查找器区块 → — Make/Model/Year、Brand/Category/Capacity、打印机查找器
- 主题设置参考 → — 配色方案、排版、布局设置