Shopify 通过匹配变量显示集合缩略图

我正在编辑的Shopify主题的其中一个集合使用了设置：产品必须匹配-Variant的标题包含红色

我将如何调整collection-loop.liquid模板或其他片段？要使此集合使用与红色关联的相关变体产品图像作为缩略图，而不会弄乱其他集合？

A：制作一个替代模板，并将其应用于相关集合 Shopify允许您为每种主要类型的页面制作多个模板，并设置要在管理中使用的模板

步骤1：打开live主题的主题编辑器

转到[你的shopify商店].myshopify.com/admin/themes 管理屏幕的上半部分应该是您的实时主题的展示。单击主预览上方的“操作”，然后选择“编辑HTML/CSS” 步骤2：创建“红色”模板

在编辑器左侧的文件夹列表中，打开“模板”文件夹并单击“新建模板” 选择“Collection”作为类型，并为其指定一个有意义的名称。 步骤3：对文件进行任何所需的更新，以显示您的红色

例如：在显示图像的地方，首先循环查看产品上的变体，然后获取第一个变体的图像，并将“红色”作为选项值。 根据主题的设置方式，您可能需要编辑和/或复制并更改一个或多个代码段。您可以按照“include”和“section”标记查找哪些。“include”标记指向“snippets”文件夹中的文件，“section”标记指向“sections”文件夹中的文件。 对于剧烈的更改，我建议创建新的代码段，并将其包含在备用模板中。不过，对于较小的更改，您可以通过liquid变量template.suffix了解您是否使用了备用模板 例如，您可以通过变量循环查找variant.title包含template.suffix的变量-然后您可以创建collections.blue、collections.green等，而无需对代码段进行进一步编辑。 第4步：预览备用模板以确保它符合您的要求

如果您的收藏名为“衬衫”，而您的备用模板名为“红色”，则您可以预览您的模板，如下所示：/collections/shirts？view=red-view=red部分告诉Shopify加载备用模板。 第五步：重复第三步和第四步，直到你对结果满意为止

步骤6：将新集合模板应用于要默认为此酷热的集合？新风格

在Shopify管理中，从左侧导航栏中选择“产品”，然后选择“收藏” 选择要应用模板的集合 既然您至少有一个备用模板，那么现在应该可以在右侧列中看到一个模板选择器。 将模板从默认更改为新模板，单击“保存”、“回退”和“放松”！ 找到合适的图像来显示 这一部分的复杂程度取决于产品的设置方式。我将假设每个产品上都有一个名为“颜色”的选项，但是“颜色”可以是产品ie上三个选项栏中的任何一个，我们不能假设第一个选项总是颜色选项

第1步：创建一个新的代码段来包含图像查找逻辑，这样可以保持代码的干净性和可重用性

在主题编辑器中，确保右侧窗格中的“Snippets”文件夹已展开 单击“添加新代码段”链接 为文件指定一个有意义的名称，例如“查找彩色图像” 步骤2：在备用集合模板中，找到产品循环并包含新代码段

首先，找到产品循环。它应该看起来像{collection.products%}

紧跟在上述行之后，添加{%include'find color image'，color:template.suffix，product:product%}，假设您的模板名称与您要查找的颜色匹配-否则，将template.suffix更改为您希望用引号括起来的颜色，例如“红色”

步骤3：构建查找彩色图像片段。下面的代码应该满足您的要求

{% 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变量。

---

希望这有帮助

如果没有任何代码，我们最好的猜测是。。。祝你好运我们可以分享一些代码以便我们能帮助你吗？好的，它看起来非常接近！新模板已创建并应用于集合。在collection.{suffix}.liquid文件中，我包含了一个从collection-template.liquid复制的新的{%section'集合模板-{suffix}%}模板。现在，我想使用相关的变体图像更改模板的缩略图div.product\u image div.image\u container img，本质上是一个集合：例如，红色应该使用红色变体的产品图像作为每个缩略图的显示对象

---

帽子系列。不太清楚如何进行调整。请编辑以上内容，以提供有关如何找到所需彩色图像的一些想法：