适用于 Supply 的技巧
本文概述了一些可帮助您设置在线商店的 Supply 的有用提示和最佳做法。
图片提示
产品图片
分辨率更高的照片在 Supply 中看起来更加精致和专业,因此图片至少应为 1024 × 1024 像素。必要时,图片将自动缩小。如果您在产品页面上启用图片缩放,那么具有更高分辨率的照片尤为重要。
产品照片的最佳宽高比是正方形。
缩小幻灯片
若要使幻灯片在主页上占用较少的垂直空间,您应使用横向图片,这些图片的宽度大于高度。您应上传宽度为 1000px 的图片,这样一来,幻灯片在较大显示屏上的左右两侧没有任何空白区域。宽度较小的图片居中显示在幻灯片中。
标头提示
如果标头太高,您可以通过调整 logo 来缩短标头。如果您的 logo 太大,您可以通过调整最大宽度来缩小其尺寸。您的 logo 可能还包含添加到标头上方和下方空白区域的不可见或白色像素。您可以使用 Photoshop 等图片编辑软件从 logo 图片中修剪这些像素。修剪 logo 后,重新上传 logo。修剪 logo 图片中的空白区域可以显著降低标头高度。
调整 logo 的宽度
- 在 Shopify 后台中,转到在线商店 > 模板。
- 单击 的技巧 旁边的自定义。
- 在 Shopify 应用中,轻触商店。
- 在销售渠道部分,轻触在线商店。
- 轻触 Manage themes(管理模板)。
- 在 的技巧 旁边,轻触自定义。
- 轻触编辑。
- 在 Shopify 应用中,轻触商店。
- 在销售渠道部分,轻触在线商店。
- 轻触 Manage themes(管理模板)。
- 在 的技巧 旁边,轻触自定义。
- 轻触编辑。
- 单击标头。
- 在自定义 logo 宽度(以像素为单位) 字段中输入新的宽度。默认像素值为
305
。使用较小的像素值可缩小 logo 的大小,从而降低标头的高度。减小 logo 的宽度也会降低其高度,因为 logo 会缩小,同时保留其比例。 - 点击保存。
网站地图提示
以下提示可帮助您改进使用 Supply 时商店的网站地图体验。
添加下拉菜单
若要在您的主菜单中添加下拉菜单,需要在导航页面上创建菜单。
主菜单最佳做法
如果主菜单中的项目太多,无法放在同一行上,则最后无法放入的链接会被添加到更多下拉菜单中。

此行为不受主菜单中链接数量的严格控制,但将链接数量控制在五或六个会有所帮助。要包含更多链接,您可以执行以下操作:
- 使您的网站导航链接更小。这些链接的字号由字体设置中的主菜单字号控制。
- 对每个链接使用较少的字符。例如,您可以将“常见问题解答”更改为“FAQ”,将“联系我们”更改为“联系”,将“产品目录”更改为“商店”,并将出现的所有“和”更改为“&”。
网站地图中包含太多项目可能会使您的网站难以使用。若菜单项太多,您的客户可扫描过去的重要项目。尝试将网站地图限制为五个或六个项目。如果要提供对超过六个页面的访问,请使用下拉菜单。
您应该避免从主菜单向每个产品系列添加链接。相反,请尝试在“商店”或“目录”链接下的下拉菜单中列出产品系列。您还可以将产品系列分解为组,并为每个组提供一个下拉菜单。或者,您可以使用产品标签来创建产品的子类别。
删除侧边栏
要从商店中删除侧边栏,您需要在两个模板文件中添加一些代码。
在 Shopify 后台中,转到在线商店 > 模板。
找到要编辑的模板,然后单击操作 > 编辑代码。
在 Shopify 应用中,轻触商店。
在销售渠道部分中,轻触在线商店。
轻触 Manage themes(管理模板)。
找到要编辑的模板,然后单击操作 > 编辑代码。
在 Shopify 应用中,轻触商店。
在销售渠道部分中,轻触在线商店。
轻触 Manage themes(管理模板)。
找到要编辑的模板,然后单击操作 > 编辑代码。
在 Sections 目录中,单击
collection-template.liquid
。在文件中查找
has_sidebar
。删除以下代码行:
{% if collection.all_tags.size > 0 %}
{% assign has_sidebar = true %}
{% endif %}
单击保存。
在 Sections 目录中,单击
collection-list-template.liquid
。在文件中查找
has_sidebar
。删除以下代码行:
{% if collection.all_tags.size > 0 %}
{% assign has_sidebar = true %}
{% endif %}
- 单击保存。
产品提示
以下提示可帮助您使用 Supply 展示产品。
使用高级组筛选
如果您有许多产品,您可以启用子组来帮助您的客户对产品进行排序。
定义组。对于相机商店,可以按品牌、焦距和分辨率来组织分组。
在所有现有标记前面加上您希望它们所在的组的名称,采用 Group_Tag Name 的格式。对于此示例,一些标签将为 Brand_Canon、Focal Length_18 - 55mm 和 Resolution_12 MP。下划线的左侧是组名称,右侧是产品的标签。下划线的两侧均可包含空格。
保存
.csv
文件,并将产品重新导入您的商店。确保在上传文件时选择替换具有相同 handle 的任何现有产品,以防止创建重复的产品。-
在产品系列页面上启用按组筛选:
- 在 Shopify 后台中,转到在线商店 > 模板。
- 在 Supply 旁边,点击自定义。
- 在页面顶部的下拉菜单或模板菜单中,选择产品系列页面。
- 单击产品系列分区。
- 在侧边栏产品筛选条件下,选择按组。
- 点击保存。
备注:如果在产品标签内使用单引号、双引号或“&”符号,则分组筛选无法按预期工作。
重新排序筛选器组和标签
组按字母顺序排序,组内列出的标签也按此顺序排序。Shopify 专家可以帮助您自定义订单。
定价提示
以下提示可帮助在使用 Supply 时设置定价。
禁用销售金额的四舍五入
在 Shopify 后台中,转到在线商店 > 模板。
找到要编辑的模板,然后单击操作 > 编辑代码。
在 Shopify 应用中,轻触商店。
在销售渠道部分中,轻触在线商店。
轻触 Manage themes(管理模板)。
找到要编辑的模板,然后单击操作 > 编辑代码。
在 Shopify 应用中,轻触商店。
在销售渠道部分中,轻触在线商店。
轻触 Manage themes(管理模板)。
找到要编辑的模板,然后单击操作 > 编辑代码。
在左侧的资产下,打开
timber.scss.liquid
。在文件底部,添加以下代码:
.sale-tag sup {
display: inline;
top: 0;
font-size: 100%;
&:before {
content: '.';
}
}
- 点击保存。
购物车提示
以下提示可确保将 JavaScript 添加到 Supply 后,您商店的购物车能够正常工作。
更改购物车类型,以便高级 JavaScript 正常运作
在 Supply 中,您添加到 cart.liquid
的任何 JavaScript 都不会在抽屉式或模式购物车中执行。它只会在您将 /cart
追加到商店的 URL 时执行。例如,http://your.store.url/cart
。
如果您想将以下任何功能添加到购物车页面,则需要将购物车类型设为页面式:
- 运费计算器
- 多种货币
- 礼品包装
- 购物车属性验证
- 日期选择器
- “我同意条款”复选框。
步骤:
- 在 Shopify 后台中,转到在线商店 > 模板。
- 单击 的技巧 旁边的自定义。
- 在 Shopify 应用中,轻触商店。
- 在销售渠道部分,轻触在线商店。
- 轻触 Manage themes(管理模板)。
- 在 的技巧 旁边,轻触自定义。
- 轻触编辑。
- 在 Shopify 应用中,轻触商店。
- 在销售渠道部分,轻触在线商店。
- 轻触 Manage themes(管理模板)。
- 在 的技巧 旁边,轻触自定义。
- 轻触编辑。
- 单击模板设置。
- 单击购物车。
- 在 Cart type(购物车类型)下拉列表中,选择页面。
- 点击保存。