适用于 Supply 的技巧

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

图片提示

Supply 的最佳产品图片类型

分辨率更高的照片在 Supply 中看起来更加精致和专业,因此图片至少应为 1024 × 1024 像素。必要时,图片将自动缩小。

如果选中 Enable image zoom(启用图片缩放),则使用分辨率更高的照片尤为重要,要启用图片缩放,可在模板编辑器预览中打开产品页面,然后在分区选项卡中单击产品来。

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

缩小标头

您可以通过几种方法缩短页面的顶部分区。

如果您的 logo 太大,则可以通过调整模板设置中的最大宽度来缩小其尺寸。减小 logo 的宽度也会降低其高度,因为 Shopify 会在缩小 logo 的同时保留其比例。使用模板编辑器,在标头分区中调整自定义 logo 宽度值。默认像素值为 305。使用较小的像素值可缩小 logo 的大小,从而降低标头的高度。

您的 logo 可能还包含添加到标头上方和下方空白区域的不可见或白色像素。您可以使用 Photoshop 等程序从 logo 图片中修剪这些像素。修剪 logo 后,使用模板编辑器重新上传 logo。修剪 logo 图片中的空白区域可以显著降低标头高度。

缩小幻灯片

使用横向图片,这些图片的宽度大于它们的高度。

虽然模板编辑器建议您上传 1000 × 500 像素的图片,但您可使用较小的图片。建议宽度为 1000 像素,以便幻灯片在较大显示屏上的左右两侧没有任何空白区域。宽度较小的图片会在幻灯片中居中显示:

网站地图提示

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

添加下拉菜单

若要向主菜单添加下拉菜单,需要在网站地图页面上创建菜单

主菜单最佳做法

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

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

  • 通过在模板设置选项卡上的 Typography(版式)中减小 Main menu font size(主菜单字体大小),缩小网站导航链接。
  • 对每个链接使用较少的字符。例如,您可以将“常见问题解答”更改为“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. 在模板编辑器预览中打开产品系列页面。在分区选项卡中,单击产品系列,然后选中 By group(按组排序)选项。

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

重新排序筛选器组和标签

组按字母顺序排序,组内列出的标签也按此顺序排序。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. Cart type(购物车类型)下拉列表中,选择页面

  4. 单击保存

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

免费试用