Skip to main content

​
概述

Header 模块可让你使用品牌徽标、标题文本、布局、背景颜色和关闭按钮自定义 Upcart 抽屉的顶部区域。可视化控件让你无需定义精确的像素尺寸即可轻松设置页眉样式。

​
Header 模块设置

​
常规

**Height（高度）**可在 **Slim（纤细）**和 **Tall（高大）**之间切换，以控制垂直空间。**Bottom border（底部边框）**为 **None（无）**或 Thin（细）。**Background color（背景颜色）**接受十六进制代码或内置颜色选择器，并支持透明度。 Upcart Header 模块常规设置，购物车预览旁显示高度和背景颜色控件

​
标题

定义购物车抽屉页眉标题有三种方式：继承主题的默认标题样式、显示商店徽标，或创建完全自定义的文本样式。每种方式都能根据你的设计需求提供灵活性。 Upcart Header 模块标题选项：继承主题标题、品牌徽标或自定义文本样式

​
继承主题标题

此选项使用主题的默认标题样式，帮助你保持设计与网站其他部分在视觉上的一致性。你可以使用 Text 字段添加自己的标题，并使用 {{cart_quantity}} 动态显示购物车商品数量。文本对齐可以设置为 Side（侧边）或 Center（居中），并且你可以根据商店的内容结构选择合适的标题级别 H2、H3 或 H4。 如果你希望用品牌徽标代替文本，可以直接在此部分上传商店的徽标。可选择将徽标对齐到侧边（Side）或居中（Center），并使用 Logo size 滑块进行缩放，范围为 14 px 到 48 px。上传的文件没有强制限制，但建议使用 PNG 文件以获得干净的透明效果和清晰的边缘。也支持 JPEG，但可能包含背景噪点或降低徽标细节。为保证性能，请尽量优化文件大小。
  • 我们建议使用 PNG 文件，以获得最佳质量并支持透明背景。
  • JPEG 也可以使用，但可能不够干净，尤其是当徽标带有背景或精细细节时。

​
自定义文本样式

选择 Text 选项可让你完全独立于商店主题来设置标题样式。你可以输入任意自定义标题，并加入 {{cart_quantity}} 实现动态更新。文本对齐可以设置为 Side 或 Center，并可将字重更改为 Normal、Semibold 或 Bold。字体大小可通过可视化滑块在 14px 到 48px 之间调整，还可以选择性地应用文本颜色覆盖。

​
关闭按钮

关闭按钮可自定义以匹配商店的设计。**Location（位置）**将其放置在抽屉的左侧或右侧。Background（背景）、**Icon（图标）**和 **Border（边框）**各自都可以设置颜色以及单独的悬停颜色。**Icon size（图标大小）**为 Small、Medium 或 Large，**Icon thickness（图标粗细）**为 Normal 或 Thick。**Border（边框）**为 None、Thin、Normal 或 Thick。
当 Border 设置为 None 时，边框颜色和边框悬停颜色字段将被禁用。请先选择边框宽度，然后再设置其颜色。
Upcart Header 模块关闭按钮的位置、颜色、图标大小和边框设置

​
自定义模板

在 Header 模块的 2.0 版本中，设置下方会出现一个 Custom template 代码编辑器，其中一个 Full 模板覆盖整个模块。它使用基于 React 的 JSX，你必须先在购物车编辑器的 Settings > Cart settings > Advanced Settings 中勾选 Access custom templates。请参阅设置自定义模板。

​
提示

  • 需要精确的间距或尺寸？ 使用自定义 CSS 实现滑块之外的完全控制，非常适合精确的边距、内边距或徽标缩放。
  • 在桌面端和移动端都进行测试。 文本、徽标和按钮等页眉元素在不同屏幕尺寸上的显示可能有所不同
  • 使用正确的标题级别。 选择合适的标题（H2、H3、H4）有助于无障碍访问和 SEO。请与商店内容的结构保持一致。
要了解更多个性化购物车的方式，请浏览我们的 Upcart 帮助文档。如果你需要自定义更改，我们建议联系 Shopify 专家。