适用于 Supply 的技巧

已于 Feb 27, 2021 打印了此页面。若要查看当前版本，请访问 https://help.shopify.com/zh-CN/manual/online-store/os/using-themes/themes-by-shopify/supply/tips。

本文概述了一些可帮助您设置在线商店的 Supply 的有用提示和最佳做法。

图片提示

产品图片

分辨率更高的照片在 Supply 中看起来更加精致和专业，因此图片至少应为 1024 × 1024 像素。必要时，图片将自动缩小。如果您在产品页面上启用图片缩放，那么具有更高分辨率的照片尤为重要。

产品照片的最佳宽高比是正方形。

缩小幻灯片

若要使幻灯片在主页上占用较少的垂直空间，您应使用横向图片，这些图片的宽度大于高度。您应上传宽度为 1000px 的图片，这样一来，幻灯片在较大显示屏上的左右两侧没有任何空白区域。宽度较小的图片居中显示在幻灯片中。

标头提示

如果标头太高，您可以通过调整 logo 来缩短标头。如果您的 logo 太大，您可以通过调整最大宽度来缩小其尺寸。您的 logo 可能还包含添加到标头上方和下方空白区域的不可见或白色像素。您可以使用 Photoshop 等图片编辑软件从 logo 图片中修剪这些像素。修剪 logo 后，重新上传 logo。修剪 logo 图片中的空白区域可以显著降低标头高度。

  1. 在 Shopify 后台中，转到在线商店 > 模板。
  2. 单击 的技巧 旁边的自定义。
  1. 在 Shopify 应用中，轻触商店。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触 Manage themes（管理模板）。
  4. 在 的技巧 旁边，轻触自定义。
  5. 轻触编辑。
  1. 在 Shopify 应用中，轻触商店。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触 Manage themes（管理模板）。
  4. 在 的技巧 旁边，轻触自定义。
  5. 轻触编辑。
  1. 单击标头。
  2. 在自定义 logo 宽度(以像素为单位) 字段中输入新的宽度。默认像素值为 305。使用较小的像素值可缩小 logo 的大小，从而降低标头的高度。减小 logo 的宽度也会降低其高度，因为 logo 会缩小，同时保留其比例。
  3. 点击保存。

网站地图提示

以下提示可帮助您改进使用 Supply 时商店的网站地图体验。

添加下拉菜单

若要在您的主菜单中添加下拉菜单，需要在导航页面上创建菜单。

主菜单最佳做法

如果主菜单中的项目太多，无法放在同一行上，则最后无法放入的链接会被添加到更多下拉菜单中。

此行为不受主菜单中链接数量的严格控制，但将链接数量控制在五或六个会有所帮助。要包含更多链接，您可以执行以下操作：

  • 使您的网站导航链接更小。这些链接的字号由字体设置中的主菜单字号控制。
  • 对每个链接使用较少的字符。例如，您可以将“常见问题解答”更改为“FAQ”，将“联系我们”更改为“联系”，将“产品目录”更改为“商店”，并将出现的所有“和”更改为“＆”。

网站地图中包含太多项目可能会使您的网站难以使用。若菜单项太多，您的客户可扫描过去的重要项目。尝试将网站地图限制为五个或六个项目。如果要提供对超过六个页面的访问，请使用下拉菜单。

您应该避免从主菜单向每个产品系列添加链接。相反，请尝试在“商店”或“目录”链接下的下拉菜单中列出产品系列。您还可以将产品系列分解为组，并为每个组提供一个下拉菜单。或者，您可以使用产品标签来创建产品的子类别。

删除侧边栏

要从商店中删除侧边栏，您需要在两个模板文件中添加一些代码。

  1. 在 Shopify 后台中，转到在线商店 > 模板。

  2. 找到要编辑的模板，然后单击操作 > 编辑代码。

  1. 在 Shopify 应用中，轻触商店。

  2. 在销售渠道部分中，轻触在线商店。

  3. 轻触 Manage themes（管理模板）。

  4. 找到要编辑的模板，然后单击操作 > 编辑代码。

  1. 在 Shopify 应用中，轻触商店。

  2. 在销售渠道部分中，轻触在线商店。

  3. 轻触 Manage themes（管理模板）。

  4. 找到要编辑的模板，然后单击操作 > 编辑代码。

  1. 在 Sections 目录中，单击 collection-template.liquid。

  2. 在文件中查找 has_sidebar。删除以下代码行：

{% if collection.all_tags.size > 0 %}
  {% assign has_sidebar = true %}
{% endif %}

  1. 单击保存。

  2. 在 Sections 目录中，单击 collection-list-template.liquid。

  3. 在文件中查找 has_sidebar。删除以下代码行：

{% if collection.all_tags.size > 0 %}
  {% assign has_sidebar = true %}
{% endif %}
  1. 单击保存。

产品提示

以下提示可帮助您使用 Supply 展示产品。

使用高级组筛选

如果您有许多产品，您可以启用子组来帮助您的客户对产品进行排序。

  1. 定义组。对于相机商店，可以按品牌、焦距和分辨率来组织分组。

  2. 将所有产品导出为 .csv 文件。

  3. 在所有现有标记前面加上您希望它们所在的组的名称，采用 Group_Tag Name 的格式。对于此示例，一些标签将为 Brand_Canon、Focal Length_18 - 55mm 和 Resolution_12 MP。下划线的左侧是组名称，右侧是产品的标签。下划线的两侧均可包含空格。

  4. 保存 .csv 文件，并将产品重新导入您的商店。确保在上传文件时选择替换具有相同 handle 的任何现有产品，以防止创建重复的产品。

  5. 在产品系列页面上启用按组筛选：

    1. 在 Shopify 后台中，转到在线商店 > 模板。
    2. 在 Supply 旁边，点击自定义。
    3. 在页面顶部的下拉菜单或模板菜单中，选择产品系列页面。
    4. 单击产品系列分区。
    5. 在侧边栏产品筛选条件下，选择按组。
    6. 点击保存。

备注：如果在产品标签内使用单引号、双引号或“＆”符号，则分组筛选无法按预期工作。

重新排序筛选器组和标签

组按字母顺序排序，组内列出的标签也按此顺序排序。Shopify 专家可以帮助您自定义订单。

定价提示

以下提示可帮助在使用 Supply 时设置定价。

禁用销售金额的四舍五入

  1. 在 Shopify 后台中，转到在线商店 > 模板。

  2. 找到要编辑的模板，然后单击操作 > 编辑代码。

  1. 在 Shopify 应用中，轻触商店。

  2. 在销售渠道部分中，轻触在线商店。

  3. 轻触 Manage themes（管理模板）。

  4. 找到要编辑的模板，然后单击操作 > 编辑代码。

  1. 在 Shopify 应用中，轻触商店。

  2. 在销售渠道部分中，轻触在线商店。

  3. 轻触 Manage themes（管理模板）。

  4. 找到要编辑的模板，然后单击操作 > 编辑代码。

  1. 在左侧的资产下，打开 timber.scss.liquid。

  2. 在文件底部，添加以下代码：

.sale-tag sup {
   display: inline;
   top: 0;
   font-size: 100%;

   &:before {
    content: '.';
   }
 }
  1. 点击保存。

购物车提示

以下提示可确保将 JavaScript 添加到 Supply 后，您商店的购物车能够正常工作。

更改购物车类型，以便高级 JavaScript 正常运作

在 Supply 中，您添加到 cart.liquid 的任何 JavaScript 都不会在抽屉式或模式购物车中执行。它只会在您将 /cart 追加到商店的 URL 时执行。例如，http://your.store.url/cart。

如果您想将以下任何功能添加到购物车页面，则需要将购物车类型设为页面式：

  • 运费计算器
  • 多种货币
  • 礼品包装
  • 购物车属性验证
  • 日期选择器
  • “我同意条款”复选框。

步骤：

  1. 在 Shopify 后台中，转到在线商店 > 模板。
  2. 单击 的技巧 旁边的自定义。
  1. 在 Shopify 应用中，轻触商店。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触 Manage themes（管理模板）。
  4. 在 的技巧 旁边，轻触自定义。
  5. 轻触编辑。
  1. 在 Shopify 应用中，轻触商店。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触 Manage themes（管理模板）。
  4. 在 的技巧 旁边，轻触自定义。
  5. 轻触编辑。
  1. 单击模板设置。
  2. 单击购物车。
  3. 在 Cart type（购物车类型）下拉列表中，选择页面。
  4. 点击保存。

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

免费试用