> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Header 模块

> 了解如何更新 Upcart 抽屉中的页眉，包括徽标、标题样式、关闭按钮和布局。

<div id="overview">
  # 概述
</div>

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

<div id="header-module-settings">
  # **Header 模块设置**
</div>

<div id="general">
  ## **常规**
</div>

\*\*Height（高度）\*\*可在 \*\*Slim（纤细）\*\*和 \*\*Tall（高大）\*\*之间切换，以控制垂直空间。\*\*Bottom border（底部边框）\*\*为 \*\*None（无）\*\*或 **Thin（细）**。\*\*Background color（背景颜色）\*\*接受十六进制代码或内置颜色选择器，并支持透明度。

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/header-module-height-and-background.gif?s=982cf4fec081aa2c1b62901e53602b80" alt="Upcart Header 模块常规设置，购物车预览旁显示高度和背景颜色控件" width="2172" height="1080" data-path="images/upcart/header-module-height-and-background.gif" />

<div id="title">
  # **标题**
</div>

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

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/header-module-title-options.gif?s=18bfdb000570d453195ba19bd5f0288b" alt="Upcart Header 模块标题选项：继承主题标题、品牌徽标或自定义文本样式" width="1960" height="1080" data-path="images/upcart/header-module-title-options.gif" />

<div id="inherit-from-theme-titles">
  ## 继承主题标题
</div>

此选项使用主题的默认标题样式，帮助你保持设计与网站其他部分在视觉上的一致性。你可以使用 Text 字段添加自己的标题，并使用 `{{cart_quantity}}` 动态显示购物车商品数量。文本对齐可以设置为 Side（侧边）或 Center（居中），并且你可以根据商店的内容结构选择合适的标题级别 H2、H3 或 H4。

<div id="brand-logo">
  ## 品牌徽标
</div>

如果你希望用品牌徽标代替文本，可以直接在此部分上传商店的徽标。可选择将徽标对齐到侧边（Side）或居中（Center），并使用 **Logo size** 滑块进行缩放，范围为 14 px 到 48 px。上传的文件没有强制限制，但建议使用 PNG 文件以获得干净的透明效果和清晰的边缘。也支持 JPEG，但可能包含背景噪点或降低徽标细节。为保证性能，请尽量优化文件大小。

* 我们建议使用 **PNG** 文件，以获得最佳质量并支持透明背景。
* JPEG 也可以使用，但可能不够干净，尤其是当徽标带有背景或精细细节时。

<div id="define-text-styles">
  ## 自定义文本样式
</div>

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

<div id="close-button">
  # 关闭按钮
</div>

关闭按钮可自定义以匹配商店的设计。\*\*Location（位置）\*\*将其放置在抽屉的左侧或右侧。**Background（背景）**、\*\*Icon（图标）\*\*和 \*\*Border（边框）\*\*各自都可以设置颜色以及单独的悬停颜色。\*\*Icon size（图标大小）\*\*为 Small、Medium 或 Large，\*\*Icon thickness（图标粗细）\*\*为 Normal 或 Thick。\*\*Border（边框）\*\*为 None、Thin、Normal 或 Thick。

<Note>
  当 **Border** 设置为 **None** 时，边框颜色和边框悬停颜色字段将被禁用。请先选择边框宽度，然后再设置其颜色。
</Note>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/header-module-close-button-settings.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=c8f941c774ff6f7029b0833c09ca000d" alt="Upcart Header 模块关闭按钮的位置、颜色、图标大小和边框设置" width="1170" height="1166" data-path="images/upcart/header-module-close-button-settings.png" />

<div id="custom-template">
  # 自定义模板
</div>

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

<div id="tips">
  # 提示
</div>

* **需要精确的间距或尺寸？** 使用[自定义 CSS](/zh/upcart/custom_css) 实现滑块之外的完全控制，非常适合精确的边距、内边距或徽标缩放。
* **在桌面端和移动端都进行测试。** 文本、徽标和按钮等页眉元素在不同屏幕尺寸上的显示可能有所不同
* **使用正确的标题级别。** 选择合适的标题（H2、H3、H4）有助于无障碍访问和 SEO。请与商店内容的结构保持一致。

要了解更多个性化购物车的方式，请浏览我们的 [Upcart 帮助文档](/zh)。如果你需要自定义更改，我们建议联系 [Shopify 专家](https://www.shopify.com/ca/partners/directory)。