Vertex 的 4 个演示店铺 — Vertex、Throttle、OfficeIT、Inkline

一份 Vertex 主题授权。四种生产就绪的店铺外观。 每个预设都为特定的 B2B / B2C 工业垂直领域定制 — 不同的强调色、不同的首页布局、不同的查找器、不同的场景图像、不同的文案钩子。在它们之间切换只需在自定义器中点击一次(永久)或一个 URL 参数(临时预览)。

如果您跨多个垂直领域销售 — 或您在发布前正在决定要主推哪个垂直 — 这就是为您的店铺选择正确起点的指南。

一份授权,四个店铺

您无需购买四次 Vertex。这 4 个预设都包含在同一个主题文件中。您也可以混合搭配 — 选择 OfficeIT 的首页但使用 Throttle 的强调色,或使用自定义调色板选择器覆盖任何预设。它们是起点,而不是锁定的模板。

---

为什么有 4 个预设?

Shopify Theme Store 奖励能展示广度的主题。浏览主题目录的买家希望一眼看到自己所在的行业 — 而不是一个泛用的 "B2B 主题" 演示,需要他们在心理上转换为自己的用例。

Vertex 通过在一份主题授权下提供四个完整填充的演示店铺来解决这个问题。每个预设都是:

• 行业调优 — 颜色、文案、英雄区域构图和首页分区顺序都是为特定的买家旅程精选的
• 查找器感知 — 汽车配件配有 Make/Model/Year 适配查找器;印刷耗材配有打印机品牌/型号/颜色查找器;工业预设没有查找器(它依赖于分面集合导航)
• 图像完备 — 每个预设约 9 张英雄 / 生活方式 / 行业网格图像,全部为该垂直的美学生成。没有库存照片不匹配。
• 独立可主题化 — 每个预设都有自己的 CSS 覆盖文件(assets/demo-{preset}.css),用于翻转强调色、查找器强调色以及每个预设的字体选择

结果:您可以将 Vertex 作为工业 MRO 店铺、汽车配件目录、办公用品分销商或印刷店供应商发布,无需委托任何自定义设计。

---

4 个预设详解

预设 1 — Vertex(默认)

行业	工业用品、MRO、五金、紧固件、手工具、流体、研磨剂
强调色	琥珀色 #fbbf24
查找器	无 — 依赖于分面过滤器 + 预测搜索
首页英雄区	粗体排版 + 车间 / 仓库场景图像
B2B 钩子	"Volume pricing"、"NET-30 available"、"ISO 9001 certified"、"24-hr dispatch"
最适合	通用工业分销商、MRO 供应商、紧固件 / 五金商家、工具目录、JanSan 供应商

这是默认值。 当您从 Shopify Theme Store 安装 Vertex 时,加载的就是这个。琥珀色调子映射到温暖、工业的 McMaster-Carr / Grainger / Fastenal 视觉语言,采购买家能立即识别。

预设 2 — Throttle(汽车配件)

行业	汽车配件、性能、副厂、OEM 替换、摩托车、船用、动力运动
强调色	红橙色 #ec5f24
查找器	Make / Model / Year 适配级联(3 个下拉框)
首页英雄区	适配优先的文案("Find parts for your vehicle"),查找器位于产品集合之上
B2B 钩子	"Trade pricing"、"Warehouse dispatch"、"OEM cross-reference"、"Dealer accounts"
最适合	汽车配件分销商、性能商店、摩托车 / 船用 / RV 配件、ATV / UTV / 动力运动

Throttle 预设的标志性功能是适配查找器 — 一个三步级联下拉框(Make ▸ Model ▸ Year),渲染在首页英雄区、集合页面侧边栏以及作为可选的粘性栏。买家选择一次车辆;后续产品视图仅筛选适配匹配的零件。

红橙色调子映射到 performance / automotive / energy 视觉语言 — 一个主题中的 RockAuto + Summit Racing。

预设 3 — OfficeIT(办公、IT、电子)

行业	办公用品、IT 硬件、电子产品、复印纸、显示器、键盘、笔记本、批量耗材
强调色	蓝色(企业、IT 级)
查找器	Brand / Category / Capacity 级联(3 个下拉框)— 例如,"HP ▸ Toner ▸ 5000 pages"
首页英雄区	批量订单文案、B2B 账户钩子、NET-30 / 发票计费 CTA
B2B 钩子	"Bulk discounts"、"Net-30 for business"、"Free shipping over $X"、"Dedicated account manager"
最适合	办公用品分销商、IT 经销商、电子批发商、学校 / 政府供应、企业采购供应商

OfficeIT 主打批量 B2B 办公订单 — 买家旅程是 "我需要装备一个 50 桌的办公室" 而不是 "我需要一个鼠标"。英雄区文案和 CTA 突出显示批量订单、RFQ 和 NET-30;首页在标准精选集合之上以批量订单快速垫板为特色。

蓝色调子映射到买家期望从此类别看到的 corporate IT / Quill / Staples Business Advantage 视觉语言。

---

每个预设内部的内容

每个预设都附带自己的这些资源副本:

资源	每预设变体
首页模板	templates/index.json(默认 Vertex)+ templates/index.throttle.json、index.officeit.json、index.printsupply.json
集合模板	templates/collection.json + 当分区顺序不同的每预设变体(例如,Throttle 将查找器放在过滤器之上)
产品模板	templates/product.json + 每预设变体(例如,Inkline 添加 "compatible printers" 选项卡)
CSS 覆盖	assets/demo-{preset}.css — 覆盖 --color-accent、--color-on-accent、查找器强调、渐变停止点
英雄图像	每个预设约 3 个英雄变体,全部为该垂直的美学生成
场景图像	每个预设约 3 张场景照片(车间 / 经销商 / 办公室 / 印刷店)
行业网格图像	每个预设约 3 个行业卡片图像(例如,Vertex 的 HVAC + 制造 + 设施;Throttle 的汽车 + 摩托车 + 船)
演示文案	英雄标题、副标题、CTA 标签、推荐语 — 全部按预设调优

这意味着切换预设不是 "改变一个颜色然后祈祷" — 而是一次连贯的店铺替换。

---

如何切换预设

您有两种方式进行切换 — 永久和临时预览。

永久 — 通过自定义器

1. 打开 Shopify 后台并前往 Online Store ▸ Themes。
2. 在 Vertex 上点击 Customize。
3. 在左侧边栏中,点击 Theme settings ▸ Colors。
4. 滚动到 Starter color palette。
5. 选择其中之一:
   • Custom — 完全自定义调色板(使用您下方的手动颜色选择器)
   • Vertex — 琥珀色工业(默认)
   • Throttle — 红橙色汽车配件
   • OfficeIT — 企业蓝
   • Inkline — 印刷/复制蓝绿色
6. 右上角 Save。

强调色会立即翻转。要同时将首页切换到该预设的布局,请参阅下方的切换首页模板。

颜色预设与首页模板

Theme settings ▸ Colors 中的颜色预设仅翻转颜色。要获得完整的预设体验(首页布局、查找器、场景图像),您还需要应用匹配的首页模板后缀 — 请参阅下一节。

临时 — 通过 URL 预览

要在任何店铺前端 URL 上预览预设而不应用它:

预设	预览 URL 参数
Vertex	(默认 — 无参数)
Throttle	?view=throttle
OfficeIT	?view=officeit

例如:

https://your-store.myshopify.com/?view=throttle
https://your-store.myshopify.com/collections/all?view=officeit

这使用 Shopify 的原生模板后缀功能 — 店铺前端使用备用模板文件(index.throttle.json)渲染该单一页面视图。不保存任何内容;不带参数刷新会恢复到您的默认值。

使用此功能可以:

• 在小受众中 A/B 测试预设,然后再投入
• 向利益相关者发送演示 URL("看看我们店铺的汽车配件版本会是什么感觉")
• 在两个浏览器选项卡中并排比较英雄区构图

切换首页模板

要永久应用预设的首页布局:

1. 打开 Online Store ▸ Themes ▸ Customize ▸ Home。
2. 在顶部模板选择器中,选择 Add template 或选择预设的 index.{preset}.json 变体。
3. 保存。

或者,在页面设置中设置带有相关模板后缀的首页,或者如果您熟悉的话直接编辑 settings_data.json。

混合搭配

没有强制要求您必须将预设的首页与其强调色一起使用。您可以使用 Throttle 首页布局(因为您喜欢适配查找器优先的构图)+ Inkline 蓝绿色强调(因为它符合您的品牌)+ OfficeIT 批量订单垫板分区(因为您的买家从电子表格粘贴)。Vertex 是可组合的。

---

强调色覆盖的工作方式

每个预设在 assets/demo-{preset}.css 中提供一个小的 CSS 文件:

/* assets/demo-throttle.css */
:root {
  --color-accent: 236 95 36;       /* ec5f24 — Throttle red-orange */
  --color-on-accent: 255 255 255;
}
.finder-bar { --finder-accent: var(--color-accent); }

当 Starter color palette 设置为 Throttle 时,布局通过 {% if settings.starter_palette == 'throttle' %}{{ 'demo-throttle.css' | asset_url | stylesheet_tag }}{% endif %} 包含此文件。

强调 CSS 变量 --color-accent + --color-on-accent 流经每个组件 — 按钮、胶囊、徽章、链接、焦点环、下拉高亮、B2B 问候栏、查找器下拉、英雄区 CTA。翻转调色板会在一次渲染中翻转整个店铺前端的强调色。

这意味着您也可以通过以下方式编写您自己的预设:

1. 复制现有 demo-*.css 文件之一
2. 将其重命名为 demo-mybrand.css
3. 调整 --color-accent + --color-on-accent 值
4. 通过另一个 {% if %} 分支将其连接到 layout/theme.liquid 5.(可选)在 templates/index.mybrand.json 添加匹配的首页模板

高级用户可以在不到一小时内制作第 5 个预设。

---

选择您的预设 — 决策矩阵

使用此矩阵选择起点。请记住:您之后可以覆盖任何内容。

如果您销售...	从此开始	原因
紧固件、手工具、润滑剂、研磨剂、五金、通用 MRO	Vertex	通用工业基线,无需查找器(分面过滤器完成工作)
汽车 / 摩托车 / 船用 / RV / 动力运动配件	Throttle	适配查找器是此垂直的成败功能
办公、IT、电子、复印耗材、学校 / 政府供应	OfficeIT	批量 B2B 办公订单 + 企业 IT 视觉语言
打印机墨水、墨粉、大幅面纸、复制耗材	Inkline	打印机墨盒查找器消除此垂直中的第一买家错误
清洁 / 卫生(JanSan)	Vertex	Vertex 的 MRO 基线干净地映射到 JanSan;无需专门的查找器
带技术数据表的工业化学品 / 润滑剂	Vertex	技术规格表 + 文档块是 Vertex 预设的核心
建筑材料(木材、混凝土、干墙)	Vertex	Vertex 基线 + 批量订单页面工作良好;如果想要更冷的调色板,可考虑 OfficeIT 蓝
带自定义 logo 印刷的促销产品	Inkline	蓝绿色强调 + 印刷店视觉语言与此类别一致,即使查找器对墨水/墨粉更有用
仅批发(无 B2C)	Vertex 或 OfficeIT	任一都可以;选择符合您品牌的强调色。将店铺前端模式切换为 B2B-only。

---

自定义预设

预设是起点。安装后,您可以:

自定义	方法
强调色	Theme settings ▸ Colors ▸ Starter palette ▸ Custom,然后选择您自己的 --color-accent
Logo	Theme settings ▸ Logo — 将演示 logo 替换为您自己的 SVG 或 PNG
首页分区顺序	自定义器 ▸ Home — 拖动分区以重新排序,或从 30+ 分区调色板添加/删除分区
英雄图像	在自定义器中点击 Hero 分区,替换每张幻灯片的图像
场景 / 行业图像	在自定义器中按分区替换;每个分区都有图像选择器
查找器下拉标签 + 数据	(Throttle / OfficeIT / Inkline)— 有关 metafield 驱动的数据结构,请参阅查找器设置指南
字体	Theme settings ▸ Typography — 标题字体、正文字体、比例
文案 / CTA	在自定义器中为每个分区内联编辑文本
翻译	Theme settings ▸ Languages — 通过 locales/*.schema.json 覆盖提供自定义字符串

自定义后,您可以将您的工作保存为 Online Store ▸ Themes ▸ Theme library 中的命名主题 — 运行 A/B 测试或暂存视觉更改时很有用。

---

相关阅读

• 概述 — 为什么 Vertex 在一个主题中提供 4 个预设
• 安装 — 主题安装 + 设置期间的预设选择
• 主题设置参考 — Colors ▸ Starter palette 和每预设设置
• Markets & 多货币 — 每个预设在所有市场中工作相同
• 店铺前端模式指南 — Hybrid / B2B-only / B2C-only 如何与预设交互
• 客户账户面板 — 所有预设中相同(仅强调色翻转)
• RFQ 页面指南 — 所有预设中相同
• B2B 设置指南 — 相同的 B2B 配置适用于所有 4 个预设

---

总结

• Vertex 在一份主题授权中提供 4 个演示预设:Vertex(工业琥珀色)、Throttle(汽车配件红橙色)、OfficeIT(办公/IT 蓝色)、Inkline(印刷耗材蓝绿色)。
• 每个预设都有自己的首页模板、查找器、强调 CSS 和约 9 张场景图像。
• 在 Theme settings ▸ Colors ▸ Starter palette + 通过应用预设的首页模板后缀永久切换。
• 通过将 ?view=throttle | officeit | printsupply 附加到任何店铺前端 URL 临时切换以进行预览。
• 预设是起点 — 强调色、首页布局、查找器、图像和文案都是独立可覆盖的。
• 第 5 个自定义预设大约需要一小时,通过复制现有的 demo-*.css 文件并将其连接到 layout/theme.liquid 来编写。