自定义模板设置

您可以在模板编辑器的侧边栏菜单中的模板设置部分自定义在线商店的整体设置，例如排版、颜色、社交媒体链接和购物车页面。您在模板设置部分中所做的更改将应用于您的整个在线商店。

分区和区块还具有可供调整的单独设置，用于自定义模板的各个分区。详细了解分区和区块。

在此页面上

logo

您可以将您业务的 logo 添加到您的在线商店。您的 logo 将显示在以下位置：

您所有页面上的标头
您的密码页面

自定义您的 logo

Logo 图片的最大宽度为 300 像素。

步骤：

台式电脑

在 Shopify 后台中，转至在线商店 > 模板。
找到要编辑的模板，然后点击编辑模板。
点击模板设置 图标。
点击 Logo。
在 Logo 区域，添加您的图片或使用免费图片：
- 若要添加您的图片，请点击 选择图片，然后添加新图片或现有图片：
  - 若要使用已上传到 Shopify 后台的图片，请选择该图片，然后点击完成。
  - 若要使用本地计算机中的图片，请点击添加图片。选择并添加图片，然后点击完成。
- 若要使用免费图片，请点击浏览免费图片。查找图片，点击图片以将其选中，然后点击选择。
可选：将替代文本添加到您的 logo 图片：
1. 在 Logo 区域，点击编辑。
2. 在替代文本字段中，输入图片的简要描述。
3. 点击保存。
可选：在桌面 logo 宽度区域，使用范围滑块调整 logo 的像素宽度。
点击保存。

移动设备

在 Shopify 应用中，轻触图标。
在销售渠道部分，轻触在线商店。
轻触管理所有模板。
找到要编辑的模板，然后轻触编辑模板。
轻触 … 或 ⋮，然后轻触模板设置。
轻触 Logo。
在 Logo 区域，添加您的图片或使用免费图片：
- 若要添加您的图片，请轻触 选择图片，然后添加新图片或现有图片：
  - 若要使用已上传到 Shopify 后台的图片，请选择该图片，然后轻触完成。
  - 若要使用本地设备中的图片，请轻触添加图片。从本地设备中选择并添加图片，轻触图片以将其选中，然后轻触完成。
- 若要使用免费图片，请轻触浏览免费图片。查找图片，轻触图片以将其选中，然后轻触完成。
可选：将替代文本添加到您的 logo 图片：
1. 在 Logo 区域，轻触编辑。
2. 在替代文本字段中，输入图片的简要描述。
3. 轻触保存或 ✓。
可选：在桌面 logo 宽度区域，使用范围滑块调整 logo 的像素宽度。
轻触保存或 ✓。

添加网站图标

您可以添加收藏夹图标（或网站图标），用于帮助您进行在线商店的品牌营销。网站图标会显示在以下位置：

您的 Web 浏览器标签
您的 Web 浏览器的历史记录
您桌面上的图标
您的网站被添加为书签时显示在您的在线商店名称旁边

详细了解网站图标。

步骤：

台式电脑

在 Shopify 后台中，转至在线商店 > 模板。
找到您要为其添加网站图标的模板，然后点击编辑模板。
点击模板设置 图标。
根据您的模板版本，点击 Logo 或 Favicon。
在网站图标图片部分，点击选择图片，然后添加新图片或现有图片：
- 若要选择已上传到 Shopify 后台的图片，您可以搜索或找到该图片，然后使用复选框将其选中。
- 若要从本地计算机中选择图片，请点击添加图片，从本地计算机中打开图片，然后使用复选框将其选中。
点击完成。
可选：为您的网站图标图片添加替代文本：
1. 在网站图标图片部分，点击编辑。
2. 在替代文本字段中，输入图片的简要描述。
3. 点击保存。
点击保存。

移动设备

在 Shopify 应用中，轻触图标。
在销售渠道部分，轻触在线商店。
轻触管理所有模板。
找到您要为其添加网站图标的模板，然后轻触编辑模板。
轻触 … 或 ⋮，然后轻触模板设置。
根据您的模板版本，轻触 Logo 或 Favicon。
在网站图标图片部分，轻触选择图片，然后添加新图片或现有图片：
- 若要选择已上传到 Shopify 后台的图片，您可以搜索或找到该图片，然后使用复选框将其选中。
- 若要从本地设备中选择图片，请轻触添加图片，从本地设备中打开图片，然后使用复选框将其选中。
轻触完成。
为您的网站图标图片添加替代文本：
1. 在网站图标图片部分，轻触编辑。
2. 在替代文本字段中，输入图片的简要描述。
3. 轻触保存或 ✓。
轻触保存或 ✓。

颜色

您可以在模板设置中定义不同的配色方案，并使用配色方案选择器将这些配色方案应用到在线商店中的不同分区。配色方案是一组颜色。您的模板应用了一组默认配色方案，您可以随时在模板编辑器中更改这些方案。您可以添加品牌颜色，以确保您的调色板在整个在线商店中得到统一应用。

为确保您的在线商店设计在整个网站中保持一致，模板不提供单独的颜色设置。模板被视为主页面或商店的主要内容。在整个商店中使用不同的配色方案可能会导致糟糕的用户体验，并可能导致客户在未购买产品的情况下离开您的商店。

您最多可以创建和自定义 21 种独特的配色方案，并将其应用于整个在线商店的不同分区。

配色方案

配色方案是一项模板设置，能以直观的方式将元素及其各自的颜色组合在一起。您可以在一个统一的配色方案中为各种元素分配不同的颜色，该配色方案可在模板中提供配色方案选择器的任何位置应用。您最多可以拥有 21 种配色方案。您还可以在方案的预览中预览颜色的显示效果。

可在模板编辑器中为配色方案应用的各种设置列表。
设置	描述
背景	颜色应用于某些分区的背景和轮廓按钮的背景。
背景渐变	颜色渐变应用于某些分区的背景。在可能的情况下，背景渐变会替换背景。
文本	颜色应用于分区或区块的文本。
实心按钮背景	颜色应用于主按钮的背景。
实心按钮标签	颜色应用于主按钮的文本。
轮廓按钮	颜色应用于次要按钮的文本和边框。
阴影	颜色应用于阴影。

管理配色方案

您商店的配色方案和颜色选项在模板设置中进行设定。对于纯色，请使用颜色选择器来选择新颜色，或在文本字段中输入颜色值。颜色字段接受以下颜色名称和值：

颜色名称，例如 red、black 或 blue。
RGB 颜色代码。
十六进制颜色值。

步骤：

在 Shopify 后台中，转至在线商店 > 模板。
在要自定义的模板旁边，点击编辑模板。
点击图标，然后点击颜色。
在方案部分，点击现有方案或点击添加方案以添加新的配色方案。
点击您要更改的内容类型的颜色样本。
若要设置颜色，请输入十六进制颜色代码或从颜色选择器中选择颜色。若要将颜色设置为透明，请从文本字段中删除十六进制代码。
点击保存。

应用配色方案

在模板设置中定义配色方案后，您便可在模板的分区和区块中使用配色方案选择器来分配配色方案。配色方案选择器仅在某些分区、区块和常规模板设置中可用。

渐变

您可以在某些模板中设置颜色渐变，以提供视觉上有趣的背景选项。color_background 设置用于自定义 CSS 背景属性。

渐变选择器可让您选择渐变的颜色、样式、角度、位置和不透明度。在渐变选择器中选择的选项会在模板编辑器中实时预览。您还可以使用 CSS 代码创建渐变背景，其中包括验证检查器。

设置渐变

在 Shopify 后台中，转至在线商店 > 模板。
在要自定义的模板旁边，点击编辑模板。
点击图标，然后点击颜色。
在方案部分，点击要编辑的现有方案。
点击渐变颜色样本选项，例如背景渐变。
如果您之前未设置过渐变，则会显示一些预设选项供您选择。选择任一预设渐变即可打开选项面板。
选择您的渐变选项：

在线性或放射状渐变之间进行选择。使用按钮选择您偏好的渐变样式。
使用向上和向下箭头设置渐变的角度。点击向上或向下箭头可将角度百分比增加或减少 5。
使用滑块选择渐变的位置，或在字段中输入一个数值。
输入特定的颜色十六进制代码，或使用颜色滑块选择色调。最近选择的颜色会显示在渐变选项面板的底部。
若要使渐变不透明，请使用右侧的滑块选择渐变的透明度。您也可以在十六进制颜色代码旁边的字段中输入一个百分比。

点击保存。

使用 CSS 设置渐变

大多数 CSS background 属性值都可用于设置背景颜色。您可以在此字段中使用纯色（例如，#000000、black、rgb(0,0,0,0)、rgba(0,0,0,0)、hsl(0, 0%, 0%) 和 hsla(0, 0%, 0%, 1) 都会生成纯黑色背景），或渐变（例如，linear-gradient(red, green)、radial-gradient(red, green) 或 conic-gradient(red, green)）。渐变也可以重复。

步骤：

在 Shopify 后台中，转至在线商店 > 模板。
在要自定义的模板旁边，点击编辑模板。
点击图标，然后点击颜色。
在方案部分，点击要编辑的现有方案。
点击要编辑的渐变。
点击 Gradient 旁边的箭头，然后选择 CSS。
在 CSS code 字段中，键入或粘贴您的渐变代码。模板编辑器预览将在相应位置显示您的渐变。
点击保存。

删除渐变

在 Shopify 后台中，转至在线商店 > 模板。
在要自定义的模板旁边，点击编辑模板。
点击图标，然后点击颜色。
在方案部分，点击要编辑的现有方案。
点击要删除的渐变。
点击删除渐变。
点击保存。

排版

您可以为在线商店中的文本设置字体样式和大小。您可以选择系统字体或添加自定义字体。模板中可用的字体取决于您的模板开发者。所有免费的 Shopify 模板都使用 Shopify 字体库中的字体。

请考虑在您的商店中使用系统字体，因为系统字体已安装在用户的计算机上。使用系统字体可避免将新字体下载到客户的计算机，而下载新字体可能会对您商店的加载速度产生负面影响。客户计算机上显示的字体取决于其操作系统。

自定义字体类型

请参阅 Shopify 字体库，查看可用字体列表。

步骤：

台式电脑

在 Shopify 后台中，转至在线商店 > 模板。
找到要编辑的模板，然后点击编辑模板。
点击模板设置 图标。
点击排版。
若要更改商店标题或正文文本的字体类型，请在标题或正文分区中点击更改。
点击要使用的字体的名称，然后点击选择。
点击保存。

移动设备

在 Shopify 应用中，轻触图标。
在销售渠道部分，轻触在线商店。
轻触管理所有模板。
找到要编辑的模板，然后轻触编辑模板。
轻触 … 或 ⋮，然后轻触模板设置。
轻触排版。
若要更改商店标题或正文文本的字体类型，请在标题或正文分区中轻触更改。
轻触要使用的字体的名称，然后轻触完成。
轻触保存或 ✓。

自定义字号

您可以使用“排版”模板设置为标题和正文文本设置默认字号。

最小字号为 100%，最大字号为 150%。缩放比例每增加一档，字号就会增加 5%。默认设置为 100%。

步骤：

台式电脑

在 Shopify 后台中，转至在线商店 > 模板。
找到要编辑的模板，然后点击编辑模板。
点击模板设置 图标。
点击排版。
若要更改标题文本的默认字号，请使用字号缩放比例范围滑块选择默认字号。
若要更改正文文本的默认字号，请使用字号缩放比例范围滑块选择默认字号。
点击保存。

移动设备

在 Shopify 应用中，轻触图标。
在销售渠道部分，轻触在线商店。
轻触管理所有模板。
找到要编辑的模板，然后轻触编辑模板。
轻触 … 或 ⋮，然后轻触模板设置。
轻触排版。
若要更改标题文本的默认字号，请使用字号缩放比例范围滑块选择默认字号。
若要更改正文文本的默认字号，请使用字号缩放比例范围滑块选择默认字号。
轻触保存或 ✓。

布局

您可以设置在线商店显示的最大宽度，并设置分区之间的垂直和水平间距。

步骤：

台式电脑

在 Shopify 后台中，转至在线商店 > 模板。
找到要编辑的模板，然后点击编辑模板。
点击模板设置 图标。
点击布局。
使用页面宽度范围滑块选择介于 1000 像素和 1600 像素之间的页面宽度。默认设置为 1600 像素。
可选：使用范围滑块在您的页面上添加垂直模板分区之间的间距。您最多可以在分区之间添加 100 像素的间距。
可选：如果您的布局为网格，则使用水平间距和垂直间距范围滑块在页面上的网格内容之间添加间距。添加水平间距将为页面上的内容行添加最多 40 像素的间距，而添加垂直间距将为页面上的内容列添加最多 40 像素的间距。
点击保存。

移动设备

在 Shopify 应用中，轻触图标。
在销售渠道部分，轻触在线商店。
轻触管理所有模板。
找到要编辑的模板，然后轻触编辑模板。
轻触 … 或 ⋮，然后轻触模板设置。
轻触布局。
使用页面宽度范围滑块选择介于 1000 像素和 1600 像素之间的页面宽度。默认设置为 1600 像素。
可选：使用范围滑块在您的页面上添加垂直模板分区之间的间距。您最多可以在分区之间添加 100 像素的间距。
可选：如果您的布局为网格，则使用水平间距和垂直间距范围滑块在页面上的网格内容之间添加间距。添加水平间距将为页面上的内容行添加最多 40 像素的间距，而添加垂直间距将为页面上的内容列添加最多 40 像素的间距。
轻触保存或 ✓。

动画

动画可为您的在线商店增添动感和视觉趣味。您可以激活在滚动时显示商店分区的淡入动画，以及适用于卡片和按钮的悬停效果。

步骤：

台式电脑

在 Shopify 后台中，转至在线商店 > 模板。
找到要编辑的模板，然后点击编辑模板。
点击模板设置 图标。
点击动画。
可选：若要激活在滚动时显示在线商店分区的动画，请选择滚动时显示分区。
可选：若要为您的卡片和按钮添加悬停效果动画，请从悬停效果设置中选择以下选项之一：
- 垂直提升：当客户将鼠标悬停在卡片或按钮上时，该元素会向上移动。
- 3D 提升：当客户将鼠标悬停在卡片或按钮上时，该元素会向前移动，从而产生 3D 效果。元素上还会出现划过的细微光泽，从而为其增添了另一层维度。
点击保存。

移动设备

在 Shopify 应用中，轻触图标。
在销售渠道部分，轻触在线商店。
轻触管理所有模板。
找到要编辑的模板，然后轻触编辑模板。
轻触 … 或 ⋮，然后轻触模板设置。
轻触动画。
可选：若要激活在滚动时显示在线商店分区的动画，请选择滚动时显示分区。
可选：若要为您的卡片和按钮添加悬停效果动画，请从悬停效果设置中选择以下选项之一：
- 垂直提升：当客户将鼠标悬停在卡片或按钮上时，该元素会向上移动。
- 3D 提升：当客户将鼠标悬停在卡片或按钮上时，该元素会向前移动，从而产生 3D 效果。元素上还会出现划过的细微光泽，从而为其增添了另一层维度。
轻触保存或 ✓。

视觉元素自定义设置

您可以从模板设置页面调整模板元素（例如按钮、产品卡和多属性）的外观。每个选项都包含该元素的相关设置。

您可以调整模板的以下元素的设置：

按钮：按钮包括幻灯片或带文本图片等分区中的行动号召按钮，以及联系表单、产品页面和购物车页面中的按钮。
多属性胶囊型按钮：通过多属性胶囊型按钮，您可以在产品页面或特色产品分区中显示产品的多属性。客户可以选择所需的多属性以将产品添加到购物车，而无需切换产品页面。您可以自定义多属性胶囊型按钮在您在线商店中的显示方式。
输入项：输入项是需要客户输入的交互区域，例如数量选择器、电子邮件注册表单或购物车备注。您可以调整在线商店输入项的外观。
通过产品卡、产品系列卡和博客卡的设置，您可以自定义在页面分区中显示的每种卡片的样式。
- 产品卡：产品卡用于在模板中列出多个产品的区域（例如产品系列模板、产品系列分区和搜索结果）显示有关您产品的信息。
- 产品系列卡：产品系列卡用于在模板中列出产品系列的区域（例如产品系列列表模板或分区）显示有关您产品系列的信息。
- 博客卡：博客卡用于在模板中列出多个产品的区域（例如博客模板、博客分区和搜索结果）显示有关您博客文章的信息。
内容容器：容器用于内容分区的文本元素，例如幻灯片上的文本框、图片横幅上的文本框或多列分区中的列。您可以为在线商店自定义内容容器的外观。
媒体文件：媒体文件是分区的可视组件，例如产品媒体文件或“带文本图片”分区中的图片。您可以为媒体文件添加边框和阴影。
下拉菜单和弹出窗口：您可以调整在线商店中下拉菜单、弹出式模态窗口和购物车弹出窗口的外观。
抽屉：抽屉是隐藏的交互式容器，在轻触或点击时会显示，例如可折叠菜单或产品系列筛选选项。您可以为在线商店上的抽屉自定义边框和阴影。
徽章：当您降低价格或库存计数为 0 时，促销 和 已售罄 徽章会自动添加到您的产品图片中。您可以在模板设置中单独调整 促销 和 已售罄 徽章的位置、形状和颜色。页面 和 博客 徽章会显示在相关搜索结果中。您可以自定义这些徽章的位置和形状，但无法更改 页面 和 博客 徽章的颜色。
品牌信息：您可以在您的在线商店中添加有关您品牌的信息。完成以下步骤后，您便可以将品牌信息块添加到在线商店的页脚中。

步骤：

台式电脑

在 Shopify 后台中，转至在线商店 > 模板。
在要编辑的模板旁边，点击编辑模板。
点击图标。
点击一个元素以打开设置。
调整任何可用设置。您可以通过在预览窗口中导航到模板的不同区域来查看更改。
点击保存。

移动设备

在 Shopify 应用中，轻触图标。
在销售渠道部分，轻触在线商店。
在要编辑的模板旁边，轻触编辑模板。
轻触图标。
轻触一个元素以打开设置。
调整任何可用设置。您可以通过在预览窗口中导航到模板的不同区域来查看更改。
轻触保存或 ✓。

您可以添加要在在线商店的页脚中显示的社交媒体账户链接。

步骤：

台式电脑

在 Shopify 后台中，转至在线商店 > 模板。
找到要编辑的模板，然后点击编辑模板。
点击模板设置 图标。
点击社交媒体。
若要添加社交媒体账户的链接，请在相关的社交账户字段中输入您账户的网站地址。您需要输入完整链接，例如 https://instagram.com/shopify 或 https://tiktok.com/@shopify。
点击保存。

移动设备

在 Shopify 应用中，轻触图标。
在销售渠道部分，轻触在线商店。
轻触管理所有模板。
找到要编辑的模板，然后轻触编辑模板。
轻触 … 或 ⋮，然后轻触模板设置。
轻触社交媒体。
若要添加社交媒体账户的链接，请在相关的社交账户字段中输入您账户的网站地址。您需要输入完整链接，例如 https://instagram.com/shopify 或 https://tiktok.com/@shopify。
轻触保存或 ✓。

搜索行为

您的在线商店包含预测搜索功能，当客户开始在搜索字段中键入内容时，该功能会显示建议。搜索建议可帮助客户阐明和优化其搜索查询，并为他们提供探索在线商店的新方式。搜索建议还可让客户快速浏览匹配项，而无需离开当前页面来查看单独的搜索结果列表。

若要了解有关搜索建议工作原理的更多信息，请参阅预测搜索。

您可以自定义向客户显示搜索建议的方式。

步骤：

台式电脑

在 Shopify 后台中，转至在线商店 > 模板。
找到要编辑的模板，然后点击编辑模板。
点击模板设置 图标。
点击搜索行为。
若要激活或停用搜索建议，请选中或取消选中启用搜索建议。
可选：若要在搜索建议中显示或隐藏产品厂商，请选中或取消选中显示产品厂商。
可选：若要在搜索建议中显示或隐藏产品价格，请选中或取消选中显示产品价格。
点击保存。

移动设备

在 Shopify 应用中，轻触图标。
在销售渠道部分，轻触在线商店。
轻触管理所有模板。
找到要编辑的模板，然后轻触编辑模板。
轻触 … 或 ⋮，然后轻触模板设置。
轻触搜索行为。
若要激活或停用搜索建议，请选中或取消选中启用搜索建议。
可选：若要在搜索建议中显示或隐藏产品厂商，请选中或取消选中显示产品厂商。
可选：若要在搜索建议中显示或隐藏产品价格，请选中或取消选中显示产品价格。
轻触保存或 ✓。

货币格式

您可以选择让货币代码与产品价格一起显示。

步骤：

台式电脑

在 Shopify 后台中，转至在线商店 > 模板。
找到要编辑的模板，然后点击编辑模板。
点击模板设置 图标。
点击货币格式。
若要显示货币代码，请选中显示货币代码。
点击保存。

移动设备

在 Shopify 应用中，轻触图标。
在销售渠道部分，轻触在线商店。
轻触管理所有模板。
找到要编辑的模板，然后轻触编辑模板。
轻触 … 或 ⋮，然后轻触模板设置。
轻触货币格式。
若要显示货币代码，请选中显示货币代码。
轻触保存或 ✓。

购物车

您可以更改在线商店中的购物车样式。当客户将您商店中的产品添加到购物车时，购物车可以显示为抽屉、页面或弹出式通知。若要让客户停留在产品页面，请使用抽屉或弹出式通知选项。若要将客户转至购物车页面，请使用页面选项。当客户的购物车为空时，您可以在购物车抽屉中显示特色产品系列。

步骤：

台式电脑

在 Shopify 后台中，转至在线商店 > 模板。
找到要编辑的模板，然后点击编辑模板。
点击模板设置 图标。
点击购物车。
使用购物车类型下拉菜单选择抽屉、页面或弹出式通知购物车样式。
可选：若要显示客户购物车中商品的厂商，请选中显示厂商。
可选：若要为客户提供一个文本框，供他们输入特殊请求或添加额外的订单信息，请选中启用购物车备注。
可选：如果选择抽屉作为购物车类型，则可在购物车抽屉为空时显示产品系列：
1. 在购物车抽屉区域，点击选择产品系列。
2. 点击要显示的产品系列的名称，然后点击选择。
可选：如果选择抽屉作为购物车类型，则可以执行以下步骤来更改购物车抽屉的配色方案：
1. 在 购物车抽屉 > 配色方案 区域中，点击更改。
2. 为您的购物车抽屉选择要使用的配色方案。
点击保存。

移动设备

在 Shopify 应用中，轻触图标。
在销售渠道部分，轻触在线商店。
轻触管理所有模板。
找到要编辑的模板，然后轻触编辑模板。
轻触 … 或 ⋮，然后轻触模板设置。
轻触 购物车。
从抽屉、页面或 弹出式通知 选项中选择您的 购物车类型。
可选：若要显示客户购物车中商品的厂商，请选中显示厂商。
可选：若要为客户提供一个文本框，供他们输入特殊请求或添加额外的订单信息，请选中启用购物车备注。
可选：如果选择抽屉作为购物车类型，则可在购物车抽屉为空时显示产品系列：
1. 在 购物车抽屉 区域中，轻触 选择产品系列。
2. 轻触要显示的产品系列的名称，然后轻触完成。
可选：如果选择抽屉作为购物车类型，则可以执行以下步骤来更改购物车抽屉的配色方案：
1. 在 购物车抽屉 > 配色方案 区域中，轻触更改。
2. 为您的购物车抽屉选择要使用的配色方案，然后轻触完成。
轻触保存或 ✓。

自定义 CSS

通过 自定义 CSS 部分，您可以输入自己的 CSS 代码，例如，除了可用的默认设置之外，还可以自定义在线商店按钮的外观，或为特定文本元素应用独特的样式。

模板设置中的自定义 CSS 会影响您在线商店中的所有页面（结账页面除外）。

详细了解向模板添加自定义 CSS。

模板风格

模板风格是由模板设计人员选择的一组设置。您可以将模板风格应用于您的商店，为其打造精美的外观。所有模板在默认情况下都应用了一种模板风格。您拥有的其他模板风格选项取决于您使用的模板。

当您自定义模板时，您自己的设置会替换掉模板风格设置。当您对模板应用模板风格时，您当前的设置（例如颜色和排版）将会更改。

步骤：

台式电脑

在 Shopify 后台中，转至在线商店 > 模板。
找到要编辑的模板，然后点击编辑模板。
点击模板设置 图标。
点击 模板风格。
选择要使用的模板风格，然后点击 更改风格。
点击保存。

移动设备

在 Shopify 应用中，轻触图标。
在销售渠道部分，轻触在线商店。
轻触管理所有模板。
找到要编辑的模板，然后轻触编辑模板。
轻触 … 或 ⋮，然后轻触模板设置。
轻触 模板风格。
选择要使用的模板风格，然后轻触完成。
轻触保存或 ✓。