模板设置

您可以使用模板设置来更改在线商店的版式、颜色、社交媒体链接和结账设置。

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

颜色

您可以为在线商店设置主要和辅助配色方案。

自定义颜色设置

  1. 点击模板设置
  2. 点击颜色
  3. 若要打开颜色选择器,请点击要更改的内容类型颜色的颜色样本。

  4. 点击保存

若要详细了解颜色选项,包括如何设置颜色渐变,请参阅颜色方案

版式

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

建议您在商店中使用系统字体。使用系统字体可避免在客户的计算机上下载新字体,从而避免对您的商店加载速度产生负面影响。客户的计算机上显示的字体取决于其操作系统。

自定义字体设置

  1. 点击模板设置
  2. 点击 Typography(字体)。
  3. 对于每种类型的文本,点击更改以使用字体选择器。
  4. 使用搜索字段或点击加载更多来浏览可用字体。
  5. 点击要使用的字体的名称,然后点击选择
  6. 点击保存

自定义字体大小

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

步骤:

  1. 点击模板设置 > 版式
  2. 若要更改标题的默认字体大小,请使用字体大小比例标尺来选择默认字体大小。最小字体大小为 100%,最大字体大小为 150%。该比例标尺每增加一个单位可使字体大小增大 5%。默认设置为 100%。
  3. 若要更改正文文本的默认字体大小,请使用字体大小比例标尺来选择默认字体大小。最小字体大小为 100%,最大字体大小为 130%。该比例标尺每增加一个单位可使字体大小增大 5%。默认设置为 100%。
  4. 点击保存

布局

通过布局,您可以设置在线商店的最大显示宽度。

  1. 点击模板设置 > 布局
  2. 使用范围滑块在 1000px 或 1600px 的页面宽度之间选择。默认设置为 1600px。
  3. [可选] 使用范围滑块在分区之间添加垂直空间。您可以在分区之间最多添加 100px。
  4. [可选] 如果您有网格布局,请使用水平空间垂直空间范围滑块在网格内容之间添加空间。添加水平空间最多会向行添加 40px 的空间,而添加垂直空间最多会向列添加 40px 的空间。
  5. 点击保存

边框和阴影

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

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

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

阴影的选项包括:

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

按钮

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

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

自定义按钮

  1. 点击模板设置
  2. 点击按钮
  3. 使用滑尺更改按钮边框的外观。
  4. 使用滑尺更改按钮的阴影。将阴影不透明度设置为 0% 可去除阴影。
  5. 点击保存

多属性椭圆形框

多属性椭圆形框允许您在产品页面或特色产品分区中显示产品的不同属性。客户可以选择所需的多属性,以将产品添加到购物车,而无需更改产品页面。

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

自定义多属性椭圆形框

  1. 点击模板设置
  2. 点击多属性椭圆形框
  3. 使用滑尺更改多属性椭圆形框的边框的外观。
  4. 使用滑尺更改多属性椭圆形框的阴影。将阴影不透明度设置为 0% 可去除阴影。
  5. 点击保存

输入

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

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

自定义输入

  1. 点击模板设置
  2. 点击输入
  3. 使用滑尺更改输入边框的外观。
  4. 使用滑尺更改输入的阴影。将阴影不透明度设置为 0% 可去除阴影。
  5. 点击保存

卡片是分区中的一些分隔,可显示多个项目,例如产品卡、博客卡、产品系列卡或拼贴卡。您可以自定义分区卡的形状、样式、颜色、对齐方式和图片填充。

自定义卡

  1. 点击模板设置
  2. 点击
  3. 使用下拉菜单选择卡样式
  4. 使用滑尺添加图片填充。这会在卡图片周围添加空间。
  5. 使用下拉菜单来设置卡的文本对齐方式。在左对齐、居中(默认)或右对齐之间选择。
  6. 使用下拉菜单为卡选择配色方案
  7. 使用滑尺更改卡边框的外观。
  8. 使用滑尺更改卡的阴影。将阴影不透明度设置为 0% 可去除阴影。
  9. 点击保存

内容容器

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

自定义内容容器

  1. 点击模板设置
  2. 点击内容容器
  3. 使用滑尺更改内容容器的边框的外观。
  4. 使用滑尺更改内容容器的阴影。将阴影不透明度设置为 0% 可去除阴影。
  5. 点击保存

媒体

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

自定义媒体文件

  1. 点击模板设置
  2. 点击媒体文件
  3. 使用滑尺更改媒体文件边框的外观。
  4. 使用滑尺更改媒体文件的阴影。将阴影不透明度设置为 0% 可去除阴影。
  5. 点击保存

下拉菜单和弹出窗口

调整导航下拉菜单、弹出模态窗口和购物车弹出窗口的外观。

自定义下拉菜单和弹出窗口

  1. 点击模板设置
  2. 点击下拉菜单和弹出窗口
  3. 使用滑尺更改边框的外观。
  4. 使用滑尺更改阴影。将阴影不透明度设置为 0% 可去除阴影。
  5. 点击保存

抽屉

抽屉是隐藏的交互式容器,会在轻触或点击时显示和消失,例如可折叠的导航菜单或筛选选项。

自定义抽屉

  1. 点击模板设置
  2. 点击抽屉
  3. 使用滑尺更改边框的外观。
  4. 使用滑尺更改阴影。将阴影不透明度设置为 0% 可去除阴影。
  5. 点击保存

徽章

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

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

PageBlog 徽章会显示在相关的搜索结果中。您可以自定义这些徽章的位置和形状,但不能自定义颜色。

自定义徽章

  1. 点击模板设置
  2. 点击徽章
  3. 使用下拉菜单选择徽章在产品卡中的位置。在左上方、右上方、左下方(默认)或右下方之间选择。
  4. 使用角半径滑尺添加圆角。将角半径设置为 0px 可生成方形徽章边角,而增加半径范围会使徽章边角变为圆角。
  5. 为徽章选择配色方案。您可以为售罄商品设置替代配色方案。
  6. 点击保存

图标

图标是可添加到某些分区或块的小图片。在“模板”设置中设置图标的配色方案。

包含可折叠行中的图标的在线商店示例

自定义图标

  1. 点击模板设置
  2. 点击图标
  3. 使用下拉菜单选择图标的默认颜色。在“主题色 1”、“主题色 2”、“轮廓”按钮或商店图标的文本颜色之间选择。
  4. 点击保存

社交媒体

您可以为产品和博客文章添加社交共享按钮以及转至您社交媒体账户的链接。 转至您社交媒体账户的链接显示在您的在线商店的页脚中。

自定义社交媒体设置

  1. 点击模板设置
  2. 点击社交媒体
  3. 若要添加指向您社交媒体账户的链接,请在“账户”下提供的字段中输入指向您账户的链接。请输入完整链接,例如 https://instagram.com/shopifyhttps://twitter.com/shopify
  4. 点击保存

搜索行为

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

您可以自定义以下搜索设置:

  • 启用产品建议 - 启用或禁用产品建议。
  • 显示供应商 - 在产品建议中显示或隐藏供应商。
  • 显示价格 - 在产品建议中显示或隐藏价格。

更改搜索输入设置

  1. 点击模板设置
  2. 点击搜索输入
  3. 使用设置来自定义商店的搜索行为。
  4. 点击保存

要了解有关产品建议的工作原理的详细信息,请参阅预测搜索

网站图标

您可以添加帮助您建立在线商店品牌的网站图标。网站图标会显示在以下位置:

  • 您的 Web 浏览器选项卡
  • 您的 Web 浏览器历史记录
  • 桌面上的图标
  • 添加为书签后,会显示在您的在线商店名称旁

详细了解网站图标

自定义您的网站图标

  1. 点击模板设置
  2. 点击网站图标
  3. Favicon image(网站图标图片)区域中,点击选择图片,然后执行以下一项操作:

    • 若要使用已上传到 Shopify 后台的图片,请点击图片将其选中,然后点击选择
    • 若要使用本地计算机的图片,请点击上传。从计算机中选择图片,然后点击打开以开始上传。上传完成后,系统会自动选择该图片。请点击选择
    • 若要选择免费图片,请点击免费图片,然后搜索或点击图片将其选中。
  4. 将替代文本添加到网站图标图片:

    1. 点击编辑替代文本。
    2. 编辑图片窗口中,输入该图片的简要说明。
    3. 点击保存

货币格式

您可以选择使产品、购物车和结账价格始终显示货币代码。

  1. 点击模板设置
  2. 点击货币格式
  3. 若要启用货币代码,请点击显示货币代码复选框。
  4. 点击保存

购物车

您可以更改在线商店中购物车的样式。当客户将您商店中的产品添加到购物车时,购物车可以显示为抽屉、页面或弹窗通知。当客户的购物车为空时,您可以在购物车抽屉中显示特色产品系列。

步骤:

  1. 点击模板设置 > 购物车
  2. 使用下拉菜单选择购物车样式:抽屉、页面或弹窗通知。
  3. 可选:若要显示客户购物车中商品的厂商,请点击显示厂商
  4. 可选:若要提供可供客户提出特殊请求或添加额外订单信息的区域,请选择启用购物车备注选项。

如果您将购物车类型设置为抽屉,则可以在购物车抽屉中显示一个产品系列。所选产品系列仅在购物车为空时显示。

若要将产品系列添加到空的购物车抽屉中,请点击选择产品系列。选择产品系列后,点击更改可选择其他产品系列或从购物车抽屉中删除该产品系列。您还可以点击创建产品系列来创建新的产品系列。点击此按钮后,您将退出模板设置并转到 Shopify 后台的产品系列区域。

结账

此分区使您可以自定义商店的结账。有关商店结账页面的详细信息,请参阅 Shopify 结账

更改模板风格

模板风格是模板设计人员选择的一组设置。您可将模板风格应用于商店,为商店提供精美外观。默认情况下,所有模板都应用了模板风格。自定义模板时,请使用自己的设置替换模板风格设置。向模板应用模板风格时,当前设置(如颜色和版式)将会更改。

步骤:

  1. 点击模板设置 > 样式

  2. 使用下拉菜单,选择您的模板风格选项。可用选项取决于您使用的模板。

  3. 点击保存

撤销并重新进行更改

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

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

点击撤销按钮以撤销以下更改:

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

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

免费试用