Vertex 主题设置参考
Shopify 主题编辑器中 Theme Settings 下的每个选项详解。访问方式:打开主题编辑器并点击左下角标记为 Theme settings 的齿轮图标。
Vertex 的设置归为 7 个面板:
排版
| 设置 | 作用 | 默认值 |
|---|---|---|
| 标题字体 | 每个页面上 <h1>–<h6> 使用的字体,加上营销区块标题。 | Poppins Bold |
| 正文字体 | 正文内容、导航、按钮、表单字段和价格使用的字体。 | Poppins Regular |
最佳实践
Vertex 预加载两种字体,确保在首次绘制前就绪。两者使用同一字体(不同字重)可获得最快的 LCP。
配色
起步配色
单一下拉菜单,一键重新着色整个店铺前台 。
| 选项 | 行业 | 强调色 |
|---|---|---|
| Custom | 任何 | 使用下方的单独色彩选择器 |
| Vertex amber | 工业 / MRO 用品(默认) | #fbbf24 |
| Throttle red | 汽车配件 | #ec5f24 |
| OfficeIT blue | 办公与 IT 用品 | #3b82f6 |
| Inkline teal | 印刷与复印耗材 | #0d9488 |
自定义配色(仅当起步配色 = Custom 时使用)
| 设置 | 用途 | 默认值(Vertex amber) |
|---|---|---|
| Background | 正文背景、抽屉背景 | #ffffff |
| Surface | 卡片背景、设置面板背景 | #f5f5f4 |
| Surface alternate | 微妙的次级表面 | #fafaf9 |
| Text | 主要文字颜色 | #0c0a09 |
| Muted text | 标签、说明文字、字幕 | #57534e |
| Borders | 卡片边框、分隔线 | #e7e5e4 |
| Accent | 主要品牌色(CTA、徽章) | #d97706 |
| Accent dark | 琥珀色 CTA 的悬停/激活状态 | #b45309 |
| Accent soft | 琥珀色调背景的柔和色调 | #fef3c7 |
| Text on accent | 置于强调色填充按钮和徽章上的文字与图标颜色。需与 Accent dark 保持高对比度(默认白色)。 | #ffffff |
| Success | 成功徽章(有货、NET-30 已批准) | #15803d |
布局
| 设置 | 选项 | 默认值 |
|---|---|---|
| 页面宽度 | Narrow (75rem) / Standard (90rem) / Wide (110rem) | Narrow |
| 页面侧边距 | 16–60 px(滑块) | 28 px |
页头行为
| 设置 | 作用 | 默认值 |
|---|---|---|
| 滚动时粘性页头 | 将主页头固定在视口中。 | 开启 |
购物车行为
| 设置 | 作用 | 默认值 |
|---|---|---|
| 购物车布局 | 滑出式抽屉(推荐 B2B 快速加购)或独立购物车页面。 | 抽屉 |
实用功能
| 设置 | 作用 | 默认值 |
|---|---|---|
| 显示'回到顶部'按钮 | 滚动一屏后出现的浮动按钮。 | 开启 |
| 在产品页面显示'最近浏览' | 在 localStorage 中追踪每位买家最多 12 件产品。 | 开启 |
B2B
Storefront mode
| 选项 | 作用 | 最适合 |
|---|---|---|
| Hybrid (auto) (默认) | 自动检测:为访客提供 B2C 友好的默认值,为已登录的 B2B 买家提供 B2B 元素。 | 大多数商家 — 同时接受两种受众。 |
| B2B-only | 隐藏 B2C 友好的默认值。 | 仅批发的商家。 |
| B2C-only | 即使对已登录的 B2B 买家也压制每一个 B2B UI 元素。 | 当同一主题运行在姊妹 B2C 店铺时。 |
→ 深度内容:Storefront mode 指南
价格可见性
| 设置 | 作用 | 默认值 |
|---|---|---|
| 客户登录前隐藏 价格 | 对访客将价格替换为*"登录查看价格"*。 | 关闭 |
产品页面区块
| 设置 | 作用 | 背后的 metafield |
|---|---|---|
| 在 PDP 上显示价格历史 | 当产品拥有 vertex.price_history 时,渲染"价格历史"折叠面板。 | vertex.price_history |
| 在 PDP 上显示 'Ships from' | 读取 vertex.ships_from,回退到下方的默认值。 | vertex.ships_from |
| 默认 'Ships from' 位置 | 当产品没有 vertex.ships_from 时使用。留空则跳过。 | — |
| 在 PDP 上显示'文档与下载' | 包裹规格书 / MSDS / 宣传册 / 安装指南链接。当未附加任何文档时,在该产品上自动隐藏。 | vertex.datasheet 等 |
| 显示变体色板 | 在产品页面上将颜色/图片选项值转换为可点击的色板小标签。关闭时,所有选项均渲染为普通下拉菜单。 | — |
色板来源
在 Shopify 后台为某个选项值指定颜色或图片,Vertex 便会自动将其显示为可点击的小标签 —— 无需任何主题设置。下方仍保留一个无障碍下拉菜单,供键盘和屏幕阅读器用户使用。
本地化
| 设置 | 选项 | 默认值 |
|---|---|---|
| 文字方向 | Auto(由 locale 驱动) / 从左到右 / 从右到左 | Auto |
自动 RTL
Vertex 会自动为阿拉伯语、希伯来语、波斯语、乌尔都语、意第绪语、库尔德语、迪维希语和普什图语翻转 <html dir>。仅在需要强制时设置为从左到右 / 从右到左。
SEO 与分享
品牌资产
| 设置 | 推荐尺寸 |
|---|---|
| Favicon | 32×32 PNG。留空则使用内置 Vertex 品牌标识。 |
社交卡片
| 设置 | 推荐尺寸 |
|---|---|
| 默认分享图片(OG / Twitter) | 1200 × 630 px。 |
| Twitter / X 账号 | 不含 @。 |
社交主页 URL(Organization JSON-LD sameAs)
- LinkedIn URL、Twitter / X URL、Facebook URL、Instagram URL、YouTube URL
Google Merchant / Shopping
| 设置 | 备注 |
|---|---|
| 默认发货国家(ISO 代 码) | 两个字母(US、GB、DE 等) |
| 默认运费(数字) | 使用 0 表示免邮 |
| 处理时间 — 最小 / 最大(天) | 0–14 天 |
| 运输时间 — 最小 / 最大(天) | 0–30 天 |
| 退货窗口(天) | 0–180 天 |
| 退货方式 | 邮寄 / 店内 / 保留商品 |
| 退货运费 | 免费退货 / 由客户承担 |
企业信息
这些值会注入全站的 Organization JSON-LD(Knowledge Panel 数据)。
| 设置 | 格式 | 示例 |
|---|---|---|
| 电话(推荐 E.164) | 带国家代码的国际格式 | +1-216-555-0182 |
| 电话时段 | 自由文本 | Mon-Fri 7am-6pm CST |
| 街道地址 | — | 1500 W Industrial Pkwy |
| 城市 / 地区 | — | Cleveland |
| 州 / 地区代码 | 2 字母地区代码 | OH |
| 邮政编码 | — | 44113 |
| 国家(ISO 代码) | 2 字母国家代码 | US |
| 创立年份 | 4 位年份 | 2014 |
5 分钟最大化 SEO 收益
填写这些字段会在每个页面上填充 Organization + LocalBusiness JSON-LD — Google 用以构建 Knowledge Panel 和 Maps 列表的数据。
每项设置应用的范围
| 面板 | 影响 |
|---|---|
| 排版 | 每个页面 — 正文 + 标题 |
| 配色 | 每个页面 — 背景、文字、强调色 |
| 布局 | 每个页面 — 最大宽度、内边距、粘性页头 |
| B2B | B2B 元素(琥珀栏、RFQ、批量订购)+ 价格可见性 |
| 本地化 | 每个页面上的 <html dir> 属性 |
| SEO 与分享 | 每个页面上的 <meta> 标签 + JSON-LD |
| 企业信息 | 每个页面上的 Organization + LocalBusiness JSON-LD |
后续步骤
- 区块 设置指南 → — 配置每个区块
- Storefront mode 指南 → — Hybrid / B2B-only / B2C-only 深度内容
- Metafield 设置指南 → — B2B PDP 增强背后的 metafield