Express 分区

模板内容是使用分区生成的。分区是可自定义的内容块,可决定在线商店中不同页面的布局和外观。您可以使用更新的模板编辑器来添加、删除、编辑和自定义分区。

Shopify 的模板包含以下分区类型:

  • 静态分区:显示在您在线商店中的预定地点的分区。无法删除或重新排列此类分区。静态分区可能包括产品页面和产品系列页面等页面上的标头、页脚、网站地图分区或内容分区。例如,产品分区决定在线商店中每个产品页面的外观。
  • 动态分区:可选分区,可用于自定义主页的布局。在商店主页上,您可以添加重新排列删除动态分区以创建页面布局。您的主页上最多可以包含 25 个动态分区。

您可以了解 Express 的独特分区选择以及如何对它们进行自定义以适用于您的业务。

提示 如果使用来自 Shopify 的免费模板,那么您可以通过参阅来自 Shopify 的免费模板以及单击模板的名称来查看此模板的分区和设置的详细信息。

若要了解付费模板的分区和设置,请参阅模板 文档

静态分区

Express 包括以下静态分区:

动态分区

Express 包括以下动态分区:

标头

模板的标头是显示在您商店中每个页面顶部的分区。

您可以在标头中自定义以下项目:

  • logo
  • 公告栏
  • 菜单
  • 搜索
  • 标头样式

您可以将自定义 logo 图片添加到商店的标头中。最佳格式是具有透明背景的 .png 文件。Logo 的最大宽度为 180px。您可以通过增加或缩小宽度来调整 logo 图片的大小。

如果您不添加 logo 图片,则您的商店名称将显示为文本。您可以在 Shopify 后台的通用设置页面上更改您的商店名称。

  • 自定义 logo 宽度:logo 的宽度。 - logo 对齐方式:logo 在标头中的对齐方式。选择左对齐居中
  1. 点击标头。2. 在 logo 图片区域,点击选择图片,然后执行以下操作之一:* 若要选择已上传到 Shopify 后台的图片,请单击选项卡。* 若要从本地计算机选择图片,请点击 > 上传。3. 使用设置来自定义 logo 的尺寸和位置。4. 点击保存

添加公告栏

您可以在标头中添加公告栏,以便使用该栏向客户显示消息。您的消息是可以自定义的,并且可以包含联系信息、有关商店活动或促销的信息,或者商店的标语。

  1. 单击标头
  2. 公告栏区域中,选中显示公告
  3. 输入您的公告的文本。
  4. 可选:输入 URL 以添加您的公告链接。(版本 1.11.0+
  5. 可选:在图标菜单中,选择要在公告栏中显示的图标。此图标使用与公告文本相同的颜色。
  6. 若要更改公告栏的背景色,请单击颜色样本并选择颜色。
  7. 若要更改公告文本的颜色,请单击文本颜色样本并选择颜色。
  8. 点击保存

添加菜单

您可以向标头添加菜单。这会在标头中显示菜单的所有链接,您可以使用这些链接突出显示客户想访问的常用页面。例如,您可以添加包含产品系列链接的菜单。

  1. 单击标头

  2. 若要选择菜单,请点击更改。从列表中选择菜单,或点击创建菜单来创建新菜单。

  3. 若要编辑菜单,请点击编辑菜单

  4. 点击保存

启用搜索

您可以向标头添加搜索选项,以便客户可以在您的商店中快速找到商品。

  1. 单击标头
  2. 勾选显示搜索
  3. 点击保存

对标头使用辅助颜色

您可以选择启用辅助背景和文本颜色以在标头中使用辅助背景和文本颜色

页脚

模板的页脚是显示在商店中每个页面底部的分区。 您可以向页脚中添加以下功能:

  • 付款图标
  • 菜单
  • 新闻通讯注册
  • 包含有关您业务的信息的文本分区
  • 社交媒体图标
  • 语言选择器

添加付款图标

您可以在页脚中显示您接受的付款方式的图标。此区域会显示与您在后台的付款设置部分中启用的支付服务提供商相关联的图标。

  1. 单击页脚

  2. 查看显示付款图标

  3. 点击保存

添加菜单、新闻通讯注册或文本

  1. 单击页脚

  2. 若要添加内容块,请点击内容区域中的添加内容。从以下选项中选择块的类型:

- [Menu](/manual/online-store/os/menus-and-links)

- [Newsletter](/manual/online-store/os/using-themes/change-the-layout/theme-settings/theme-newsletter)

- Text

您最多可以添加 4 个内容块。

若要删除内容块,请单击该块,然后单击删除内容

若要自定义内容块,请单击该块并编辑设置。

  1. 点击保存

提示:您可以通过使用每个块的拖放名称 ⋮⋮ 来重新排列此分区中的块。

添加社交媒体图标

  1. 单击模板设置

  2. 单击社交媒体

    1. 若要上传 社交分享图片,请在社交分享图片区域,单击选择图片浏览免费图片
  3. 若要在产品和博客文章中添加社交分享按钮,请选中以下任一选项或所有选项:

- 在 Facebook 上共享 - 在 Twitter 上发推文 - Pin on Pinterest(固定在 Pinterest 上)(不适用于共享博客文章)

  1. 若要添加您的社交媒体账户的链接,请在账户下提供的字段中输入指向您账户的链接。输入完整的链接,例如 https://instagram.com/shopifyhttps://twitter.com/shopify

    1. 若要更改分享按钮的样式,请从按钮样式菜单中选择完全品牌化仅 Logo
  2. 点击保存

添加语言选择器

如果您已启用多种商店语言,则应仅添加语言选择器。

  1. 单击分区

  2. 单击页脚

  3. 语言选择器下,选择显示语言选择器

  4. 点击保存

产品

当买家点击特色产品系列中的产品时,产品页面就会显示。其中显示了产品的描述、价格、多属性和图片。您可以选择是将用户定向到新页面,还是在主页上的叠加中显示产品详细信息。此设置由您的模板设置控制。启用以叠加方式显示产品页面时,从特色产品系列中选择产品便会以得加叠加的形式显示产品页面。

如果您已启用到店取货,并且已禁用以叠加方式显示产品页面,则此分区还会显示产品的取货服务提供情况

产品分区包括以下设置:

  • 显示数量选择器 - 让用户指定要添加到购物车的数量。
  • 显示厂商 - 在产品页面显示产品品牌或厂商。若要显示品牌或厂商,您需要向产品添加厂商
  • 显示动态结账按钮 - 让客户跳过购物车并直接从特色产品分区转到结账页面。
  • 在叠加页面中显示产品页面 - 选择此选项可在当前页面上方的叠加页面中显示产品详细信息。选择特色产品系列中的产品时,便会显示此叠加页面。
  • 显示社交分享按钮 - 显示客户可用于在社交媒体上分享您的产品的按钮。这些按钮由您的模板设置控制。

编辑产品设置

  1. 单击产品
  2. 使用设置来自定义您的产品页面。
  3. 点击保存

显示取货服务提供情况

版本 1.11.0+

通过使用 Express,您可以向客户展示您在线商店中的产品是否支持到店取货。在每个产品页面上,“取货服务提供情况”分区会显示产品是否支持到店取货以及预计的取货时间范围。只有禁用以叠加方式显示产品页面时,此信息才会显示。

若要使用此功能,您必须设置到店取货。启用到店取货后,此功能将始终显示在您的产品页面上,并且无法禁用。

启用到店取货后,产品页面会显示产品是否支持在某个到店取货地点取货。只有满足以下条件的产品才会显示此信息:在至少一个取货地点有库存,且在产品多属性详细信息的发货部分中选择了需要运输

若要对产品多属性选择需要运输,请执行以下操作:

  1. 在 Shopify 后台中,转到产品 > 所有产品

  2. 选择产品。

  3. 多属性下,选择一个多属性。

  4. 发货下,选中需要运输

  5. 点击保存

如果您只为一个地点启用了到店取货,则会显示该地点及其取货服务提供情况。客户可点击查看商店信息详细了解取货地点。

如果您为多个地点启用了到店取货,则“取货服务提供情况”分区会根据客户 IP 地址显示距离客户最近的取货地点及其取货服务提供情况。当客户点击查看其他商店的供货情况时,取货地点列表会根据与客户的距离排序。

如果无法根据客户的 IP 地址确定客户的地点,则“取货服务提供情况”分区会显示按字母顺序(首先按城市名,然后按地点名)排在首位的地点及其取货服务提供情况。例如,假设您有三个取货地点:多伦多的“Queen Street”、多伦多的“Front Street”和温哥华的“Alberni Street”。“取货服务提供情况”分区将显示多伦多“Queen Street”的详细信息。

产品推荐

您可以在产品页面上展示推荐产品,让客户更轻松地发现其他可能感兴趣的产品。

如果为您的产品页面启用了在叠加页面中显示产品页面,从此部分进行访问时,产品会显示在当前页面上方的叠加页面中。

启用产品推荐

  1. 选择产品页面

  2. 点击产品推荐分区。

  3. 选中显示动态建议以在产品页面上显示产品推荐。

  4. 可选:若要更改推荐产品上方显示的标题,请在标题字段中输入新标题。

    1. 可选:如果您想让客户直接从产品推荐部分将产品添加到购物车,请选择启用“快速购买”按钮
    2. 可选:若要在产品描述中显示或隐藏供应商,请使用显示供应商复选框。
  5. 点击保存

产品系列模板

产品系列模板分区是产品系列页面中可以自定义的主要分区。

产品系列模板分区包括以下设置:

  • 显示产品系列图片 - 在产品系列页面顶部显示产品系列图片。
  • 显示产品系列描述 - 在产品系列页面顶部显示产品系列描述。(版本 1.11.0+
  • 显示产品厂商 - 在产品卡上显示产品品牌或厂商。

自定义您的产品系列页面

  1. 选择产品系列
  2. 点击产品系列模板分区。
  3. 使用设置来对您的产品系列模板分区进行自定义。
  4. 点击保存

横幅

版本 1.11.0+

您创建的横幅可以包含自定义图片、文本和链接到商店中其他位置的按钮。您可以使用横幅来突出显示您的品牌、展示特定产品系列或宣传促销活动。

设置

  • 图片 - 添加要包含在分区中的图片。您可以上传图片、使用先前上传的图片或从 Burst 中选择免费的库存图片。
  • 标题 - 向横幅添加主要文本。
  • 标题大小 - 选择标题文本的大小。
  • 描述 - 向横幅添加描述。
  • 按钮标签 - 添加您希望在按钮上显示的文本。
  • 按钮链接 - 设置您希望按钮链接到的 URL 或页面。粘贴 URL 或从菜单中选择一个页面。如果您不想在横幅中包含按钮,请将此字段留空。

布局选项

  • 横幅高度 - 选择横幅分区的高度。
  • 横幅宽度 - 选择横幅分区的宽度。
  • 图片对齐方式 - 选择分区中图片的对齐方式。
  • 文本框对齐方式 - 选择分区中文本框的对齐方式。

    如果文本框为左对齐或右对齐,则文本将为左对齐。如果文本框居中对齐,则文本也将居中对齐。

颜色设置

  • 文本框背景 - 选择文本框的颜色。
  • 文本 - 选择横幅中标题和按钮的颜色。横幅描述使用模板的正文文本颜色,可在模板设置中修改此颜色。

添加横幅分区

  1. 点击添加分区
  2. 点击横幅,然后点击选择
  3. 使用设置来对您的横幅分区进行自定义。
  4. 点击保存

特色产品系列

您可以在主页的单个分区中显示多个产品系列。产品系列以选项卡的形式显示,客户可在其中进行导航。

当客户将特色产品系列中的一件或多件产品添加到他们的购物车时,添加到购物车的产品数量会显示为产品的徽章。

包含多个产品系列的特色产品系列分区。产品系列名称在分区顶部显示形式为可单击的选项卡。

特色产品系列分区包括以下设置:

  • 产品系列 - 选择要包含在特色产品系列部分中的产品系列。
  • 产品系列列表大小 - 选择默认显示的产品数量。此设置适用于特色产品系列分区中的所有产品系列。 - 小型 - 6 件产品

    • 中型 - 18 件产品
    • 大型 - 36 件产品
  • 图片样式 - 为产品系列中的产品图片选择图片裁剪样式。此设置适用于分区中的所有产品系列。

  • 启用“快速购买”按钮 - 添加一个选项,让客户直接从特色产品系列分区将产品添加到购物车。

  • 显示产品系列图片 - 在特色产品系列标签顶部显示产品系列图片。(版本 1.11.0+

  • 显示产品系列描述 - 在特色产品系列标签顶部显示产品系列描述。(版本 1.11.0+

提示:当客户从特色产品系列部分点击产品时,可以在主页上的叠加中打开它。若要了解详细信息,请参阅更改产品页面样式

向主页添加特色产品系列分区

  1. 点击添加分区
  2. 点击特色产品系列,然后点击选择
  3. 在内容区域中,选择一个产品系列块或单击添加产品系列
  4. 单击选择产品系列
  5. 产品系列列表中,选择要在选项卡中显示的产品系列,然后点击选择

    若要添加产品系列,请单击添加产品系列链接以在新选项卡中打开创建产品系列页面。

    若要添加或删除所选产品系列中的产品,请单击编辑产品系列链接在新选项卡中打开产品系列页面。

  6. 重复上述步骤,向该分区添加更多产品系列。

  7. 点击保存

提示:若要更改分区中产品系列选项卡的顺序,请重新排列内容区域中的产品系列。点击产品系列的 ⋮⋮ 图标,然后将该块拖动到其他位置。

特色产品

您可以在主页上突出展示产品。突出展示产品是推销新产品或促销产品的有效方法。客户可以使用图片下方的左右箭头查看其他产品图片。

特色产品分区包括以下设置:

  • 产品 - 选择要在主页上特别展示的产品。
  • 显示数量选择器 - 让用户指定要添加到购物车的数量。
  • 显示供应商 - 在特色产品分区展示产品品牌或供应商。若要显示品牌或供应商,您需要向产品添加供应商
  • 显示动态结账按钮 - 让客户跳过购物车并直接从特色产品分区转到结账页面。
  • 显示社交分享按钮 - 显示客户可用于在社交媒体上分享您的产品的按钮。这些按钮由您的模板设置控制。
  • 图片样式 - 选择是否向您的特色产品图片添加正方形或圆形裁剪样式。

添加特色产品分区

  1. 点击添加分区
  2. 单击特色产品,然后单击选择
  3. 使用设置来自定义您的特色产品分区。
  4. 点击保存

自定义内容

自定义内容分区中,您可以将多个内容块组合在一起。您可以调整每个块的宽度和对齐方式,以形成自定义布局。

自定义内容分区包括以下设置:

  • 标题 - 分区的标题。

  • 移动布局 - 从移动设备中查看您的商店时所呈现的块的布局。从以下选项中进行选择:

    • 网格 - 宽度为 50% 以下的块在同一行中显示。宽度超过 50% 的容器则在其各自的行中显示。
    • 堆栈 - 每个块都在各自的行中显示。
    • 滑块 - 各个块折叠成一个幻灯片样式的分区。客户可以点击导航箭头来查看其他块。

您可以从以下块类型中进行选择。

提示:您可以通过使用每个块的拖放名称 ⋮⋮ 来重新排列此分区中的块。

自定义内容块类型
块类型 设置
文本

标题 - 向文本块添加标题。

文本 - 添加自定义文本并设置格式。

按钮标签 - 向块中添加带文本标签的按钮。

按钮链接 - 添加您希望在按钮上显示的文本。

文本大小 - 设置文本的大小。

容器宽度 - 设置块的宽度。

垂直对齐 - 将块中的内容设置为垂直位置。

水平对齐 - 设置内容在块中的水平位置。

图片

图片 - 添加要在块中显示的图片。您可以上传图片、使用先前上传的图片或从 Burst 中选择免费的库存图片。

容器宽度 - 设置块的宽度。

垂直对齐 - 将块中的内容设置为垂直位置。

产品

产品 - 选择要在块中突出展示的产品。会显示产品名称、图片和价格。如果产品没有图片,产品标题会显示在该块中。

容器宽度 - 设置块的宽度。

垂直对齐 - 将块中的内容设置为垂直位置。

如果为您的产品页面启用了在叠加页面中显示产品页面,从此部分访问时,产品会显示在当前页面上方的叠加页面中。

收藏

产品系列 - 选择要在块中突出展示的产品。系统会显示产品系列的标题和配图。如果没有配图,则会显示产品系列中第一个产品的图片。如果产品系列中的产品没有图片,产品系列标题会显示在该块中。

容器宽度 - 设置块的宽度。

垂直对齐 - 将块中的内容设置为垂直位置。

菜单

菜单 - 选择要在块中显示的菜单。

标题 - 为菜单添加标题。

容器宽度 - 设置块的宽度。

垂直对齐 - 将块中的内容设置为垂直位置。

水平对齐 - 设置内容在块中的水平位置。

向主页添加自定义内容

  1. 单击 Add section(添加分区)。

  2. 点击自定义内容,然后点击选择

  3. 选择并配置要包含在分区中的内容块。

  4. 点击保存

带文本图片

通过 Express,您可以在图片的右侧或左侧添加显示文本的图片。您还可以添加链接到其他页面的按钮。

您可以使用带有文本的图片分区来宣传特定产品或产品系列。

带文本图片分区包括以下设置:

  • 图片 - 添加要包含在分区中的图片。您可以上传图片、使用先前上传的图片或从 Burst 中选择免费的库存图片。
  • 标题 - 添加与图片配对的主要文本。
  • 文本 - 添加与图片配对的辅助文本。此文本显示在标题文本下方。
  • 按钮标签 - 添加您希望在按钮上显示的文本。
  • 按钮链接 - 设置您希望按钮链接到的 URL 或页面。粘贴 URL 或从菜单中选择一个页面。如果您不想在分区中包含按钮,请将此字段留空。

布局选项

  • 桌面 - 在从台式机查看时,选择分区中的图片显示在左侧还是右侧。若要在左侧显示图片,请先选择图片在前
  • 移动 - 选择从移动设备查看时,分区中的图片是首先显示还是第二显示。
  • 辅助背景 - 选择是否向该分区添加辅助背景颜色。选择部分可将背景颜色添加到分区的前 3/5。该颜色可以在模板设置中进行修改。
  • 文本大小 - 选择分区中标题和文本的相对大小。
  • 保持图片比 - 选择此选项以防止裁剪所选图片。如果未选中此选项,图片将裁剪为正方形。
  • 启用辅助文本颜色 - 选择此选项即可使用标题和文本的辅助背景文本颜色。该颜色可以在模板设置中进行修改。

向主页添加带文本图片分区

  1. 点击添加分区
  2. 单击带文本图片,然后单击选择
  3. 图片区域中,单击选择图片,然后执行以下操作之一:- 若要选择已上传到 Shopify 后台的图片,请单击选项卡。
  4. 若要从 Burst 中选择库存图片,请单击免费图片选项卡。您可在此处输入搜索词,或浏览图片类别。
  5. 若要从本地计算机选择图片,请点击选项卡,然后点击上传

  6. 使用设置来自定义分区。

  7. 点击保存

多列

版本 1.11.0+

使用 Express,您可以添加包含多列内容的分区。您最多可以向每个多列分区添加四列。

多列分区包括以下设置:

列设置

  • 图片 - 向列添加图片
  • 标题 - 向该列添加主要文本。
  • 文本 - 向列添加辅助文本。

分区设置

  • 标题 - 为分区添加主要文本。
  • 按钮标签 - 添加您希望在按钮上显示的文本。
  • 按钮链接 - 设置您希望按钮链接到的 URL 或页面。粘贴 URL 或从菜单中选择一个页面。如果您不想在分区中包含按钮,请将此字段留空。

布局选项

  • 对齐方式 - 选择每列元素的对齐方式。
  • 移动布局 - 选择分区中的列在移动设备上是堆叠显示还是在网格中显示。
  • 图片大小 - 选择列中图片的大小。
  • 保持图片比 - 选择此选项以防止裁剪所选图片。如果未选中此选项,图片将被裁剪为正方形。
  • 启用辅助背景和文本颜色 - 选择此选项可对标题和文本使用辅助背景文本颜色,以及对分区使用辅助背景颜色。可以在模板设置中修改这些颜色。

向主页添加多列分区

  1. 点击添加分区
  2. 点击多列,然后点击“选择”。
  3. 点击添加列以向该分区添加列。
  4. 点击内容分区中的列,向该列添加内容。
  5. 使用设置来自定义分区。
  6. 点击保存

页面

版本 1.10.0+

您可以在主页上展示页面的富文本内容。您可以使用此部分来显示商店政策页面或关于我们页面的内容。

即使应用了其他模板,此分区也始终使用默认页面模板。例如,如果您向该分区添加了一个使用 page.contact联系我们页面模板,该模板中的交互式字段便不会显示在主页上。您添加到该页面的标题内容框的任何信息都将显示在该分区中。

将“页面”分区添加到主页

  1. 点击添加分区
  2. 点击页面,然后点击选择
  3. 页面区域中,点击选择页面
  4. 选择要显示其内容的页面,然后点击选择。您只能从当前可见的页面中进行选择。如果您需要创建新页面,请选择创建页面
  5. 点击保存

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

免费试用