通过匹配变体显示 Collection 个缩略图

Question

我正在编辑的 Shopify 主题中的一个 Collections 使用设置：Products must match - Variant's Title 包含 Red

我将如何调整 collection-loop.liquid 模板（或其他片段？）让这个 collection 使用与 Red[=20= 关联的相关变体产品图片] 作为缩略图，不会弄乱其他 collections?

Answer 1

答：制作一个备用模板并将其应用于有问题的 collection(s)

Shopify 允许您为每种主要类型的页面制作多个模板，并在后台设置要使用的模板。

第 1 步：打开实时主题的主题编辑器

前往 [your-shopify-store].myshopify.com/admin/themes
管理屏幕的上半部分应该展示您的实时主题。单击 'Actions'（主预览正上方）和 select 'Edit HTML/CSS'

第 2 步： 创建您的 'red' 模板

在编辑器left-hand一侧的文件夹列表中，打开'Templates'文件夹并点击'New Template'
Select 'Collection' 作为类型并给它起一个有意义的名字。

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

例如：在显示图片的地方，首先循环遍历产品的变体，并获取第一个变体的图像，并将 'red' 作为选项值。
根据您的主题设置方式，您可能需要编辑 and/or duplicate-and-change 一个或多个片段。您可以通过 'include' 和 'section' 标签找到哪些。 'include'标签指向'snippets'文件夹中的文件，'section'标签指向'sections'文件夹中的文件。
对于剧烈的变化，我建议创建新的片段并将其包含在您的备用模板中。不过，对于微小的更改，您可以通过 liquid 变量 template.suffix
例如，您可以遍历变体以找到 variant.title contains template.suffix 的变体 - 然后您可以进行 collections.blue、collections.green 等，而无需对片段。

第 4 步：预览您的备用模板以确保它符合您的要求

如果您的 collection 被称为 'shirts' 而您的替代模板被简单地称为 'red'，您将预览您的模板：/collections/shirts?view=red - view=red 部分告诉 Shopify 加载备用模板。

第 5 步：重复第 3 步和第 4 步，直到您对结果满意为止。

第 6 步： 将新的 collection 模板应用于 collection(s) 您想要默认为这种酷（热？）新风格.

在 Shopify 后台，select（来自 left-hand 导航）'Products' 然后 'Collections'
Select collection 您要将模板应用到
现在您至少有 1 个备用模板，模板 selector 现在应该在 right-hand 列中可见。
将模板从默认模板更改为您的新模板，单击保存，放松一下！

正在寻找合适的图片来展示

这部分的复杂程度会因您的产品设置方式而异。我将假设每个产品上都有一个名为 'Color' 的选项，但是 'Color' 可以是产品上三个选项列中的任何一个（即，我们不能假设第一个选项将始终是颜色选项）

第 1 步： 制作一个新片段以包含 image-finding 逻辑（它使我们的代码保持整洁和可重用）

在主题编辑器中，确保 'Snippets' 文件夹在 right-hand 窗格中展开
点击'Add new snippet'link
给文件一个有意义的名字（例如'find-color-image'）

第 2 步： 在您的备用 collection 模板中，找到您的产品循环并包含新代码段

首先，找到产品循环。它应该看起来像 {% 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 步： 在您的 collection 模板中更新图像 links

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

希望对您有所帮助！

通过匹配变体显示 Collection 个缩略图

Displaying Collection thumbnails by matching Variant

shopify

答：制作一个备用模板并将其应用于有问题的 collection(s)

正在寻找合适的图片来展示