模板设置

您可以使用模板编辑器侧边栏菜单中的自定义模板设置来更改在线商店的排版、颜色、社交媒体链接和购物车页面。模板设置的变更会适用于整个在线商店。

分区和区块也有您可以调整的设置,用以自定义模板的各个分区。详细了解分区和区块

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

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

自定义 logo

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

步骤:

桌面
  1. 在 Shopify 后台中,转至在线商店 > 模板

  2. 找到您要编辑的模板,然后点击自定义

  3. 点击模板设置图标。

  4. 点击 logo

  5. logo 区域,添加图片或使用免费图片:

    • 若要添加图片,请点击选择图片,然后添加新图片或现有图片:

      • 若要使用已上传到 Shopify 后台的图片,请选择图片,然后点击完成
      • 若要使用本地计算机中的图片,请点击添加图片。选择并添加图片,然后点击完成
    • 若要使用免费图片,请点击浏览免费图片。找到图片,点击图片将其选中,然后点击选择

  6. 可选:为 logo 图片添加替代文本:

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

  8. 点击保存

iPhone
  1. Shopify 应用中,轻触 菜单图标。

  2. 销售渠道部分,点击在线商店

  3. 点击管理所有模板

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

  5. 点击 ,然后点击模板设置

  6. 点击 logo

  7. logo 区域,添加图片或使用免费图片:

    • 若要添加图片,请点击选择图片,然后添加新图片或现有图片:

      • 若要使用已上传到 Shopify 后台的图片,请选择图片,然后点击完成
      • 若要使用本地设备中的图片,请点击添加图片。从本地设备中选择并添加图片,点击图片将其选中,然后点击完成
    • 若要使用免费图片,请点击浏览免费图片。找到图片,点击图片将其选中,然后点击完成

  8. 可选:为 logo 图片添加替代文本:

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

  10. 轻触

Android
  1. Shopify 应用中,轻触 菜单图标。

  2. 销售渠道部分,点击在线商店

  3. 点击管理所有模板

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

  5. 点击 ...,然后点击模板设置

  6. 点击 logo

  7. logo 区域,添加图片或使用免费图片:

    • 若要添加图片,请点击选择图片,然后添加新图片或现有图片:

      • 若要使用已上传到 Shopify 后台的图片,请选择图片,然后点击完成
      • 若要使用本地设备中的图片,请点击添加图片。从本地设备中选择并添加图片,点击图片将其选中,然后点击完成
    • 若要使用免费图片,请点击浏览免费图片。找到图片,点击图片将其选中,然后点击完成

  8. 可选:为 logo 图片添加替代文本:

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

  10. 轻触

添加网站图标

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

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

详细了解网站图标

步骤:

桌面
  1. 在 Shopify 后台中,转至在线商店 > 模板

  2. 找到要添加网站图标的模板,然后点击自定义

  3. 点击模板设置图标。

  4. 根据您的模板版本,请点击 logo网站图标

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

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

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

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

iPhone
  1. Shopify 应用中,轻触 菜单图标。

  2. 销售渠道部分,点击在线商店

  3. 点击管理所有模板

  4. 找到要添加网站图标的模板,然后点击自定义

  5. 点击 ,然后点击模板设置

  6. 根据您的模板版本,请轻触 logo网站图标

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

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

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

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

Android
  1. Shopify 应用中,轻触 菜单图标。

  2. 销售渠道部分,点击在线商店

  3. 点击管理所有模板

  4. 找到要添加网站图标的模板,然后点击自定义

  5. 点击 ...,然后点击模板设置

  6. 根据您的模板版本,请轻触 logo网站图标

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

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

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

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

颜色

您可以在模板设置中定义不同的配色方案,并使用配色方案选择器将它们应用于整个在线商店中的不同分区。配色方案是一组颜色。您的模板会应用一组默认配色方案,您随时可在模板编辑器中进行更改。您可以添加品牌颜色,以确保在整个在线商店中应用一致的调色板。

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

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

配色方案

配色方案是一种以视觉表现方式对元素及其相应颜色进行分组的模板设置。在配色方案选择器可用时,您可以在一个可应用于您整个模板的一致配色方案中为不同元素应用不同的颜色。您最多可有 21 种配色方案。您还可以在配色方案预览中预览配色的呈现效果。

您可在模板编辑器中应用于配色方案的不同设置的列表。
设置描述
背景颜色将应用于某些分区的背景和轮廓按钮背景。
背景渐变渐变色将应用于某些分区的背景。背景渐变将在所有适用位置替换背景。
文本颜色将应用于分区或块文本。
实心按钮背景颜色将应用于主按钮背景。
实心按钮标签颜色将应用于主按钮文本。
轮廓按钮颜色将应用于辅助按钮文本和边框。
阴影颜色将应用于阴影。

管理配色方案

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

  • 颜色名称,例如 redblackblue
  • RGB 颜色代码。
  • 十六进制颜色值。

步骤:

  1. 在 Shopify 后台中,转至在线商店 > 模板

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

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

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

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

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

  7. 点击保存

应用配色方案

在模板设置中定义配色方案后,您可以在模板的分区和块中使用配色方案选择器分配配色方案。配色方案选择器仅适用于某些分区、块和通用模板设置。

配色方案选择器

渐变

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

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

设置渐变效果

  1. 在 Shopify 后台中,转至在线商店 > 模板

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

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

  4. 方案部分,点击要编辑的现有方案。

  5. 点击渐变色样本选项,例如背景渐变

  6. 如果您之前未设置渐变,则系统会显示一些预设选项供您选择。您可以选择任何预设的渐变以打开选项面板。

  7. 选择您的渐变选项:

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

在模板编辑器中选择渐变

使用 CSS 设置渐变

大多数 CSS background 属性值都可用于设置背景色。您可以将此字段用于显示纯色(例如 #000000blackrgb(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))。渐变也可以重复。

步骤:

  1. 在 Shopify 后台中,转至在线商店 > 模板

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

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

  4. 方案部分,点击要编辑的现有方案。

  5. 点击要编辑的渐变。

  6. 点击渐变旁边的箭头,然后选择 CSS

  7. CSS 代码字段中,键入或粘贴您的渐变代码。模板编辑器预览会在相应位置显示您的渐变。

  8. 点击保存

模板编辑器中的“渐变 CSS 代码”字段

删除渐变

  1. 在 Shopify 后台中,转至在线商店 > 模板

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

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

  4. 方案部分,点击要编辑的现有方案。

  5. 点击要删除的渐变。

  6. 点击删除渐变

  7. 点击保存

版式

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

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

自定义字体大小

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

步骤:

桌面
  1. 在 Shopify 后台中,转至在线商店 > 模板

  2. 找到您要编辑的模板,然后点击自定义

  3. 点击模板设置图标。

  4. 点击 Typography(字体)。

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

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

  7. 点击保存

iPhone
  1. Shopify 应用中,轻触 菜单图标。

  2. 销售渠道部分,点击在线商店

  3. 点击管理所有模板

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

  5. 点击 ,然后点击模板设置

  6. 点击版式

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

  8. 点击要使用的字体的名称,然后点击完成

  9. 轻触

Android
  1. Shopify 应用中,轻触 菜单图标。

  2. 销售渠道部分,点击在线商店

  3. 点击管理所有模板

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

  5. 点击 ...,然后点击模板设置

  6. 点击版式

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

  8. 点击要使用的字体的名称,然后点击完成

  9. 轻触

自定义字体大小

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

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

步骤:

桌面
  1. 在 Shopify 后台中,转至在线商店 > 模板

  2. 找到您要编辑的模板,然后点击自定义

  3. 点击模板设置图标。

  4. 点击 Typography(字体)。

  5. 若要更改标题文本的默认字体大小,请使用字体大小比例标尺范围滑块来选择默认字体大小。

  6. 若要更改正文文本的默认字体大小,请使用字体大小比例标尺范围滑块来选择默认字体大小。

  7. 点击保存

iPhone
  1. Shopify 应用中,轻触 菜单图标。

  2. 销售渠道部分,点击在线商店

  3. 点击管理所有模板

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

  5. 点击 ,然后点击模板设置

  6. 点击版式

  7. 若要更改标题文本的默认字体大小,请使用字体大小比例标尺范围滑块来选择默认字体大小。

  8. 若要更改正文文本的默认字体大小,请使用字体大小比例标尺范围滑块来选择默认字体大小。

  9. 轻触

Android
  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. 点击保存

iPhone
  1. Shopify 应用中,轻触 菜单图标。

  2. 销售渠道部分,点击在线商店

  3. 点击管理所有模板

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

  5. 点击 ,然后点击模板设置

  6. 点击布局

  7. 使用页面宽度范围滑块选择 1000 px 到 1600 px 之间的页面宽度。默认设置为 1600 px。

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

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

  10. 轻触保存

Android
  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. 点击保存

iPhone
  1. Shopify 应用中,轻触 菜单图标。

  2. 销售渠道部分,点击在线商店

  3. 点击管理所有模板

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

  5. 点击 ,然后点击模板设置

  6. 点击动画

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

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

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

Android
  1. Shopify 应用中,轻触 菜单图标。

  2. 销售渠道部分,点击在线商店

  3. 点击管理所有模板

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

  5. 点击 ...,然后点击模板设置

  6. 点击动画

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

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

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

视觉元素的自定义设置

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

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

  • 按钮:按钮包括幻灯片或文本图片等分区中的行动号召按钮,以及产品页面和购物车页面上联系表单中的按钮。

  • 多属性椭圆形框:多属性椭圆形框让您能够在产品页面或精选产品区展示产品的多属性。客户可以选择所需的多属性,以将产品添加到购物车,而无需改换产品页面。您可以自定义多属性椭圆形框在您在线商店中的显示方式。

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

  • 通过产品卡、产品系列卡和博客卡的设置,您可以自定义每种类型的卡在页面分区中的显示样式。 - 产品卡:产品卡在模板中列出多个产品的区域中展示产品相关信息,例如产品系列页面模板、产品系列分区和搜索结果。 - 产品系列卡:产品系列卡会在模板中列出产品系列的区域中(例如产品系列列表模板或分区)展示产品系列相关信息。 - 博客卡:博客卡会在模板中列有多款产品的区域内展示有关您博客文章的信息,例如博客模板、博客分区和搜索结果。

  • 内容容器:容器适用于内容分区的文本元素,例如幻灯片、图片横幅或多列分区中每一列的文本框。您可以自定义在线商店的内容容器的外观。

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

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

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

  • 徽章:当产品降价或库存为 0 时,系统会自动为产品图片添加促销售罄徽章。您可以在模板设置中,单独调整促销售罄徽章的位置、形状和颜色。页面博客徽章会显示在相关的搜索结果中。您可以自定义这些徽章的位置和形状,但无法更改页面博客徽章的颜色。

  • 品牌信息:您可以在您的在线商店中添加品牌相关信息。完成以下步骤后,您可以在您的在线商店的页脚中添加品牌信息区块。

步骤:

桌面
  1. 在 Shopify 后台中,转至在线商店 > 模板

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

  3. 点击 设置 图标。

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

  5. 调整任何可用的设置。您可以在预览窗口中浏览模板的不同区域,以此来查看更改内容。

  6. 点击保存

iPhone
  1. Shopify 应用中,轻触 菜单图标。

  2. 销售渠道部分,点击在线商店

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

  4. 轻触 设置 图标。

  5. 轻触元素即可打开设置。

  6. 调整任何可用的设置。您可以在预览窗口中浏览模板的不同区域,以此来查看更改内容。

  7. 轻触

Android
  1. Shopify 应用中,轻触 菜单图标。

  2. 销售渠道部分,点击在线商店

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

  4. 轻触 设置 图标。

  5. 轻触元素即可打开设置。

  6. 调整任何可用的设置。您可以在预览窗口中浏览模板的不同区域,以此来查看更改内容。

  7. 轻触

社交媒体

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

步骤:

桌面
  1. 在 Shopify 后台中,转至在线商店 > 模板

  2. 找到您要编辑的模板,然后点击自定义

  3. 点击模板设置图标。

  4. 点击社交媒体

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

  6. 点击保存

iPhone
  1. Shopify 应用中,轻触 菜单图标。

  2. 销售渠道部分,点击在线商店

  3. 点击管理所有模板

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

  5. 点击 ,然后点击模板设置

  6. 点击社交媒体

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

  8. 轻触

Android
  1. Shopify 应用中,轻触 菜单图标。

  2. 销售渠道部分,点击在线商店

  3. 点击管理所有模板

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

  5. 点击 ...,然后点击模板设置

  6. 点击社交媒体

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

  8. 轻触

搜索行为

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

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

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

步骤:

桌面
  1. 在 Shopify 后台中,转至在线商店 > 模板

  2. 找到您要编辑的模板,然后点击自定义

  3. 点击模板设置图标。

  4. 点击搜索行为

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

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

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

  8. 点击保存

iPhone
  1. Shopify 应用中,轻触 菜单图标。

  2. 销售渠道部分,点击在线商店

  3. 点击管理所有模板

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

  5. 点击 ,然后点击模板设置

  6. 点击搜索行为

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

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

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

  10. 轻触

Android
  1. Shopify 应用中,轻触 菜单图标。

  2. 销售渠道部分,点击在线商店

  3. 点击管理所有模板

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

  5. 点击 ...,然后点击模板设置

  6. 点击搜索行为

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

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

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

  10. 轻触

货币格式

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

步骤:

桌面
  1. 在 Shopify 后台中,转至在线商店 > 模板

  2. 找到您要编辑的模板,然后点击自定义

  3. 点击模板设置图标。

  4. 点击货币格式

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

  6. 点击保存

iPhone
  1. Shopify 应用中,轻触 菜单图标。

  2. 销售渠道部分,点击在线商店

  3. 点击管理所有模板

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

  5. 点击 ,然后点击模板设置

  6. 点击货币格式

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

  8. 轻触

Android
  1. Shopify 应用中,轻触 菜单图标。

  2. 销售渠道部分,点击在线商店

  3. 点击管理所有模板

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

  5. 点击 ...,然后点击模板设置

  6. 点击货币格式

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

  8. 轻触

购物车

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

步骤:

桌面
  1. 在 Shopify 后台中,转至在线商店 > 模板

  2. 找到您要编辑的模板,然后点击自定义

  3. 点击模板设置图标。

  4. 点击购物车

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

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

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

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

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

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

iPhone
  1. Shopify 应用中,轻触 菜单图标。

  2. 销售渠道部分,点击在线商店

  3. 点击管理所有模板

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

  5. 点击 ,然后点击模板设置

  6. 点击购物车

  7. 抽屉页面弹窗通知选项中选择购物车类型

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

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

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

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

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

Android
  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. 点击保存

iPhone
  1. Shopify 应用中,轻触 菜单图标。

  2. 销售渠道部分,点击在线商店

  3. 点击管理所有模板

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

  5. 点击 ,然后点击模板设置

  6. 点击模板风格

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

  8. 轻触

Android
  1. Shopify 应用中,轻触 菜单图标。

  2. 销售渠道部分,点击在线商店

  3. 点击管理所有模板

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

  5. 点击 ...,然后点击模板设置

  6. 点击模板风格

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

  8. 轻触

没有找到您需要的答案?我们将为您提供帮助。