模板设置

已于 Sep 16, 2024 打印了此页面。若要查看当前版本，请访问 https://help.shopify.com/zh-CN/manual/online-store/themes/theme-structure/theme-settings?utm_source=gurucopy&utm_medium=link&utm_campaign=Gurus。

您可以使用模板设置来更改在线商店的版式、颜色、社交媒体链接和购物车页面。当您对模板设置进行更改时，这些更改将应用于您的整个在线商店。

本页相关主题

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

  • 所有页面的标头
  • 密码页面

自定义 logo

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

步骤：

  1. 在 Shopify 后台中，转至在线商店 > 模板。
  2. 找到您要编辑的模板，然后点击自定义。
  3. 点击模板设置齿轮图标。
  4. 点击 logo。
  5. 在 logo 区域，添加图片或使用免费图片：
    • 若要添加图片，请点击选择图片，然后添加新图片或现有图片：
      • 若要使用已上传到 Shopify 后台的图片，请选择图片，然后点击完成。
      • 若要使用本地计算机中的图片，请点击添加图片。选择并添加图片，然后点击完成。

- 若要使用免费图片，请点击浏览免费图片。找到图片，点击图片将其选中，然后点击选择。

  1. 可选：为 logo 图片添加替代文本：

    1. 在 logo 区域，点击编辑。
    2. 在替代文本字段中，输入图片的简要描述。
    3. 点击保存。

  2. 可选：在台式设备 logo 宽度区域，使用范围滑块调整 logo 像素宽度。

  3. 点击保存。

  1. 在 Shopify 应用中，点击 … 按钮。
  2. 在销售渠道部分，轻触在线商店。
  3. 点击管理所有模板。
  4. 找到您要编辑的模板，然后轻触自定义。
  5. 点击 ⋮，然后点击模板设置。
  6. 点击 logo。
  7. 在 logo 区域，添加图片或使用免费图片：
    • 若要添加图片，请点击选择图片，然后添加新图片或现有图片：
      • 若要使用已上传到 Shopify 后台的图片，请选择图片，然后点击完成。
      • 若要使用本地设备中的图片，请点击添加图片。从本地设备中选择并添加图片，点击图片将其选中，然后点击完成。

- 若要使用免费图片，请点击浏览免费图片。找到图片，点击图片将其选中，然后点击完成。

  1. 可选：为 logo 图片添加替代文本：

    1. 在 logo 区域，点击编辑。
    2. 在替代文本字段中，输入图片的简要描述。
    3. 点击保存。

  2. 可选：在台式设备 logo 宽度区域，使用范围滑块调整 logo 像素宽度。

  3. 点击保存。

  1. 在 Shopify 应用中，点击 ☰ 按钮。
  2. 在销售渠道部分，轻触在线商店。
  3. 点击管理所有模板。
  4. 找到您要编辑的模板，然后轻触自定义。
  5. 点击 ...，然后点击模板设置。
  6. 点击 logo。
  7. 在 logo 区域，添加图片或使用免费图片：
    • 若要添加图片，请点击选择图片，然后添加新图片或现有图片：
      • 若要使用已上传到 Shopify 后台的图片，请选择图片，然后点击完成。
      • 若要使用本地设备中的图片，请点击添加图片。从本地设备中选择并添加图片，点击图片将其选中，然后点击完成。

- 若要使用免费图片，请点击浏览免费图片。找到图片，点击图片将其选中，然后点击完成。

  1. 可选：为 logo 图片添加替代文本：

    1. 在 logo 区域，点击编辑。
    2. 在替代文本字段中，输入图片的简要描述。
    3. 点击保存。

  2. 可选：在台式设备 logo 宽度区域，使用范围滑块调整 logo 像素宽度。

  3. 点击 ✓。

添加网站图标

您可以添加收藏图标或网站图标图标，这些图标可帮助您对在线商店进行品牌营销。网站图标会显示在以下位置：

  • 您的 Web 浏览器选项卡
  • 您的 Web 浏览器历史记录
  • 桌面上的图标
  • 将网站加入书签时，显示在您的在线商店名称旁边

详细了解网站图标。

步骤：

  1. 在 Shopify 后台中，转至在线商店 > 模板。
  2. 找到要添加网站图标的模板，然后点击自定义。
  3. 点击模板设置齿轮图标。
  4. 根据您的模板版本，请点击 logo 或网站图标。

  5. 在网站图标图片部分，点击选择图片，然后添加新图片或现有图片：

    • 若要选择已上传到 Shopify 后台的图片，您可以搜索或找到该图片，然后选中相应复选框。
    • 若要从本地计算机选择图片，请点击添加图片，从本地计算机中打开图片，然后选中相应复选框。

  6. 点击完成。

  7. 可选：为网站图标图片添加替代文本：

    1. 在网站图标图片部分，点击编辑。
    2. 在替代文本字段中，输入图片的简要描述。
    3. 点击保存。

  8. 点击保存。

  1. 在 Shopify 应用中，点击 … 按钮。
  2. 在销售渠道部分，轻触在线商店。
  3. 点击管理所有模板。
  4. 找到要添加网站图标的模板，然后点击自定义。
  5. 点击 ⋮，然后点击模板设置。
  6. 根据您的模板版本，请轻触 logo 或网站图标。

  7. 在网站图标图片部分，点击选择图片，然后添加新图片或现有图片：

    • 若要选择已上传到 Shopify 后台的图片，您可以搜索或找到该图片，然后选中相应复选框。
    • 若要从本地设备选择图片，请点击添加图片，从本地设备中打开图片，然后选中相应复选框。

  8. 点击完成。

  9. 将替代文本添加到网站图标图片：

    1. 在网站图标图片部分，点击编辑。
    2. 在替代文本字段中，输入图片的简要描述。
    3. 点击保存。

  10. 点击保存。

  1. 在 Shopify 应用中，点击 ☰ 按钮。
  2. 在销售渠道部分，轻触在线商店。
  3. 点击管理所有模板。
  4. 找到要添加网站图标的模板，然后点击自定义。
  5. 点击 ...，然后点击模板设置。
  6. 根据您的模板版本，请轻触 logo 或网站图标。

  7. 在网站图标图片部分，点击选择图片，然后添加新图片或现有图片：

    • 若要选择已上传到 Shopify 后台的图片，您可以搜索或找到该图片，然后选中相应复选框。
    • 若要从本地设备选择图片，请点击添加图片，从本地设备中打开图片，然后选中相应复选框。

  8. 点击完成。

  9. 将替代文本添加到网站图标图片：

    1. 在网站图标图片部分，点击编辑。
    2. 在替代文本字段中，输入图片的简要描述。
    3. 点击保存。

  10. 点击 ✓。

颜色

您可以创建和自定义多达 21 种独特的配色方案，并将它们应用于整个在线商店中的不同分区。详细了解颜色选项、配色方案以及颜色渐变。

步骤：

  1. 在 Shopify 后台中，转至在线商店 > 模板。
  2. 找到您要编辑的模板，然后点击自定义。
  3. 点击模板设置齿轮图标
  4. 点击颜色。
  5. 在方案部分，点击现有方案或点击添加方案以添加新配色方案。

  6. 若要编辑配色方案，请点击颜色样本以更改以下内容类型颜色：

    • 背景
    • 背景渐变
    • 文本
    • 实心按钮背景
    • 实心按钮标签
    • 轮廓按钮
    • 阴影

  7. 若要设置颜色，请输入十六进制颜色代码或从颜色选择器中选择颜色。若要将颜色设置为透明，请从文本字段中删除十六进制颜色代码。

  8. 点击保存。

  1. 在 Shopify 应用中，点击 … 按钮。

  2. 在销售渠道部分，轻触在线商店。

  3. 点击管理所有模板。

  4. 找到您要编辑的模板，然后轻触自定义。

  5. 点击 ⋮，然后点击模板设置。

  6. 点击颜色。

  7. 在方案部分，点击现有方案或点击添加方案以添加新配色方案。

  8. 若要编辑配色方案，请点击颜色样本以更改以下内容类型颜色：

    • 背景
    • 背景渐变
    • 文本
    • 实心按钮背景
    • 实心按钮标签
    • 轮廓按钮
    • 阴影

  9. 若要设置颜色，请输入十六进制颜色代码或从颜色选择器中选择颜色。若要将颜色设置为透明，请从文本字段中删除十六进制颜色代码。

  10. 点击完成。

  11. 点击保存。

  1. 在 Shopify 应用中，点击 ☰ 按钮。

  2. 在销售渠道部分，轻触在线商店。

  3. 点击管理所有模板。

  4. 找到您要编辑的模板，然后轻触自定义。

  5. 点击 ...，然后点击模板设置。

  6. 点击颜色。

  7. 在方案部分，点击现有方案或点击添加方案以添加新配色方案。

  8. 若要编辑配色方案，请点击颜色样本以更改以下内容类型颜色：

    • 背景
    • 背景渐变
    • 文本
    • 实心按钮背景
    • 实心按钮标签
    • 轮廓按钮
    • 阴影

  9. 若要设置颜色，请输入十六进制颜色代码或从颜色选择器中选择颜色。若要将颜色设置为透明，请从文本字段中删除十六进制颜色代码。

  10. 点击完成。

  11. 点击 ✓。

版式

您可以设置在线商店上的文本的字体样式和大小。您可以选择系统字体或自定义字体。

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

自定义字体大小

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

步骤：

  1. 在 Shopify 后台中，转至在线商店 > 模板。
  2. 找到您要编辑的模板，然后点击自定义。
  3. 点击模板设置齿轮图标。
  4. 点击 Typography（字体）。
  5. 若要更改商店标题或正文文本的字体类型，请点击标题或正文部分中的更改。
  6. 点击要使用的字体的名称，然后点击选择。
  7. 点击保存。
  1. 在 Shopify 应用中，点击 … 按钮。
  2. 在销售渠道部分，点击在线商店。
  3. 点击管理所有模板。
  4. 找到您要编辑的模板，然后轻触自定义。
  5. 点击 ⋮，然后点击模板设置。
  6. 点击版式。
  7. 若要更改商店标题或正文文本的字体类型，请点击标题或正文部分中的更改。
  8. 点击要使用的字体的名称，然后点击完成。
  9. 点击保存。
  1. 在 Shopify 应用中，点击 ☰ 按钮。
  2. 在销售渠道部分，点击在线商店。
  3. 点击管理所有模板。
  4. 找到您要编辑的模板，然后轻触自定义。
  5. 点击 ...，然后点击模板设置。
  6. 点击版式。
  7. 若要更改商店标题或正文文本的字体类型，请点击标题或正文部分中的更改。
  8. 点击要使用的字体的名称，然后点击完成。
  9. 点击 ✓。

自定义字体大小

您可以使用版式模板设置为标题和正文文本设置默认字体大小。

最小字体大小为 100%，最大字体大小为 150%。该比例标尺每增加一个单位可使字体大小增大 5%。默认设置为 100%。

步骤：

  1. 在 Shopify 后台中，转至在线商店 > 模板。
  2. 找到您要编辑的模板，然后点击自定义。
  3. 点击模板设置齿轮图标。
  4. 点击 Typography（字体）。
  5. 若要更改标题文本的默认字体大小，请使用字体大小比例标尺范围滑块来选择默认字体大小。
  6. 若要更改正文文本的默认字体大小，请使用字体大小比例标尺范围滑块来选择默认字体大小。
  7. 点击保存。
  1. 在 Shopify 应用中，点击 … 按钮。
  2. 在销售渠道部分，轻触在线商店。
  3. 点击管理所有模板。
  4. 找到您要编辑的模板，然后轻触自定义。
  5. 点击 ⋮，然后点击模板设置。
  6. 点击版式。
  7. 若要更改标题文本的默认字体大小，请使用字体大小比例标尺范围滑块来选择默认字体大小。
  8. 若要更改正文文本的默认字体大小，请使用字体大小比例标尺范围滑块来选择默认字体大小。
  9. 点击保存。
  1. 在 Shopify 应用中，点击 ☰ 按钮。
  2. 在销售渠道部分，轻触在线商店。
  3. 点击管理所有模板。
  4. 找到您要编辑的模板，然后轻触自定义。
  5. 点击 ...，然后点击模板设置。
  6. 点击版式。
  7. 若要更改标题文本的默认字体大小，请使用字体大小比例标尺范围滑块来选择默认字体大小。
  8. 若要更改正文文本的默认字体大小，请使用字体大小比例标尺范围滑块来选择默认字体大小。
  9. 点击 ✓。

布局

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

步骤：

  1. 在 Shopify 后台中，转至在线商店 > 模板。
  2. 找到您要编辑的模板，然后点击自定义。
  3. 点击模板设置齿轮图标。
  4. 点击布局。
  5. 使用页面宽度范围滑块选择 1000 px 到 1600 px 之间的页面宽度。默认设置为 1600 px。
  6. 可选：使用范围滑块在页面上的模板分区之间添加垂直间距。您可在分区之间最多添加 100 px 的间距。
  7. 可选：如果您有网格布局，请使用水平间距和垂直间距范围滑块在页面上的网格内容之间添加间距。添加水平间距最多可在页面上的内容行之间添加 40 px 的间距，而添加垂直间距最多可在页面上的内容列之间添加 40 px 的间距。
  8. 点击保存。
  1. 在 Shopify 应用中，点击 … 按钮。
  2. 在销售渠道部分，轻触在线商店。
  3. 点击管理所有模板。
  4. 找到您要编辑的模板，然后轻触自定义。
  5. 点击 ⋮，然后点击模板设置。
  6. 点击布局。
  7. 使用页面宽度范围滑块选择 1000 px 到 1600 px 之间的页面宽度。默认设置为 1600 px。
  8. 可选：使用范围滑块在页面上的模板分区之间添加垂直间距。您可在分区之间最多添加 100 px 的间距。
  9. 可选：如果您有网格布局，请使用水平间距和垂直间距范围滑块在页面上的网格内容之间添加间距。添加水平间距最多可在页面上的内容行之间添加 40 px 的间距，而添加垂直间距最多可在页面上的内容列之间添加 40 px 的间距。
  10. 点击保存。
  1. 在 Shopify 应用中，点击 ☰ 按钮。
  2. 在销售渠道部分，轻触在线商店。
  3. 点击管理所有模板。
  4. 找到您要编辑的模板，然后轻触自定义。
  5. 点击 ...，然后点击模板设置。
  6. 点击布局。
  7. 使用页面宽度范围滑块选择 1000 px 到 1600 px 之间的页面宽度。默认设置为 1600 px。
  8. 可选：使用范围滑块在页面上的模板分区之间添加垂直间距。您可在分区之间最多添加 100 px 的间距。
  9. 可选：如果您有网格布局，请使用水平间距和垂直间距范围滑块在页面上的网格内容之间添加间距。添加水平间距最多可在页面上的内容行之间添加 40 px 的间距，而添加垂直间距最多可在页面上的内容列之间添加 40 px 的间距。
  10. 点击 ✓。

动画

通过动画，您可以为在线商店增加动感和视觉乐趣。您可以激活淡入动画，以在滚动时显示您商店的分区，还可为卡和按钮激活悬停效果。

步骤：

  1. 在 Shopify 后台中，转至在线商店 > 模板。
  2. 找到您要编辑的模板，然后点击自定义。
  3. 点击模板设置齿轮图标。
  4. 点击动画。
  5. 可选：若要激活可在滚动时显示在线商店分区的动画，请选择在滚动时显示分区。

  6. 可选：若要为卡和按钮添加悬停效果动画，请从悬停效果设置中选择以下一个选项：

    • 垂直提升：当客户将鼠标悬停在卡或按钮上时，元素会向上移动。
    • 3D 提升：当客户将鼠标悬停在卡或按钮上时，元素会向前移动，从而产生 3D 效果。此时元素上还会有细微的光泽来回移动，形成另一层维度。

  7. 点击保存。

  1. 在 Shopify 应用中，点击 … 按钮。

  2. 在销售渠道部分，轻触在线商店。

  3. 点击管理所有模板。

  4. 找到您要编辑的模板，然后轻触自定义。

  5. 点击 ⋮，然后点击模板设置。

  6. 点击动画。

  7. 可选：若要激活可在滚动时显示在线商店分区的动画，请选择在滚动时显示分区。

  8. 可选：若要为卡和按钮添加悬停效果动画，请从悬停效果设置中选择以下一个选项：

    • 垂直提升：当客户将鼠标悬停在卡或按钮上时，元素会向上移动。
    • 3D 提升：当客户将鼠标悬停在卡或按钮上时，元素会向前移动，从而产生 3D 效果。此时元素上还会有细微的光泽来回移动，形成另一层维度。

  9. 点击保存。

  1. 在 Shopify 应用中，点击 ☰ 按钮。

  2. 在销售渠道部分，轻触在线商店。

  3. 点击管理所有模板。

  4. 找到您要编辑的模板，然后轻触自定义。

  5. 点击 ...，然后点击模板设置。

  6. 点击动画。

  7. 可选：若要激活可在滚动时显示在线商店分区的动画，请选择在滚动时显示分区。

  8. 可选：若要为卡和按钮添加悬停效果动画，请从悬停效果设置中选择以下一个选项：

    • 垂直提升：当客户将鼠标悬停在卡或按钮上时，元素会向上移动。
    • 3D 提升：当客户将鼠标悬停在卡或按钮上时，元素会向前移动，从而产生 3D 效果。此时元素上还会有细微的光泽来回移动，形成另一层维度。

  9. 点击 ✓。

边框和阴影

您可以调整某些交互式内容类型的边框和阴影，例如抽屉、按钮、多属性椭圆形框或产品数量输入。

边框的可自定义选项包括：

  • 厚度，用于更改商品的轮廓。
  • 不透明度，用于设置商品轮廓的可见性。
  • 角半径，用于对商品的角进行圆滑处理。

阴影的可自定义选项包括：

  • 不透明度，用于更改商品阴影的可见性。0% 的阴影不透明度会完全移除商品阴影。
  • 水平和垂直偏移范围滑块会移动商品周围阴影的位置。
  • 模糊范围滑块，用于更改商品阴影的不透明度。

按钮

您可以通过添加阴影、更改间距或不透明度以及调整按钮形状，自定义在线商店中行动号召按钮的设置。

包含行动号召按钮的在线商店示例

步骤：

  1. 在 Shopify 后台中，转至在线商店 > 模板。
  2. 找到您要编辑的模板，然后点击自定义。
  3. 点击模板设置齿轮图标。
  4. 点击按钮。
  5. 可选：使用范围滑块更改按钮边框的外观。
  6. 可选：使用范围滑块更改按钮阴影。将阴影不透明度设置为 0% 可去除阴影。
  7. 点击保存。
  1. 在 Shopify 应用中，点击 … 按钮。
  2. 在销售渠道部分，轻触在线商店。
  3. 点击管理所有模板。
  4. 找到您要编辑的模板，然后轻触自定义。
  5. 点击 ⋮，然后点击模板设置。
  6. 点击按钮。
  7. 可选：使用范围滑块更改按钮边框的外观。
  8. 可选：使用范围滑块更改按钮阴影。将阴影不透明度设置为 0% 可去除阴影。
  9. 点击保存。
  1. 在 Shopify 应用中，点击 ☰ 按钮。
  2. 在销售渠道部分，轻触在线商店。
  3. 点击管理所有模板。
  4. 找到您要编辑的模板，然后轻触自定义。
  5. 点击 ...，然后点击模板设置。
  6. 点击按钮。
  7. 可选：使用范围滑块更改按钮边框的外观。
  8. 可选：使用范围滑块更改按钮阴影。将阴影不透明度设置为 0% 可去除阴影。
  9. 点击 ✓。

多属性椭圆形框

多属性椭圆形框允许您在产品页面或特色产品分区中显示产品的多属性。客户可以选择所需的多属性，以将产品添加到购物车，而无需更改产品页面。您可以自定义多属性椭圆形框在您在线商店中的显示方式。

包含可选多属性椭圆形框的示例在线商店

步骤：

  1. 在 Shopify 后台中，转至在线商店 > 模板。
  2. 找到您要编辑的模板，然后点击自定义。
  3. 点击模板设置齿轮图标。
  4. 点击多属性椭圆形框。
  5. 可选：使用范围滑块更改多属性椭圆形框的边框的外观。
  6. 可选：使用范围滑块更改多属性椭圆形框的阴影。将阴影不透明度设置为 0% 可去除阴影。
  7. 点击保存。
  1. 在 Shopify 应用中，点击 … 按钮。
  2. 在销售渠道部分，轻触在线商店。
  3. 点击管理所有模板。
  4. 找到您要编辑的模板，然后轻触自定义。
  5. 点击 ⋮，然后点击模板设置。
  6. 点击多属性椭圆形框。
  7. 可选：使用范围滑块更改多属性椭圆形框的边框的外观。
  8. 可选：使用范围滑块更改多属性椭圆形框的阴影。将阴影不透明度设置为 0% 可去除阴影。
  9. 点击保存。
  1. 在 Shopify 应用中，点击 ☰ 按钮。
  2. 在销售渠道部分，轻触在线商店。
  3. 点击管理所有模板。
  4. 找到您要编辑的模板，然后轻触自定义。
  5. 点击 ...，然后点击模板设置。
  6. 点击多属性椭圆形框。
  7. 可选：使用范围滑块更改多属性椭圆形框的边框的外观。
  8. 可选：使用范围滑块更改多属性椭圆形框的阴影。将阴影不透明度设置为 0% 可去除阴影。
  9. 点击 ✓。

输入

输入是需要客户输入的交互区域，例如数量选择器、电子邮件注册表单或购物车备注。您可以调整在线商店输入的外观。

包含数量输入的在线商店示例

步骤：

  1. 在 Shopify 后台中，转至在线商店 > 模板。
  2. 找到您要编辑的模板，然后点击自定义。
  3. 点击模板设置齿轮图标。
  4. 点击输入。
  5. 可选：使用范围滑块更改输入边框的外观。
  6. 可选：使用范围滑块更改输入阴影。将阴影不透明度设置为 0% 可去除阴影。
  7. 点击保存。
  1. 在 Shopify 应用中，点击 … 按钮。
  2. 在销售渠道部分，轻触在线商店。
  3. 点击管理所有模板。
  4. 找到您要编辑的模板，然后轻触自定义。
  5. 点击 ⋮，然后点击模板设置。
  6. 点击输入。
  7. 可选：使用范围滑块更改输入边框的外观。
  8. 可选：使用范围滑块更改输入阴影。将阴影不透明度设置为 0% 可去除阴影。
  9. 点击保存。
  1. 在 Shopify 应用中，点击 ☰ 按钮。
  2. 在销售渠道部分，轻触在线商店。
  3. 点击管理所有模板。
  4. 找到您要编辑的模板，然后轻触自定义。
  5. 点击 ...，然后点击模板设置。
  6. 点击输入。
  7. 可选：使用范围滑块更改输入边框的外观。
  8. 可选：使用范围滑块更改输入阴影。将阴影不透明度设置为 0% 可去除阴影。
  9. 点击 ✓。

卡

通过产品卡、产品系列卡和博客卡的设置，您可以自定义每种类型的卡在页面分区中的显示样式。您可以更改这三种类型的分区卡的颜色、对齐方式、图片填充、边框和阴影。

步骤：

  1. 在 Shopify 后台中，转至在线商店 > 模板。
  2. 找到您要编辑的模板，然后点击自定义。
  3. 点击模板设置齿轮图标。
  4. 点击产品卡、产品系列卡或博客卡。
  5. 若要选择卡样式，请使用样式选项。
  6. 可选：若要在卡图片周围添加间距，请使用图片填充范围滑块。
  7. 可选：对于卡的文本对齐方式，选择左、居中（默认）或右。
  8. 可选：在配色方案部分，点击更改以选择卡的配色方案。
  9. 可选：使用范围滑块更改卡边框的外观。
  10. 可选：使用范围滑块更改卡阴影。将阴影不透明度设置为 0% 可去除阴影。
  11. 点击保存。
  1. 在 Shopify 应用中，点击 … 按钮。
  2. 在销售渠道部分，轻触在线商店。
  3. 点击管理所有模板。
  4. 找到您要编辑的模板，然后轻触自定义。
  5. 点击 ⋮，然后点击模板设置。
  6. 点击产品卡、产品系列卡或博客卡。
  7. 若要选择卡样式，请使用样式选项。
  8. 可选：若要在卡图片周围添加间距，请使用图片填充范围滑块。
  9. 可选：对于卡的文本对齐方式，选择左、居中（默认）或右。
  10. 可选：在配色方案部分，点击更改。为卡选择配色方案，然后点击完成。
  11. 可选：使用范围滑块更改卡边框的外观。
  12. 可选：使用范围滑块更改卡阴影。将阴影不透明度设置为 0% 可去除阴影。
  13. 点击保存。
  1. 在 Shopify 应用中，点击 ☰ 按钮。
  2. 在销售渠道部分，轻触在线商店。
  3. 点击管理所有模板。
  4. 找到您要编辑的模板，然后轻触自定义。
  5. 点击 ...，然后点击模板设置。
  6. 点击产品卡、产品系列卡或博客卡。
  7. 若要选择卡样式，请使用样式选项。
  8. 可选：若要在卡图片周围添加间距，请使用图片填充范围滑块。
  9. 可选：对于卡的文本对齐方式，选择左、居中（默认）或右。
  10. 可选：在配色方案部分，点击更改。为卡选择配色方案，然后点击完成。
  11. 可选：使用范围滑块更改卡边框的外观。
  12. 可选：使用范围滑块更改卡阴影。将阴影不透明度设置为 0% 可去除阴影。
  13. 点击 ✓。

内容容器

容器用于内容分区的文本部分，例如幻灯片上的文本框、图片横幅或多列分区的列。您可以自定义在线商店的内容容器的外观。

步骤：

  1. 在 Shopify 后台中，转至在线商店 > 模板。
  2. 找到您要编辑的模板，然后点击自定义。
  3. 点击模板设置齿轮图标。
  4. 点击内容容器。
  5. 使用范围滑块更改内容容器边框的外观。
  6. 使用范围滑块更改内容容器阴影。将阴影不透明度设置为 0% 可去除阴影。
  7. 点击保存。
  1. 在 Shopify 应用中，点击 … 按钮。
  2. 在销售渠道部分，轻触在线商店。
  3. 点击管理所有模板。
  4. 找到您要编辑的模板，然后轻触自定义。
  5. 点击 ⋮，然后点击模板设置。
  6. 点击内容容器。
  7. 使用范围滑块更改内容容器边框的外观。
  8. 使用范围滑块更改内容容器阴影。将阴影不透明度设置为 0% 可去除阴影。
  9. 点击保存。
  1. 在 Shopify 应用中，点击 ☰ 按钮。
  2. 在销售渠道部分，轻触在线商店。
  3. 点击管理所有模板。
  4. 找到您要编辑的模板，然后轻触自定义。
  5. 点击 ...，然后点击模板设置。
  6. 点击内容容器。
  7. 使用范围滑块更改内容容器边框的外观。
  8. 使用范围滑块更改内容容器阴影。将阴影不透明度设置为 0% 可去除阴影。
  9. 点击 ✓。

媒体

媒体文件是分区的视觉组件，例如产品媒体文件或“带文本图片”分区中的图片。您可以为媒体文件添加边框和阴影。

步骤：

  1. 在 Shopify 后台中，转至在线商店 > 模板。
  2. 找到您要编辑的模板，然后点击自定义。
  3. 点击模板设置齿轮图标。
  4. 点击媒体文件。
  5. 使用范围滑块更改媒体文件边框的外观。
  6. 使用范围滑块更改媒体文件阴影。将阴影不透明度设置为 0% 可去除阴影。
  7. 点击保存。
  1. 在 Shopify 应用中，点击 … 按钮。
  2. 在销售渠道部分，轻触在线商店。
  3. 点击管理所有模板。
  4. 找到您要编辑的模板，然后轻触自定义。
  5. 点击 ⋮，然后点击模板设置。
  6. 点击媒体文件。
  7. 使用范围滑块更改媒体文件边框的外观。
  8. 使用范围滑块更改媒体文件阴影。将阴影不透明度设置为 0% 可去除阴影。
  9. 点击保存。
  1. 在 Shopify 应用中，点击 ☰ 按钮。
  2. 在销售渠道部分，轻触在线商店。
  3. 点击管理所有模板。
  4. 找到您要编辑的模板，然后轻触自定义。
  5. 点击 ...，然后点击模板设置。
  6. 点击媒体文件。
  7. 使用范围滑块更改媒体文件边框的外观。
  8. 使用范围滑块更改媒体文件阴影。将阴影不透明度设置为 0% 可去除阴影。
  9. 点击 ✓。

下拉菜单和弹出窗口

您可以调整在线商店中网站导航下拉菜单、弹出模态窗口和购物车弹出窗口的外观。

步骤：

  1. 在 Shopify 后台中，转至在线商店 > 模板。
  2. 找到您要编辑的模板，然后点击自定义。
  3. 点击模板设置齿轮图标。
  4. 点击下拉菜单和弹出窗口。
  5. 使用范围滑块更改边框的外观。
  6. 使用范围滑块更改阴影。将阴影不透明度设置为 0% 可去除阴影。
  7. 点击保存。
  1. 在 Shopify 应用中，点击 … 按钮。
  2. 在销售渠道部分，轻触在线商店。
  3. 点击管理所有模板。
  4. 找到您要编辑的模板，然后轻触自定义。
  5. 点击 ⋮，然后点击模板设置。
  6. 点击下拉菜单和弹出窗口。
  7. 使用范围滑块更改边框的外观。
  8. 使用范围滑块更改阴影。将阴影不透明度设置为 0% 可去除阴影。
  9. 点击保存。
  1. 在 Shopify 应用中，点击 ☰ 按钮。
  2. 在销售渠道部分，轻触在线商店。
  3. 点击管理所有模板。
  4. 找到您要编辑的模板，然后轻触自定义。
  5. 点击 ...，然后点击模板设置。
  6. 点击下拉菜单和弹出窗口。
  7. 使用范围滑块更改边框的外观。
  8. 使用范围滑块更改阴影。将阴影不透明度设置为 0% 可去除阴影。
  9. 点击 ✓。

抽屉

抽屉是隐藏的交互式容器，会在被轻触或点击时显示，例如可折叠的网站导航菜单或产品系列筛选选项。您可以自定义在线商店中抽屉的边框和阴影。

步骤：

  1. 在 Shopify 后台中，转至在线商店 > 模板。
  2. 找到您要编辑的模板，然后点击自定义。
  3. 点击模板设置齿轮图标。
  4. 点击抽屉。
  5. 使用范围滑块更改抽屉边框的外观。
  6. 使用范围滑块更改抽屉阴影。将阴影不透明度设置为 0% 可去除阴影。
  7. 点击保存。
  1. 在 Shopify 应用中，点击 … 按钮。
  2. 在销售渠道部分，轻触在线商店。
  3. 点击管理所有模板。
  4. 找到您要编辑的模板，然后轻触自定义。
  5. 点击 ⋮，然后点击模板设置。
  6. 点击抽屉。
  7. 使用范围滑块更改抽屉边框的外观。
  8. 使用范围滑块更改抽屉阴影。将阴影不透明度设置为 0% 可去除阴影。
  9. 点击保存。
  1. 在 Shopify 应用中，点击 ☰ 按钮。
  2. 在销售渠道部分，轻触在线商店。
  3. 点击管理所有模板。
  4. 找到您要编辑的模板，然后轻触自定义。
  5. 点击 ...，然后点击模板设置。
  6. 点击抽屉。
  7. 使用范围滑块更改抽屉边框的外观。
  8. 使用范围滑块更改抽屉阴影。将阴影不透明度设置为 0% 可去除阴影。
  9. 点击 ✓。

徽章

当您降价或库存计数达到 0 时，系统会自动为您的产品图片添加促销和售罄徽章。您可以调整促销和售罄徽章的位置、形状和颜色。

包含促销和售完徽章的在线商店示例

页面和博客徽章会显示在相关的搜索结果中。您可以自定义这些徽章的位置和形状，但无法更改页面和博客徽章的颜色。

步骤：

  1. 在 Shopify 后台中，转至在线商店 > 模板。
  2. 找到您要编辑的模板，然后点击自定义。
  3. 点击模板设置齿轮图标。
  4. 点击徽章。
  5. 若要选择徽章位置，请点击在卡上的位置下拉菜单，然后点击左下方、右下方、左上方或右上方。
  6. 可选：若要为徽章添加圆角，请使用角半径范围滑块。将角半径设置为 0 px 可生成方形徽章边角，而增加半径会使徽章边角更圆滑。
  7. 可选：若要选择配色方案，请对促销徽章配色方案或售罄徽章配色方案点击更改，然后点击所需的配色方案。
  8. 点击保存。
  1. 在 Shopify 应用中，点击 … 按钮。
  2. 在销售渠道部分，轻触在线商店。
  3. 点击管理所有模板。
  4. 找到您要编辑的模板，然后轻触自定义。
  5. 点击 ⋮，然后点击模板设置。
  6. 点击徽章。
  7. 若要选择徽章位置，请点击在卡上的位置下拉菜单，然后点击左下方、右下方、左上方或右上方。
  8. 可选：若要为徽章添加圆角，请使用角半径范围滑块。将角半径设置为 0 px 可生成方形徽章边角，而增加半径会使徽章边角更圆滑。
  9. 可选：若要选择配色方案，请对促销徽章配色方案或售罄徽章配色方案点击更改。为徽章选择配色方案，然后点击完成。
  10. 点击保存。
  1. 在 Shopify 应用中，点击 ☰ 按钮。
  2. 在销售渠道部分，轻触在线商店。
  3. 点击管理所有模板。
  4. 找到您要编辑的模板，然后轻触自定义。
  5. 点击 ...，然后点击模板设置。
  6. 点击徽章。
  7. 若要选择徽章位置，请点击在卡上的位置下拉菜单，然后点击左下方、右下方、左上方或右上方。
  8. 可选：若要为徽章添加圆角，请使用角半径范围滑块。将角半径设置为 0 px 可生成方形徽章边角，而增加半径会使徽章边角更圆滑。
  9. 可选：若要选择配色方案，请对促销徽章配色方案或售罄徽章配色方案点击更改。为徽章选择配色方案，然后点击完成。
  10. 点击 ✓。

品牌信息

您可以在您的在线商店中包含有关您品牌的信息。完成以下步骤后，您可以在您在线商店的页脚中添加品牌信息块。

步骤：

  1. 在 Shopify 后台中，转至在线商店 > 模板。
  2. 找到您要编辑的模板，然后点击自定义。
  3. 点击模板设置齿轮图标。
  4. 点击品牌信息。
  5. 可选：输入有关您的品牌或企业的标题。
  6. 可选：输入有关您的品牌或企业的描述。
  7. 可选：在图片区域，添加图片或使用免费图片：
    • 若要添加图片，请点击选择图片，然后添加新图片或现有图片：
      • 若要使用已上传到 Shopify 后台的图片，请选择图片，然后点击完成。
      • 若要使用本地计算机中的图片，请点击添加图片。选择并添加图片，然后点击完成。

- 若要使用免费图片，请点击浏览免费图片。找到图片，点击图片将其选中，然后点击选择。

  1. 可选：在图片宽度区域，将范围滑块滑动到所需的像素宽度。
  2. 点击保存。
  1. 在 Shopify 应用中，点击 … 按钮。
  2. 在销售渠道部分，轻触在线商店。
  3. 点击管理所有模板。
  4. 找到您要编辑的模板，然后轻触自定义。
  5. 点击 ⋮，然后点击模板设置。
  6. 点击品牌信息。
  7. 可选：输入有关您的品牌或企业的标题。
  8. 可选：输入有关您的品牌或企业的描述。
  9. 可选：在图片区域，添加图片或使用免费图片：
    • 若要添加图片，请点击选择图片，然后添加新图片或现有图片：
      • 若要使用已上传到 Shopify 后台的图片，请选择图片，然后点击完成。
      • 若要使用本地设备中的图片，请点击添加图片。从本地设备中选择并添加图片，点击图片将其选中，然后点击完成。

- 若要使用免费图片，请点击浏览免费图片。找到图片，点击图片将其选中，然后点击完成。

  1. 可选：在图片宽度区域，将范围滑块滑动到所需的像素宽度。
  2. 点击保存。
  1. 在 Shopify 应用中，点击 ☰ 按钮。
  2. 在销售渠道部分，轻触在线商店。
  3. 点击管理所有模板。
  4. 找到您要编辑的模板，然后轻触自定义。
  5. 点击 ...，然后点击模板设置。
  6. 点击品牌信息。
  7. 可选：输入有关您的品牌或企业的标题。
  8. 可选：输入有关您的品牌或企业的描述。
  9. 可选：在图片区域，添加图片或使用免费图片：
    • 若要添加图片，请点击选择图片，然后添加新图片或现有图片：
      • 若要使用已上传到 Shopify 后台的图片，请选择图片，然后点击完成。
      • 若要使用本地设备中的图片，请点击添加图片。从本地设备中选择并添加图片，点击图片将其选中，然后点击完成。

- 若要使用免费图片，请点击浏览免费图片。找到图片，点击图片将其选中，然后点击完成。

  1. 可选：在图片宽度区域，将范围滑块滑动到所需的像素宽度。
  2. 点击 ✓。

社交媒体

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

步骤：

  1. 在 Shopify 后台中，转至在线商店 > 模板。
  2. 找到您要编辑的模板，然后点击自定义。
  3. 点击模板设置齿轮图标。
  4. 点击社交媒体。
  5. 若要添加社交媒体账户的链接，请在相关的社交媒体账户字段中输入您账户的网址。您需要输入完整链接，例如 https://instagram.com/shopify 或 https://tiktok.com/@shopify。
  6. 点击保存。
  1. 在 Shopify 应用中，点击 … 按钮。
  2. 在销售渠道部分，轻触在线商店。
  3. 点击管理所有模板。
  4. 找到您要编辑的模板，然后轻触自定义。
  5. 点击 ⋮，然后点击模板设置。
  6. 点击社交媒体。
  7. 若要添加社交媒体账户的链接，请在相关的社交媒体账户字段中输入您账户的网址。您需要输入完整链接，例如 https://instagram.com/shopify 或 https://tiktok.com/@shopify。
  8. 点击保存。
  1. 在 Shopify 应用中，点击 ☰ 按钮。
  2. 在销售渠道部分，轻触在线商店。
  3. 点击管理所有模板。
  4. 找到您要编辑的模板，然后轻触自定义。
  5. 点击 ...，然后点击模板设置。
  6. 点击社交媒体。
  7. 若要添加社交媒体账户的链接，请在相关的社交媒体账户字段中输入您账户的网址。您需要输入完整链接，例如 https://instagram.com/shopify 或 https://tiktok.com/@shopify。
  8. 点击 ✓。

搜索行为

在线商店包含预测搜索，可在客户开始在搜索字段中输入时显示建议。搜索建议可帮助客户阐明和细化他们的搜索查询，并为他们提供探索您在线商店的新路径。搜索建议还可以让客户快速浏览搜索匹配项，而无需离开当前页面来查看单独列出的搜索结果。

若要详细了解搜索建议的工作原理，请参阅预测搜索。

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

步骤：

  1. 在 Shopify 后台中，转至在线商店 > 模板。
  2. 找到您要编辑的模板，然后点击自定义。
  3. 点击模板设置齿轮图标。
  4. 点击搜索行为。
  5. 若要激活或停用搜索建议，请选择或取消选择启用搜索建议。
  6. 可选：若要在搜索建议中显示或隐藏产品厂商，请选择或取消选择显示产品厂商。
  7. 可选：若要在搜索建议中显示或隐藏产品价格，请选择或取消选择显示产品价格。
  8. 点击保存。
  1. 在 Shopify 应用中，点击 … 按钮。
  2. 在销售渠道部分，轻触在线商店。
  3. 点击管理所有模板。
  4. 找到您要编辑的模板，然后轻触自定义。
  5. 点击 ⋮，然后点击模板设置。
  6. 点击搜索行为。
  7. 若要激活或停用搜索建议，请选择或取消选择启用搜索建议。
  8. 可选：若要在搜索建议中显示或隐藏产品厂商，请选择或取消选择显示产品厂商。
  9. 可选：若要在搜索建议中显示或隐藏产品价格，请选择或取消选择显示产品价格。
  10. 点击保存。
  1. 在 Shopify 应用中，点击 ☰ 按钮。
  2. 在销售渠道部分，轻触在线商店。
  3. 点击管理所有模板。
  4. 找到您要编辑的模板，然后轻触自定义。
  5. 点击 ...，然后点击模板设置。
  6. 点击搜索行为。
  7. 若要激活或停用搜索建议，请选择或取消选择启用搜索建议。
  8. 可选：若要在搜索建议中显示或隐藏产品厂商，请选择或取消选择显示产品厂商。
  9. 可选：若要在搜索建议中显示或隐藏产品价格，请选择或取消选择显示产品价格。
  10. 点击 ✓。

货币格式

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

步骤：

  1. 在 Shopify 后台中，转至在线商店 > 模板。
  2. 找到您要编辑的模板，然后点击自定义。
  3. 点击模板设置齿轮图标。
  4. 点击货币格式。
  5. 若要显示货币代码，请选择显示货币代码。
  6. 点击保存。
  1. 在 Shopify 应用中，点击 … 按钮。
  2. 在销售渠道部分，轻触在线商店。
  3. 点击管理所有模板。
  4. 找到您要编辑的模板，然后轻触自定义。
  5. 点击 ⋮，然后点击模板设置。
  6. 点击货币格式。
  7. 若要显示货币代码，请选择显示货币代码。
  8. 点击保存。
  1. 在 Shopify 应用中，点击 ☰ 按钮。
  2. 在销售渠道部分，轻触在线商店。
  3. 点击管理所有模板。
  4. 找到您要编辑的模板，然后轻触自定义。
  5. 点击 ...，然后点击模板设置。
  6. 点击货币格式。
  7. 若要显示货币代码，请选择显示货币代码。
  8. 点击 ✓。

购物车

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

步骤：

  1. 在 Shopify 后台中，转至在线商店 > 模板。
  2. 找到您要编辑的模板，然后点击自定义。
  3. 点击模板设置齿轮图标。
  4. 点击购物车。
  5. 使用购物车类型下拉菜单，选择抽屉、页面或弹窗通知购物车样式。
  6. 可选：若要显示客户购物车中商品的厂商，请选择显示厂商。
  7. 可选：若要为客户提供可输入特殊请求或添加额外订单信息的文本框，请选择启用购物车备注。

  8. 可选：如果您选择抽屉作为购物车类型，则当购物车抽屉为空时，您可在其中显示产品系列：

    1. 在购物车抽屉区域，点击选择产品系列。
    2. 点击要显示的产品系列的名称，然后点击选择。

  9. 可选：如果您选择抽屉作为购物车类型，则可以执行以下步骤来更改购物车抽屉的配色方案：

    1. 在购物车抽屉 > 配色方案区域，点击更改。
    2. 选择要用于购物车抽屉的配色方案。

  10. 点击保存。

  1. 在 Shopify 应用中，点击 … 按钮。
  2. 在销售渠道部分，轻触在线商店。
  3. 点击管理所有模板。
  4. 找到您要编辑的模板，然后轻触自定义。
  5. 点击 ⋮，然后点击模板设置。
  6. 点击购物车。
  7. 从抽屉、页面或弹窗通知选项中选择购物车类型。
  8. 可选：若要显示客户购物车中商品的厂商，请选择显示厂商。
  9. 可选：若要为客户提供可输入特殊请求或添加额外订单信息的文本框，请选择启用购物车备注。

  10. 可选：如果您选择抽屉作为购物车类型，则当购物车抽屉为空时，您可在其中显示产品系列：

    1. 在购物车抽屉区域，点击选择产品系列。
    2. 点击要显示的产品系列的名称，然后点击完成。

  11. 可选：如果您选择抽屉作为购物车类型，则可以执行以下步骤来更改购物车抽屉的配色方案：

    1. 在购物车抽屉 > 配色方案区域，点击更改。
    2. 选择要用于购物车抽屉的配色方案，然后点击完成。

  12. 点击保存。

  1. 在 Shopify 应用中，点击 ☰ 按钮。
  2. 在销售渠道部分，轻触在线商店。
  3. 点击管理所有模板。
  4. 找到您要编辑的模板，然后轻触自定义。
  5. 点击 ...，然后点击模板设置。
  6. 点击购物车。
  7. 从抽屉、页面或弹窗通知选项中选择购物车类型。
  8. 可选：若要显示客户购物车中商品的厂商，请选择显示厂商。
  9. 可选：若要为客户提供可输入特殊请求或添加额外订单信息的文本框，请选择启用购物车备注。

  10. 可选：如果您选择抽屉作为购物车类型，则当购物车抽屉为空时，您可在其中显示产品系列：

    1. 在购物车抽屉区域，点击选择产品系列。
    2. 点击要显示的产品系列的名称，然后点击完成。

  11. 可选：如果您选择抽屉作为购物车类型，则可以执行以下步骤来更改购物车抽屉的配色方案：

    1. 在购物车抽屉 > 配色方案区域，点击更改。
    2. 选择要用于购物车抽屉的配色方案，然后点击完成。

  12. 点击 ✓。

自定义 CSS

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

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

详细了解如何将自定义 CSS 添加到模板。

模板风格

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

自定义模板时，请使用自己的设置替换模板风格设置。向模板应用模板风格时，当前设置（如颜色和版式）将会更改。

步骤：

  1. 在 Shopify 后台中，转至在线商店 > 模板。
  2. 找到您要编辑的模板，然后点击自定义。
  3. 点击模板设置齿轮图标。
  4. 点击模板风格。
  5. 选择要使用的模板风格，然后点击更改风格。
  6. 点击保存。
  1. 在 Shopify 应用中，点击 … 按钮。
  2. 在销售渠道部分，轻触在线商店。
  3. 点击管理所有模板。
  4. 找到您要编辑的模板，然后轻触自定义。
  5. 点击 ⋮，然后点击模板设置。
  6. 点击模板风格。
  7. 选择要使用的模板风格，然后点击完成。
  8. 点击保存。
  1. 在 Shopify 应用中，点击 ☰ 按钮。
  2. 在销售渠道部分，轻触在线商店。
  3. 点击管理所有模板。
  4. 找到您要编辑的模板，然后轻触自定义。
  5. 点击 ...，然后点击模板设置。
  6. 点击模板风格。
  7. 选择要使用的模板风格，然后点击完成。
  8. 点击 ✓。

撤销并重新进行更改

撤销按钮会撤销您最近的更改，恢复按钮会重新添加您撤销的更改。如果您多次点击撤销按钮，则会继续撤销您的工作，每次撤销一处更改。撤销和恢复按钮位于模板编辑器工具栏中。

模板编辑器工具栏中的“撤销”和“恢复”按钮

点击撤销按钮以撤销对模板所做的更改，包括以下示例：

  • 添加、重新排列和删除分区
  • 应用颜色、字体和其他模板设置
  • 重置模板风格

准备好开始使用 Shopify 进行销售了吗？

免费试用