通过匹配变体

时间:2017-08-15 00:09:23

标签: shopify

我正在编辑的Shopify主题中的一个馆藏使用以下设置:Products must match - Variant's Title包含Red

我如何调整collection-loop.liquid模板(或其他片段?)以使此集合使用与 Red 相关联的相关变体产品图像作为缩略图,而不会弄乱其他藏品?

1 个答案:

答案 0 :(得分:1)

答:制作一个替代模板并将其应用于有问题的集合

Shopify允许您为每种主要类型的页面制作多个模板,并设置您要在管理中使用的模板。

第1步:为您的实时主题打开主题编辑器

  • 转到[your-shopify-store] .myshopify.com / admin / themes
  • 管理界面的上半部分应该是您的直播主题的展示。点击“操作”' (在主预览的正上方),然后选择“编辑HTML / CSS'

第2步:创建您的红色'模板

  • 在编辑器左侧的文件夹列表中,打开'模板'文件夹,然后点击“新模板”
  • 选择'收集'作为类型并给它一个有意义的名称。

第3步:对文件进行任何所需的更新,以显示您的红色。

  • 例如:在显示图像的位置,首先循环浏览产品上的变体,并获得第一个变体的图像,其中包含红色'作为期权价值。
  • 根据主题的设置方式,您可能需要编辑和/或复制和更改一个或多个代码段。你可以按照' include'找到哪一个。和'部分'标签。 '包括'标记指向“摘要”中的文件'文件夹,以及'部分'标记指向'部分中的文件'文件夹中。
  • 如果发生重大变化,我建议您创建新的代码段并将其包含在备用模板中。但是,对于较小的更改,您可以通过液体变量template.suffix
  • 了解您是否在备用模板上
  • 例如,您可以遍历变体以查找variant.title contains template.suffix - 然后您可以创建collections.blue,collections.green等,而不需要对该代码段进行进一步编辑。

第4步:预览备用模板以确保它能够满足您的需求

  • 如果您的收藏品被称为衬衫'您的备用模板只需调用红色',您可以将模板预览为:/collections/shirts?view=red - view=red部分是告诉Shopify加载备用模板的部分。

第5步:重复步骤3& 4直到你对结果满意为止。

第6步:将新的收藏模板应用到您想要默认为这种酷炫(热门?)新风格的集合。

  • 在Shopify管理员中,选择(从左侧导航栏)'产品'那么'收藏'
  • 选择要将模板应用到
  • 的集合
  • 现在您至少有一个备用模板,现在应该可以在右侧列中看到模板选择器。
  • 将模板从默认模板更改为新模板,单击“保存”,放松并放松!

找到要显示的合适图像

此部分的复杂程度会有所不同,具体取决于产品的设置方式。我将假设每个名为' Color'的产品都有一个选项,但是那个' Color'可以是产品上的三个选项列中的任何一个(即,我们不能假设第一个选项始终是颜色选项)

第1步:制作一个新的代码段以包含图像查找逻辑(它可以保持我们的代码清洁和可重复使用)

  • 在主题编辑器中,确保' Snippets'文件夹在右侧窗格中展开
  • 点击“添加新代码段”'链路
  • 为文件指定一个有意义的名称(例如' find-color-image')

第2步:在备用收藏模板中,找到您的产品循环并添加新代码段

  • 首先,找到产品循环。它应该看起来像{% for product in collection.products %}

  • 在上述行之后,立即添加{% include 'find-color-image', color: template.suffix, product:product %}(假设您的模板名称与您要查找的颜色相匹配 - 否则,将template.suffix更改为您想要的颜色(用引号括起来) ,例如'red'

第3步:构建find-color-image代码段。以下代码应该执行您正在寻找的内容。

{% comment %} find-color-image.liquid: Given a product and a colour,
 set a variable named color_image as the first variant image that matches the specified colour {% endcomment %}

{% comment %} Clear any leftover variables from previous includes {% endcomment %}
{% assign color_image = nil %}

{% comment %} Loop through the variants to find one matching our colour {% endcomment %}
{% for variant in product.variants %}
  {% comment %} We don't care about any variants without a featured image - skip those using continue {% endcomment %}
  {% unless variant.featured_image %}{% continue %}{% endunless %}

  {% comment %}Make sure the comparison is case-insensitive. The variable named color is expected to be passed when this snippet is included {% endcomment %}
  {% assign opt1 = variant.option1 | downcase %}
  {% assign opt2 = variant.option2 | downcase %}
  {% assign opt3 = variant.option3 | downcase %}
  {% assign target_color = color | downcase %}

  {% comment %} Check to see if one of the above options matches our target colour {% endcomment %}
  {% if opt1 == target_color or opt2 == target_color or opt3 == target_color %}
    {% assign color_image = variant.featured_image %}
    {% break %}
  {% endfor %}

{% endfor %}

第4步:更新收藏模板中的图片链接

  • 将对产品图片的引用更改为上述代码段中设置的color_image变量。

希望这有帮助!