适用于 Supply 的技巧

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

图片提示

产品图片

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

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

缩小幻灯片

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

标头提示

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

  1. 点击标头。5. 在 自定义 logo 宽度(以像素为单位) 字段中输入新的宽度。默认像素值为 305。使用较小的像素值来减小 logo 的大小,从而降低标头的高度。减小 logo 的宽度也会降低其高度,因为您的 logo 会缩小,同时保留其比例。6. 点击保存

网站地图提示

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

添加下拉菜单

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

主菜单最佳做法

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

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

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

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

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

删除侧边栏

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

  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_CanonFocal Length_18 - 55mmResolution_12 MP。下划线的左侧是组名称,右侧是产品的标签。下划线的两侧均可包含空格。

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

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

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

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

重新排序筛选器组和标签

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

定价提示

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

禁用销售金额的四舍五入

  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. 点击模板设置。2. 点击击购物车。3. 从购物车类型下拉列表中,选择页面。4. 点击保存

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

免费试用