跳到主要内容

页头、页脚与站点元素

站点元素是包裹你店铺前台的一切 — 公告栏、页头(logo、导航、搜索、账户、购物车)、为已登录公司买家自动出现的 B2B 问候栏,以及页脚。在 Vertex 中,这些元素中的每一处都开箱即 B2B 感知:当公司买家登录时,切换器、徽章和代表胶囊会自动出现;当未登录时,会优雅降级为精致的 B2C 布局。

Vertex desktop header — logo, nav, search, account, cart

两种页头布局,自动应用

你不必在"B2B 页头"和"B2C 页头"之间做选择。Vertex 渲染一个页头 — 并在公司买家登录的瞬间,叠加琥珀色 B2B 问候栏到其上方。访客获得干净的白色页头;已登录买家获得同样的页头加上他们的公司徽章、NET 条件胶囊、免税指示器和收货地址切换器。

公告栏​

区块文件: sections/announcement-bar.liquid

主页头之上的 APEX 风格顶部栏 — 左侧文字、可选左侧图标(卡车 / 闪电 / 锁)、电话号码、社交图标,以及右侧可关闭的 ×。开箱即两种配色方案:深色与琥珀色。

设置​

设置类型备注
Text富文本简短的价值信息 — "满 $500 免邮","NET-30 适用于合格买家"。支持内联链接。
Left icon选择truck · lightning · lock · none。将一个 SVG 字符与文字配对。
Phone number文本右对齐的电话胶囊。移动端可点击拨号(tel: 链接)。
Instagram URLURL品牌社交图标。仅在填写时渲染。
LinkedIn URLURLLinkedIn 图标。
X (Twitter) URLURLX 图标。
YouTube URLURLYouTube 图标。
Color scheme选择dark(默认)或 amber。

链接块​

添加 Link 块,在公告栏中加入小文字链接 — 特别优惠、成为经销商、资源。每个块接受 label 和 url。

可关闭​

右侧的 × 按钮对当前访客关闭公告栏。状态通过 assets/announcement-dismiss.js 持久化到 localStorage,因此该栏保持隐藏,直到访客清除其站点数据。

何时使用琥珀色方案

琥珀色方案匹配 B2B 问候栏的强调色。当你的公告是 B2B 价值主张时使用它(NET-30 条件、经销商注册、RFQ)。一般营销使用深色方案。

主页头​

区块文件: sections/header.liquid

主导航表面 — logo、品牌文字、主菜单、可选次级菜单、预测搜索、语言和货币切换器、账户和购物车。

设置​

设置类型备注
Logo图片推荐:SVG 或 2x PNG。受 Logo max height 数字设置约束。
Brand text override文本无 logo 时使用的可选文字(例如 "Vertex Supply")。以标题字体渲染。
Primary menu链接列表主导航。每个父菜单项都有一个由其子项驱动的下拉。
Submenu style选择auto · mega · dropdown。Auto 在父项有 8 个以上子项或检测到网格布局时选择 mega;否则渲染扁平下拉。
Secondary menu链接列表右对齐的实用导航(特别优惠 · 指南 · 服务 · FAQ)。如果你不选择,会按 secondary-menu 链接列表 handle 自动检测。
Search placeholder文本可翻译。默认为 "按产品、SKU 或零件号搜索"。
Show locale switcher复选框默认开启。隐藏/显示桌面端页头和移动端抽屉中的语言胶囊。
Show currency switcher复选框默认开启。隐藏/显示货币胶囊。即便单一市场的 B2B 买家也会看到此项作为信息,让他们始终知道付款所用的货币。
Sticky on scroll复选框滚动时将页头固定到视口。

菜单右侧渲染的内容​

从左到右依次:预测搜索输入、语言胶囊、货币胶囊、销售代表胶囊(为 B2B 自动显示)、账户、购物车计数器。

销售代表胶囊从公司的 vertex.rep_name、vertex.rep_email、vertex.rep_phone metafield 拉取。填充详情请参阅 B2B 设置指南。

大型菜单 vs. 简单下拉​

子菜单样式按父菜单项由 menu_style 设置决定。两种格式:

  • 大型菜单 — 多列网格面板,带可选图标和专属品牌网格。用于按类别选购、按品牌选购、行业 — 拥有 8 个以上子项或视觉子类别的父项。
  • 简单下拉 — 扁平列表。用于关于、资源、账户 — 有少量页面的父项。

设置为 auto 时,如果父项有 ≥ 8 个子项,Vertex 选择 mega;否则选择简单下拉。

B2B 问候栏​

区块文件: sections/b2b-greeting-bar.liquid

位于主页头之上、面向已登录公司买家的琥珀色横幅。无商家设置 — 基于客户状态自动渲染。

何时出现​

三者必须全部为真:

  1. customer.b2b? — 该客户是 B2B(公司)买家,而非 B2C 账户
  2. customer.current_company — 他们至少关联到一家公司
  3. settings.storefront_mode != 'b2c' — 主题未被固定到 B2C-only 模式

任何一项失败(访客、B2C-only 模式、未关联公司),问候栏完全不渲染。

它显示什么​

  • 公司名称 — "以 {company.name} 身份登录"
  • NET 条件徽章 — 从公司的付款条件 metafield 得到 NET-30 / NET-60 / NET-90
  • 免税徽章 — 来自 Shopify 原生公司税务状态
  • 语言胶囊 — REP 样式头像 + ISO 代码 + 雪佛龙
  • 货币胶囊 — REP 样式头像 + ISO 代码 + 雪佛龙
  • 收货地址切换器 — 当买家只有一个地址时为静态标签;有多个时为完整下拉
响应式行为

在 ≤ 1169px 的屏幕上,问候栏折叠,其内容移入汉堡抽屉的账户区。琥珀色横幅仅在 ≥ 1170px(桌面)上出现,以免在移动端与搜索栏争夺垂直空间。

→ 完整功能面参见 B2B-only 区块。

页脚​

区块文件: sections/footer.liquid

站点页脚 — 菜单、社交、邮箱、支付图标、邮件订阅、法律链接。

设置​

设置类型备注
Footer menu链接列表多列页脚导航。每个父项渲染为列标题。
Instagram URLURL仅在填写时渲染。
Facebook URLURL仅在填写时渲染。
LinkedIn URLURL仅在填写时渲染。
X (Twitter) URLURL仅在填写时渲染。
YouTube URLURL仅在填写时渲染。
Email文本默认为空。填写后,作为 mailto: 链接渲染在联系列。
Show payment icons复选框默认开启。使用 shop.enabled_payment_types,因此你无需自行维护列表。
Newsletter heading文本例如 "加入贸易名单"。
Newsletter intro富文本简短的安心文案 — "每月推送,绝不打扰"。
Legal menu链接列表隐私 · 条款 · 退款 · Cookies。如果你留空菜单,会自动回退到你的 /policies/* URL。

邮件订阅表单​

邮件订阅块使用 Shopify 原生的 customer-newsletter 表单,因此订阅者会被写入 Shopify 客户列表(带 newsletter accepts-marketing 标志)。无需第三方集成。

支付图标反映已启用的支付方式

你无需手动选择支付图标 — Vertex 读取 shop.enabled_payment_types,仅渲染你在 Shopify 支付设置中启用的图标。在 Settings → Payments 中启用 Apple Pay → 它出现在页脚。禁用它 → 它消失。

预测搜索​

区块文件: sections/predictive-search.liquid(由 header.liquid 渲染)

在买家输入时从搜索输入框下拉。展示四个面板:

  1. 产品 — 图片缩略图、标题、供应商、价格。通过 vertex.mpn metafield 识别制造商零件号(因此搜索 1N4148 会按零件号找到该二极管)。
  2. 集合 — 标题 + 图片。
  3. 页面 — 标题 + URL。
  4. 建议查询 — Shopify 的原生搜索建议。

MPN 识别​

如果你在产品上填充 vertex.mpn metafield(单行文本),预测搜索除了匹配标准产品标题 / SKU / 供应商外,还会匹配该字段的查询。对于买家按零件号而非产品名称搜索的技术目录至关重要。

→ 填充详情请参阅 Metafield 设置指南。

响应式行为​

页头在 1170px 处有一个硬断点 — 选择此点是为了让 iPad Pro 竖屏(1024px)保持在汉堡流中,而大多数笔记本电脑落在桌面布局中。

视口布局
< 1170px汉堡菜单 → 抽屉。抽屉包含:主菜单、次级菜单、收货地址切换器、语言 + 货币胶囊(2 列网格)、销售代表卡片(底部全宽)、语言 + 登录。
≥ 1170px完整桌面导航。大型菜单 / 下拉面板、预测搜索输入、REP 胶囊、销售代表胶囊、账户、购物车。

自定义下拉面板(无原生 <select>)​

Vertex 任何位置都使用零个原生 <select> 元素。语言、货币和收货地址切换器都使用共享的 <details> + <summary> + 自定义面板系统,具备:

  • 悬停状态
  • 当前选中高亮 + 对勾图标
  • 淡入动画
  • 互斥(打开一个会关闭其他)
  • 外部点击关闭
  • Esc 关闭
  • 完整的键盘导航(方向键 + Enter)

实现位于 assets/global.js(查找 closeAllDetails() 辅助函数)。重新样式化这些下拉只需覆盖 details[data-vertex-dropdown] 选择器 — 无需 JS。

后续步骤​