模板设置

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

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

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

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

自定义 logo

自定义 logo 宽度

  1. 点击模板设置
  2. 点击 logo
  3. 台式设备 logo 宽度区域中,将滑块滑动到所需的像素宽度。

网站图标

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

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

详细了解网站图标

自定义您的网站图标

颜色

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

自定义颜色设置

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

版式

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

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

自定义字体设置

自定义字体大小

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

步骤:

布局

通过使用布局,您可以设置在线商店的最大显示宽度,以及设置分区之间的垂直和水平间距。

动画

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

步骤:

  1. 在 Shopify 后台中,转至在线商店 > 模板
  2. 在要自定义的模板旁边,点击自定义
  3. 点击模板设置,然后点击动画
  4. 可选:若要激活可在滚动时显示在线商店分区的动画,请选择在滚动时显示分区
  5. 可选:若要为卡和按钮添加悬停效果动画,请从悬停效果设置中选择以下一个选项:

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

边框和阴影

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

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

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

阴影的选项包括:

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

按钮

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

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

自定义按钮

带样本的多属性选项

包含可选样本选项的在线商店示例

样本是产品多属性的可视化表示形式。若要显示样本,您需要最新版本的 Dawn 并将类别元字段连接到您的多属性。通过使用 Dawn,多属性选项可以显示为下拉菜单或样本。如果您要将多属性选项显示为样本,则可以选择将这些样本显示为圆形、样本或“无”(这会将选项值显示为文本)。

样本的 Dawn 设置示例

使用类别元字段设置样本

  1. 在 Shopify 后台中,转至产品
  2. 点击产品。
  3. 产品组织部分,在产品类别字段中输入产品类别,然后从产品类别列表中选择最准确的结果。产品类别必须包含颜色类别元字段。
  4. 多属性部分,点击添加尺寸或颜色等选项
  5. 点击颜色
  6. 点击添加颜色字段,然后从下拉菜单中选择任何默认颜色条目。
  7. 若要添加自定义颜色条目,请执行以下操作:

    1. 点击添加颜色,然后点击添加新条目
    2. 添加条目页面上,填写标签颜色字段。
    3. 如果要使用图案而不是颜色,请填写图片字段。如果您同时添加颜色和图片,则图片将被用于样本。
    4. 选择基础颜色基础图案
    5. 点击保存
  8. 点击保存以保存您的产品。

在 Dawn 中自定义样本

  1. 在 Shopify 后台中,转至在线商店 > 模板
  2. 请确保您已安装最新版本的 Dawn,然后点击自定义
  3. 导航到您要添加颜色选项的产品。
  4. 可选:若要自定义样本,请点击多属性选择器块。通过在圆形方形之间选择,您可以更改样本的显示。
  5. 点击保存以保存该模板。

多属性椭圆形框

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

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

自定义多属性椭圆形框

输入

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

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

自定义输入

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

自定义卡

内容容器

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

自定义内容容器

媒体

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

自定义媒体文件

下拉菜单和弹出窗口

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

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

抽屉

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

自定义抽屉

徽章

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

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

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

自定义徽章

图标

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

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

自定义图标

品牌信息

您可以包含有关您品牌的信息。您可以在页脚中添加品牌信息块。

自定义品牌信息

社交媒体

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

自定义社交媒体设置

搜索行为

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

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

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

更改搜索输入设置

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

货币格式

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

购物车

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

步骤:

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

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

结账

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

更改模板风格

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

步骤:

撤销并重新进行更改

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

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

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

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

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

免费试用