自定义模板设置

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

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

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

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

自定义您的 logo

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

步骤:

台式电脑
  1. From your Shopify admin, go to Online Store.

  2. 找到要编辑的模板,然后点击编辑模板

  3. 点击模板设置 settings 图标。

  4. 点击 Logo

  5. Logo 区域,添加您的图片或使用免费图片:

    • 若要添加您的图片,请点击 选择图片,然后添加新图片或现有图片:
      • 若要使用已上传到 Shopify 后台的图片,请选择该图片,然后点击完成
      • 若要使用本地计算机中的图片,请点击添加图片。选择并添加图片,然后点击完成
    • 若要使用免费图片,请点击浏览免费图片。查找图片,点击图片以将其选中,然后点击选择
  6. 可选:将替代文本添加到您的 logo 图片:

    1. Logo 区域,点击编辑
    2. 替代文本字段中,输入图片的简要描述。
    3. 点击保存
  7. 可选:在桌面 logo 宽度区域,使用范围滑块调整 logo 的像素宽度。

  8. 点击保存

移动设备
  1. Shopify 应用中,轻触 Menu 图标。

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

  3. 轻触管理所有模板

  4. 找到要编辑的模板,然后轻触编辑模板

  5. 轻触 水平菜单垂直菜单,然后轻触模板设置

  6. 轻触 Logo

  7. Logo 区域,添加您的图片或使用免费图片:

    • 若要添加您的图片,请轻触 选择图片,然后添加新图片或现有图片:
      • 若要使用已上传到 Shopify 后台的图片,请选择该图片,然后轻触完成
      • 若要使用本地设备中的图片,请轻触添加图片。从本地设备中选择并添加图片,轻触图片以将其选中,然后轻触完成
    • 若要使用免费图片,请轻触浏览免费图片。查找图片,轻触图片以将其选中,然后轻触完成
  8. 可选:将替代文本添加到您的 logo 图片:

    1. Logo 区域,轻触编辑
    2. 替代文本字段中,输入图片的简要描述。
    3. 轻触保存
  9. 可选:在桌面 logo 宽度区域,使用范围滑块调整 logo 的像素宽度。

  10. 轻触保存

添加网站图标

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

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

详细了解网站图标

步骤:

台式电脑
  1. From your Shopify admin, go to Online Store.

  2. 找到您要为其添加网站图标的模板,然后点击编辑模板

  3. 点击模板设置 settings 图标。

  4. 根据您的模板版本,点击 LogoFavicon

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

    • 若要选择已上传到 Shopify 后台的图片,您可以搜索或找到该图片,然后使用复选框将其选中。
    • 若要从本地计算机中选择图片,请点击添加图片,从本地计算机中打开图片,然后使用复选框将其选中。
  6. 点击完成

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

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

移动设备
  1. Shopify 应用中,轻触 Menu 图标。

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

  3. 轻触管理所有模板

  4. 找到您要为其添加网站图标的模板,然后轻触编辑模板

  5. 轻触 水平菜单垂直菜单,然后轻触模板设置

  6. 根据您的模板版本,轻触 LogoFavicon

  7. 网站图标图片部分,轻触选择图片,然后添加新图片或现有图片:

    • 若要选择已上传到 Shopify 后台的图片,您可以搜索或找到该图片,然后使用复选框将其选中。
    • 若要从本地设备中选择图片,请轻触添加图片,从本地设备中打开图片,然后使用复选框将其选中。
  8. 轻触完成

  9. 为您的网站图标图片添加替代文本:

    1. 网站图标图片部分,轻触编辑
    2. 替代文本字段中,输入图片的简要描述。
    3. 轻触保存
  10. 轻触保存

颜色

模板的颜色设置控制着在线商店使用的颜色。您可以在模板设置的颜色部分配置模板的整体颜色。根据模板的不同,可通过以下任一颜色系统来管理颜色: ​

  • Horizon 4.0.0 及更新版本等较新模板中提供了调色板。调色板是一组命名的品牌颜色,可应用于整个模板。分区和区块可能会有一个颜色输入字段,您可以用该字段将调色板颜色覆盖为自定义颜色,或更改所分配的调色板颜色。
  • 大多数模板均提供配色方案,例如 Horizon 4.0.0 发布之前的所有免费 Shopify 模板。配色方案是一组不同的颜色(如背景色、文本颜色和按钮颜色),您可以将其应用至在线商店中的各个分区。您可以在模板设置中创建多个配色方案。

管理调色板

调色板是在模板编辑器中跨多项设置重复使用颜色的快捷方式。在调色板中更改颜色时,使用该颜色的所有设置都会动态更新为新颜色。这也意味着,当您想多次使用某种颜色时,无需记住十六进制代码。

模板编辑器中的调色板

步骤:

台式电脑
  1. From your Shopify admin, go to Online Store.

  2. 在要编辑的模板旁边,点击编辑模板

  3. 点击 模板设置 图标,然后点击颜色

  4. 颜色部分中,点击 + 以选择要添加到调色板的颜色。

  5. 可选:如要移除调色板中不再需要的颜色,请执行以下操作:

    1. 点击该颜色,然后点击删除颜色
    2. 选择一种替代颜色,在模板中使用该颜色的任何位置替换已被删除的颜色。
    3. 点击确认
  6. 点击保存

移动设备
  1. Shopify 应用中,轻触 菜单,然后轻触 设置 设置

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

  3. 轻触管理所有模板

  4. 找到要编辑的模板,然后轻触编辑模板

  5. 轻触 水平菜单垂直菜单,然后轻触模板设置

  6. 轻触颜色

  7. 颜色部分中,轻触 + 以选择要添加到调色板的颜色。

  8. 可选:如要移除调色板中不再需要的颜色,请执行以下操作:

    1. 轻触该颜色,然后轻触删除颜色
    2. 选择一种替代颜色,在模板中使用该颜色的任何位置替换已被删除的颜色。
    3. 轻触确认
  9. 轻触保存

管理配色方案

您可以在模板设置中创建新的配色方案、删除配色方案或管理配色方案中的颜色。在模板编辑器中,您最多可使用 21 种配色方案。

步骤:

  1. From your Shopify admin, go to Online Store.

  2. 在要自定义的模板旁边,点击编辑模板

  3. 点击 设置 图标,然后点击颜色

  4. 方案部分,点击现有方案或点击添加方案以添加新的配色方案。

  5. 点击您要更改的内容类型的颜色样本。

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

  7. 点击保存

排版

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

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

自定义字体类型

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

步骤:

台式电脑
  1. From your Shopify admin, go to Online Store.

  2. 找到要编辑的模板,然后点击编辑模板

  3. 点击模板设置 settings 图标。

  4. 点击排版

  5. 若要更改商店标题或正文文本的字体类型,请在标题正文分区中点击更改

  6. 点击要使用的字体的名称,然后点击选择

  7. 点击保存

移动设备
  1. Shopify 应用中,轻触 Menu 图标。

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

  3. 轻触管理所有模板

  4. 找到要编辑的模板,然后轻触编辑模板

  5. 轻触 水平菜单垂直菜单,然后轻触模板设置

  6. 轻触排版

  7. 若要更改商店标题或正文文本的字体类型,请在标题正文分区中轻触更改

  8. 轻触要使用的字体的名称,然后轻触完成

  9. 轻触保存

自定义字号

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

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

步骤:

台式电脑
  1. From your Shopify admin, go to Online Store.

  2. 找到要编辑的模板,然后点击编辑模板

  3. 点击模板设置 settings 图标。

  4. 点击排版

  5. 若要更改标题文本的默认字号,请使用字号缩放比例范围滑块选择默认字号。

  6. 若要更改正文文本的默认字号,请使用字号缩放比例范围滑块选择默认字号。

  7. 点击保存

移动设备
  1. Shopify 应用中,轻触 Menu 图标。

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

  3. 轻触管理所有模板

  4. 找到要编辑的模板,然后轻触编辑模板

  5. 轻触 水平菜单垂直菜单,然后轻触模板设置

  6. 轻触排版

  7. 若要更改标题文本的默认字号,请使用字号缩放比例范围滑块选择默认字号。

  8. 若要更改正文文本的默认字号,请使用字号缩放比例范围滑块选择默认字号。

  9. 轻触保存

布局

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

步骤:

台式电脑
  1. From your Shopify admin, go to Online Store.

  2. 找到要编辑的模板,然后点击编辑模板

  3. 点击模板设置 settings 图标。

  4. 点击布局

  5. 使用页面宽度范围滑块选择介于 1000 像素和 1600 像素之间的页面宽度。默认设置为 1600 像素。

  6. 可选:使用范围滑块在您的页面上添加垂直模板分区之间的间距。您最多可以在分区之间添加 100 像素的间距。

  7. 可选:如果您的布局为网格,则使用水平间距垂直间距范围滑块在页面上的网格内容之间添加间距。添加水平间距将为页面上的内容行添加最多 40 像素的间距,而添加垂直间距将为页面上的内容列添加最多 40 像素的间距。

  8. 点击保存

移动设备
  1. Shopify 应用中,轻触 Menu 图标。

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

  3. 轻触管理所有模板

  4. 找到要编辑的模板,然后轻触编辑模板

  5. 轻触 水平菜单垂直菜单,然后轻触模板设置

  6. 轻触布局

  7. 使用页面宽度范围滑块选择介于 1000 像素和 1600 像素之间的页面宽度。默认设置为 1600 像素。

  8. 可选:使用范围滑块在您的页面上添加垂直模板分区之间的间距。您最多可以在分区之间添加 100 像素的间距。

  9. 可选:如果您的布局为网格,则使用水平间距垂直间距范围滑块在页面上的网格内容之间添加间距。添加水平间距将为页面上的内容行添加最多 40 像素的间距,而添加垂直间距将为页面上的内容列添加最多 40 像素的间距。

  10. 轻触保存

动画

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

步骤:

台式电脑
  1. From your Shopify admin, go to Online Store.

  2. 找到要编辑的模板,然后点击编辑模板

  3. 点击模板设置 settings 图标。

  4. 点击动画

  5. 可选:若要激活在滚动时显示在线商店分区的动画,请选择滚动时显示分区

  6. 可选:若要为您的卡片和按钮添加悬停效果动画,请从悬停效果设置中选择以下选项之一:

    • 垂直提升:当客户将鼠标悬停在卡片或按钮上时,该元素会向上移动。
    • 3D 提升:当客户将鼠标悬停在卡片或按钮上时,该元素会向前移动,从而产生 3D 效果。元素上还会出现划过的细微光泽,从而为其增添了另一层维度。
  7. 点击保存

移动设备
  1. Shopify 应用中,轻触 Menu 图标。

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

  3. 轻触管理所有模板

  4. 找到要编辑的模板,然后轻触编辑模板

  5. 轻触 水平菜单垂直菜单,然后轻触模板设置

  6. 轻触动画

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

  8. 可选:若要为您的卡片和按钮添加悬停效果动画,请从悬停效果设置中选择以下选项之一:

    • 垂直提升:当客户将鼠标悬停在卡片或按钮上时,该元素会向上移动。
    • 3D 提升:当客户将鼠标悬停在卡片或按钮上时,该元素会向前移动,从而产生 3D 效果。元素上还会出现划过的细微光泽,从而为其增添了另一层维度。
  9. 轻触保存

视觉元素自定义设置

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

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

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

步骤:

台式电脑
  1. From your Shopify admin, go to Online Store.

  2. 在要编辑的模板旁边,点击编辑模板

  3. 点击 设置 图标。

  4. 点击一个元素以打开设置。

  5. 调整任何可用设置。您可以通过在预览窗口中导航到模板的不同区域来查看更改。

  6. 点击保存

移动设备
  1. Shopify 应用中,轻触 Menu 图标。

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

  3. 在要编辑的模板旁边,轻触编辑模板

  4. 轻触 设置 图标。

  5. 轻触一个元素以打开设置。

  6. 调整任何可用设置。您可以通过在预览窗口中导航到模板的不同区域来查看更改。

  7. 轻触保存

社交媒体

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

步骤:

台式电脑
  1. From your Shopify admin, go to Online Store.

  2. 找到要编辑的模板,然后点击编辑模板

  3. 点击模板设置 settings 图标。

  4. 点击社交媒体

  5. 若要添加社交媒体账户的链接,请在相关的社交账户字段中输入您账户的网站地址。您需要输入完整链接,例如 https://instagram.com/shopifyhttps://tiktok.com/@shopify

  6. 点击保存

移动设备
  1. Shopify 应用中,轻触 Menu 图标。

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

  3. 轻触管理所有模板

  4. 找到要编辑的模板,然后轻触编辑模板

  5. 轻触 水平菜单垂直菜单,然后轻触模板设置

  6. 轻触社交媒体

  7. 若要添加社交媒体账户的链接,请在相关的社交账户字段中输入您账户的网站地址。您需要输入完整链接,例如 https://instagram.com/shopifyhttps://tiktok.com/@shopify

  8. 轻触保存

搜索行为

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

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

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

步骤:

台式电脑
  1. From your Shopify admin, go to Online Store.

  2. 找到要编辑的模板,然后点击编辑模板

  3. 点击模板设置 settings 图标。

  4. 点击搜索行为

  5. 若要激活或停用搜索建议,请选中或取消选中启用搜索建议

  6. 可选:若要在搜索建议中显示或隐藏产品厂商,请选中或取消选中显示产品厂商

  7. 可选:若要在搜索建议中显示或隐藏产品价格,请选中或取消选中显示产品价格

  8. 点击保存

移动设备
  1. Shopify 应用中,轻触 Menu 图标。

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

  3. 轻触管理所有模板

  4. 找到要编辑的模板,然后轻触编辑模板

  5. 轻触 水平菜单垂直菜单,然后轻触模板设置

  6. 轻触搜索行为

  7. 若要激活或停用搜索建议,请选中或取消选中启用搜索建议

  8. 可选:若要在搜索建议中显示或隐藏产品厂商,请选中或取消选中显示产品厂商

  9. 可选:若要在搜索建议中显示或隐藏产品价格,请选中或取消选中显示产品价格

  10. 轻触保存

货币格式

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

步骤:

台式电脑
  1. From your Shopify admin, go to Online Store.

  2. 找到要编辑的模板,然后点击编辑模板

  3. 点击模板设置 settings 图标。

  4. 点击货币格式

  5. 若要显示货币代码,请选中显示货币代码

  6. 点击保存

移动设备
  1. Shopify 应用中,轻触 Menu 图标。

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

  3. 轻触管理所有模板

  4. 找到要编辑的模板,然后轻触编辑模板

  5. 轻触 水平菜单垂直菜单,然后轻触模板设置

  6. 轻触货币格式

  7. 若要显示货币代码,请选中显示货币代码

  8. 轻触保存

购物车

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

步骤:

台式电脑
  1. From your Shopify admin, go to Online Store.

  2. 找到要编辑的模板,然后点击编辑模板

  3. 点击模板设置 settings 图标。

  4. 点击购物车

  5. 使用购物车类型下拉菜单选择抽屉页面弹出式通知购物车样式。

  6. 可选:若要显示客户购物车中商品的厂商,请选中显示厂商

  7. 可选:若要为客户提供一个文本框,供他们输入特殊请求或添加额外的订单信息,请选中启用购物车备注

  8. 可选:如果选择抽屉作为购物车类型,则可在购物车抽屉为空时显示产品系列:

    1. 购物车抽屉区域,点击选择产品系列
    2. 点击要显示的产品系列的名称,然后点击选择
  9. 可选:如果选择抽屉作为购物车类型,则可以执行以下步骤来更改购物车抽屉的配色方案:

    1. 购物车抽屉 > 配色方案 区域中,点击 更改
    2. 为您的购物车抽屉选择要使用的配色方案。
  10. 点击保存

移动设备
  1. Shopify 应用中,轻触 Menu 图标。

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

  3. 轻触管理所有模板

  4. 找到要编辑的模板,然后轻触编辑模板

  5. 轻触 水平菜单垂直菜单,然后轻触模板设置

  6. 轻触 购物车

  7. 抽屉页面弹出式通知 选项中选择您的 购物车类型

  8. 可选:若要显示客户购物车中商品的厂商,请选中显示厂商

  9. 可选:若要为客户提供一个文本框,供他们输入特殊请求或添加额外的订单信息,请选中启用购物车备注

  10. 可选:如果选择抽屉作为购物车类型,则可在购物车抽屉为空时显示产品系列:

    1. 购物车抽屉 区域中,轻触 选择产品系列
    2. 轻触要显示的产品系列的名称,然后轻触 完成
  11. 可选:如果选择抽屉作为购物车类型,则可以执行以下步骤来更改购物车抽屉的配色方案:

    1. 购物车抽屉 > 配色方案 区域中,轻触 更改
    2. 为您的购物车抽屉选择要使用的配色方案,然后轻触 完成
  12. 轻触保存

自定义 CSS

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

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

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

模板风格

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

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

步骤:

台式电脑
  1. From your Shopify admin, go to Online Store.

  2. 找到要编辑的模板,然后点击编辑模板

  3. 点击模板设置 settings 图标。

  4. 点击 模板风格

  5. 选择要使用的模板风格,然后点击 更改风格

  6. 点击保存

移动设备
  1. Shopify 应用中,轻触 Menu 图标。

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

  3. 轻触管理所有模板

  4. 找到要编辑的模板,然后轻触编辑模板

  5. 轻触 水平菜单垂直菜单,然后轻触模板设置

  6. 轻触 模板风格

  7. 选择要使用的模板风格,然后轻触 完成

  8. 轻触保存