Express 分区

分区是可以在您的在线商店上确定不同页面布局的可自定义内容块。

  • 主页分区包括多种功能(例如幻灯片或新闻资讯注册),您可以添加、重新排列或删除这些功能。主页上最多可以有 25 个分区。

  • 每种类型的页面都有自己的分区。例如,产品页面的分区决定了在线商店上每个产品页面的布局。

  • 页面上的各分区始终位于在线商店的特定位置。您可以对它们进行自定义,但不能重新排列或删除它们。

  • 每个模版包括固定分区(例如页眉和页脚),在线商店的每个页面上都会显示这些分区。

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

标头

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

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

  • logo
  • 公告栏
  • 菜单
  • 搜索

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

  1. 单击 分区 旁边的自定义

  2. 单击标头

  3. logo 图片区域中,单击选择图片,然后执行以下操作之一:

- 若要选择已上传到 Shopify 后台的图片,请单击选项卡。 - 若要使用 Burst 中的免费图库图片,请单击免费图片。 - 若要从本地计算机选择图片,请依次单击 > 上传

  1. 使用自定义 logo 宽度滑块,自定义 logo 宽度。

  2. 单击保存

添加公告栏

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

<div class="section-tag-block">
  <div class="sections-menu"><ul class="in-page-menu in-page-menu--horizontal"><li class="js-is-active"><a href="#" class="desktop marketing-button marketing-button--small">桌面</a></li><li class=""><a href="#" class="iphone marketing-button marketing-button--small">iPhone</a></li><li class=""><a href="#" class="android marketing-button marketing-button--small">Android</a></li></ul></div><div class="desktop active changeable-content"><ol>
<li>在 Shopify 后台中,转到<strong>在线商店</strong> &gt; <strong>模版</strong>。
</li></ol></div><div class="iphone changeable-content"><ol>
<li>在 <a href="https://www.shopify.com/install/detect">Shopify 应用</a>中,点击<strong>商店</strong>。
</li><li>在<strong>销售渠道</strong>部分,点击<strong>在线商店</strong>。
</li><li>点击<strong>管理模板</strong>。
</li></ol></div><div class="android changeable-content"><ol>
<li>在 <a href="https://www.shopify.com/install/detect">Shopify 应用</a>中,点击<strong>商店</strong>。
</li><li>在<strong>销售渠道</strong>部分,点击<strong>在线商店</strong>。
</li><li>点击<strong>管理模板</strong>。
</li></ol></div>
</div>



1. 单击 **分区** 旁边的**自定义**。
  1. 单击分区

  2. 单击标头

  3. 公告栏区域中,选中显示公告

  4. 文本字段中输入公告的文本。

    1. 可选:在图标菜单中,选择要在公告栏中显示的图标。此图标使用与公告文本相同的颜色。
  5. 若要更改公告栏的背景色,请单击颜色样本并选择颜色。

  6. 若要更改公告文本的颜色,请单击文本颜色样本并选择颜色。

  7. 单击保存

添加菜单

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

<div class="section-tag-block">
  <div class="sections-menu"><ul class="in-page-menu in-page-menu--horizontal"><li class="js-is-active"><a href="#" class="desktop marketing-button marketing-button--small">桌面</a></li><li class=""><a href="#" class="iphone marketing-button marketing-button--small">iPhone</a></li><li class=""><a href="#" class="android marketing-button marketing-button--small">Android</a></li></ul></div><div class="desktop active changeable-content"><ol>
<li>在 Shopify 后台中,转到<strong>在线商店</strong> &gt; <strong>模版</strong>。
</li></ol></div><div class="iphone changeable-content"><ol>
<li>在 <a href="https://www.shopify.com/install/detect">Shopify 应用</a>中,点击<strong>商店</strong>。
</li><li>在<strong>销售渠道</strong>部分,点击<strong>在线商店</strong>。
</li><li>点击<strong>管理模板</strong>。
</li></ol></div><div class="android changeable-content"><ol>
<li>在 <a href="https://www.shopify.com/install/detect">Shopify 应用</a>中,点击<strong>商店</strong>。
</li><li>在<strong>销售渠道</strong>部分,点击<strong>在线商店</strong>。
</li><li>点击<strong>管理模板</strong>。
</li></ol></div>
</div>



1. 单击 **分区** 旁边的**自定义**。
  1. 单击标头

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

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

  4. 单击保存

启用搜索

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

<div class="section-tag-block">
  <div class="sections-menu"><ul class="in-page-menu in-page-menu--horizontal"><li class="js-is-active"><a href="#" class="desktop marketing-button marketing-button--small">桌面</a></li><li class=""><a href="#" class="iphone marketing-button marketing-button--small">iPhone</a></li><li class=""><a href="#" class="android marketing-button marketing-button--small">Android</a></li></ul></div><div class="desktop active changeable-content"><ol>
<li>在 Shopify 后台中,转到<strong>在线商店</strong> &gt; <strong>模版</strong>。
</li></ol></div><div class="iphone changeable-content"><ol>
<li>在 <a href="https://www.shopify.com/install/detect">Shopify 应用</a>中,点击<strong>商店</strong>。
</li><li>在<strong>销售渠道</strong>部分,点击<strong>在线商店</strong>。
</li><li>点击<strong>管理模板</strong>。
</li></ol></div><div class="android changeable-content"><ol>
<li>在 <a href="https://www.shopify.com/install/detect">Shopify 应用</a>中,点击<strong>商店</strong>。
</li><li>在<strong>销售渠道</strong>部分,点击<strong>在线商店</strong>。
</li><li>点击<strong>管理模板</strong>。
</li></ol></div>
</div>



1. 单击 **分区** 旁边的**自定义**。
  1. 单击分区

  2. 单击标头

  3. 勾选显示搜索

页脚

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

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

显示两个文本块和新闻通讯注册的网站页脚部分。

添加付款图标

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

  1. 单击 分区 旁边的自定义

  2. 单击分区

  3. 单击页脚

  4. 查看显示付款图标

  5. 单击保存

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

<div class="section-tag-block">
  <div class="sections-menu"><ul class="in-page-menu in-page-menu--horizontal"><li class="js-is-active"><a href="#" class="desktop marketing-button marketing-button--small">桌面</a></li><li class=""><a href="#" class="iphone marketing-button marketing-button--small">iPhone</a></li><li class=""><a href="#" class="android marketing-button marketing-button--small">Android</a></li></ul></div><div class="desktop active changeable-content"><ol>
<li>在 Shopify 后台中,转到<strong>在线商店</strong> &gt; <strong>模版</strong>。
</li></ol></div><div class="iphone changeable-content"><ol>
<li>在 <a href="https://www.shopify.com/install/detect">Shopify 应用</a>中,点击<strong>商店</strong>。
</li><li>在<strong>销售渠道</strong>部分,点击<strong>在线商店</strong>。
</li><li>点击<strong>管理模板</strong>。
</li></ol></div><div class="android changeable-content"><ol>
<li>在 <a href="https://www.shopify.com/install/detect">Shopify 应用</a>中,点击<strong>商店</strong>。
</li><li>在<strong>销售渠道</strong>部分,点击<strong>在线商店</strong>。
</li><li>点击<strong>管理模板</strong>。
</li></ol></div>
</div>



1. 单击 **分区** 旁边的**自定义**。
  1. 单击分区

  2. 单击页脚

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

  • 菜单
  • 新闻通讯
  • 文本 您最多可以添加 4 个内容块。

    若要移动内容块,请单击 ⋮⋮ 图标并将该块拖动到其他位置。

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

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

  1. 单击保存

添加社交媒体图标

  1. 单击 分区 旁边的自定义

  2. 单击分区

  3. 单击页脚

  4. 单击模版设置部分。

  5. 在相关社交媒体字段中,输入指向您的个人资料的 URL。

  6. 单击保存

添加语言选择器

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

  1. 单击 分区 旁边的自定义

  2. 单击分区

  3. 单击页脚

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

  5. 单击保存

特色产品系列

您可以在主页的多个分区中显示多个产品系列。由于 Express 不在标头中包含菜单,因此特色产品系列和特色产品都是使用此模板展示产品最为简单的方式。

在每个特色产品系列分区中,您可以显示多个产品系列。产品系列的显示形式为选项卡,买家可在其中进行导航。

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

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

添加特色产品系列分区

<div class="section-tag-block">
  <div class="sections-menu"><ul class="in-page-menu in-page-menu--horizontal"><li class="js-is-active"><a href="#" class="desktop marketing-button marketing-button--small">桌面</a></li><li class=""><a href="#" class="iphone marketing-button marketing-button--small">iPhone</a></li><li class=""><a href="#" class="android marketing-button marketing-button--small">Android</a></li></ul></div><div class="desktop active changeable-content"><ol>
<li>在 Shopify 后台中,转到<strong>在线商店</strong> &gt; <strong>模版</strong>。
</li></ol></div><div class="iphone changeable-content"><ol>
<li>在 <a href="https://www.shopify.com/install/detect">Shopify 应用</a>中,点击<strong>商店</strong>。
</li><li>在<strong>销售渠道</strong>部分,点击<strong>在线商店</strong>。
</li><li>点击<strong>管理模板</strong>。
</li></ol></div><div class="android changeable-content"><ol>
<li>在 <a href="https://www.shopify.com/install/detect">Shopify 应用</a>中,点击<strong>商店</strong>。
</li><li>在<strong>销售渠道</strong>部分,点击<strong>在线商店</strong>。
</li><li>点击<strong>管理模板</strong>。
</li></ol></div>
</div>



1. 单击 **分区** 旁边的**自定义**。
  1. 单击分区 > 添加分区

  2. 单击特色产品系列,然后单击添加

  3. 在产品系列列表规模下拉列表中,您可以选择默认显示的产品数量。此设置适用于特色产品系列部分中的所有产品系列。

- 小型 - 6 件产品 - 中型 - 18 件产品 - 大型 - 36 件产品

  1. 图片样式下拉列表中,选择产品系列中产品图片的图片裁剪样式。此设置适用于特色产品系列分区中的所有产品系列。

  2. 在内容区域中,选择一个产品系列块或单击添加产品系列

  3. 单击选择产品系列

  4. 产品系列列表中,选择要在选项卡中显示的产品系列,然后单击选择

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

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

  5. 重复步骤 5-7,向该部分添加更多产品系列。

  6. 单击保存

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

  1. 单击 分区 旁边的自定义

  2. 单击分区

  3. 选择要修改的特色产品系列分区。

  4. 在内容区域中,选择一个产品系列块或单击添加产品系列

  5. 单击选择产品系列

  6. 产品系列列表中,选择要在选项卡中显示的产品系列,然后单击选择

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

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

  7. 重复步骤 3-5,向该部分添加更多产品系列。

  8. 单击保存

提示:

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

特色产品

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

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

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

添加特色产品分区

<div class="section-tag-block">
  <div class="sections-menu"><ul class="in-page-menu in-page-menu--horizontal"><li class="js-is-active"><a href="#" class="desktop marketing-button marketing-button--small">桌面</a></li><li class=""><a href="#" class="iphone marketing-button marketing-button--small">iPhone</a></li><li class=""><a href="#" class="android marketing-button marketing-button--small">Android</a></li></ul></div><div class="desktop active changeable-content"><ol>
<li>在 Shopify 后台中,转到<strong>在线商店</strong> &gt; <strong>模版</strong>。
</li></ol></div><div class="iphone changeable-content"><ol>
<li>在 <a href="https://www.shopify.com/install/detect">Shopify 应用</a>中,点击<strong>商店</strong>。
</li><li>在<strong>销售渠道</strong>部分,点击<strong>在线商店</strong>。
</li><li>点击<strong>管理模板</strong>。
</li></ol></div><div class="android changeable-content"><ol>
<li>在 <a href="https://www.shopify.com/install/detect">Shopify 应用</a>中,点击<strong>商店</strong>。
</li><li>在<strong>销售渠道</strong>部分,点击<strong>在线商店</strong>。
</li><li>点击<strong>管理模板</strong>。
</li></ol></div>
</div>



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

产品页面

当买家点击特色产品系列中的产品时,便会出现产品页面。该页面显示产品的描述、价格、多属性和图片。您可以选择是将用户定向到新页面,还是在主页上的叠加页面中显示产品详细信息。客户可以直接从该页面将产品添加到购物车。

产品页面分区包括以下设置:

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

编辑产品页面设置

<div class="section-tag-block">
  <div class="sections-menu"><ul class="in-page-menu in-page-menu--horizontal"><li class="js-is-active"><a href="#" class="desktop marketing-button marketing-button--small">桌面</a></li><li class=""><a href="#" class="iphone marketing-button marketing-button--small">iPhone</a></li><li class=""><a href="#" class="android marketing-button marketing-button--small">Android</a></li></ul></div><div class="desktop active changeable-content"><ol>
<li>在 Shopify 后台中,转到<strong>在线商店</strong> &gt; <strong>模版</strong>。
</li></ol></div><div class="iphone changeable-content"><ol>
<li>在 <a href="https://www.shopify.com/install/detect">Shopify 应用</a>中,点击<strong>商店</strong>。
</li><li>在<strong>销售渠道</strong>部分,点击<strong>在线商店</strong>。
</li><li>点击<strong>管理模板</strong>。
</li></ol></div><div class="android changeable-content"><ol>
<li>在 <a href="https://www.shopify.com/install/detect">Shopify 应用</a>中,点击<strong>商店</strong>。
</li><li>在<strong>销售渠道</strong>部分,点击<strong>在线商店</strong>。
</li><li>点击<strong>管理模板</strong>。
</li></ol></div>
</div>



1. 单击 **分区** 旁边的**自定义**。
  1. 单击分区

  2. 单击产品页面

  3. 使用设置来自定义您的产品页面。

  4. 单击保存

带文本图片

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

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

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

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

布局选项

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

添加带有文本的图片分区

<div class="section-tag-block">
  <div class="sections-menu"><ul class="in-page-menu in-page-menu--horizontal"><li class="js-is-active"><a href="#" class="desktop marketing-button marketing-button--small">桌面</a></li><li class=""><a href="#" class="iphone marketing-button marketing-button--small">iPhone</a></li><li class=""><a href="#" class="android marketing-button marketing-button--small">Android</a></li></ul></div><div class="desktop active changeable-content"><ol>
<li>在 Shopify 后台中,转到<strong>在线商店</strong> &gt; <strong>模版</strong>。
</li></ol></div><div class="iphone changeable-content"><ol>
<li>在 <a href="https://www.shopify.com/install/detect">Shopify 应用</a>中,点击<strong>商店</strong>。
</li><li>在<strong>销售渠道</strong>部分,点击<strong>在线商店</strong>。
</li><li>点击<strong>管理模板</strong>。
</li></ol></div><div class="android changeable-content"><ol>
<li>在 <a href="https://www.shopify.com/install/detect">Shopify 应用</a>中,点击<strong>商店</strong>。
</li><li>在<strong>销售渠道</strong>部分,点击<strong>在线商店</strong>。
</li><li>点击<strong>管理模板</strong>。
</li></ol></div>
</div>



1. 单击 **分区** 旁边的**自定义**。
  1. 单击分区 > 添加分区
  2. 单击带文本图片,然后单击添加
  3. 图片区域中,单击选择图片,然后执行以下操作之一: - 若要选择已上传到 Shopify 后台的图片,请单击选项卡。

    • 若要使用 Burst 中的免费图库图片,请单击免费图片
    • 若要从本地计算机选择图片,请依次单击 > 上传
  4. 使用设置来自定义分区。

  5. 单击保存

购物车抽屉

Express 具有购物车抽屉功能,可让买家快速查看购物车的内容,然后继续购物。

使用 Express,您可以通过在购物车抽屉中启用订单备注,让客户输入订单相关说明

在购物车抽屉中启用订单备注

  1. 通过将产品添加到购物车来导航到模板编辑器中的购物车抽屉。

  2. 单击分区选项卡。

  3. 单击购物车页面部分。

  4. 检查显示购物车备注

  5. 单击保存

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

免费试用