Displaying Collection thumbnails by matching Variant

Question

One of the Collections on the Shopify theme that I'm editing uses the settings: Products must match - Variant's Title contains Red

How would I go about tweaking the collection-loop.liquid template (or other snippets?) to have this collection use the relevant variant product images associated with Red as the thumbnails, without messing up the other collections?

Answer 1

A: Make an alternate template and apply it to the collection(s) in question

Shopify allows you to make multiple templates for each of the main types of pages and set which one you want to use in the admin.

Step 1: Open the theme editor for your live theme

• Go to [your-shopify-store].myshopify.com/admin/themes
• The top half of the admin screen should be a showcase of your live theme. Click 'Actions' (right above the main preview) and select 'Edit HTML/CSS'

Step 2: Create your 'red' template

• In the folder list on the left-hand side of the editor, open the 'Templates' folder and click 'New Template'
• Select 'Collection' as the type and give it a name that makes sense.

Step 3: Make any desired updates to the file to show off your redness.

• Eg: Where images are being displayed, first loop through the variants on the product and get the image of the first variant with 'red' as an option value.
• Depending on how your theme is set up, you may need to edit and/or duplicate-and-change one or more snippets. You can find which one(s) by following the 'include' and 'section' tags. The 'include' tag points to files in the 'snippets' folder, and the 'section' tag points to files in the 'sections' folder.
• For drastic changes, I would recommend creating new snippets and including those in your alternate template instead. For minor changes, though, you can find out if you're on an alternate template through the liquid variable template.suffix
• For example, you could loop through variants to find one where variant.title contains template.suffix - then you could make collections.blue, collections.green, etc. and not need to make further edits to the snippet.

Step 4: Preview your alternate template to make sure it does what you want

• If your collection is called 'shirts' and your alternate template is simply called 'red', you would preview your template as: /collections/shirts?view=red - the view=red part is what tells Shopify to load the alternate template.

Step 5: Repeat steps 3 & 4 until you're happy with the results.

Step 6: Apply the new collection template to the collection(s) you want to default to this cool (hot?) new style.

• In the Shopify admin, select (from the left-hand navigation) 'Products' then 'Collections'
• Select the collection you want to apply the template to
• Now that you have at least 1 alternate template, a template selector should now be visible in the right-hand column.
• Change the template from the default to your new one, click save, kick back and relax!

---

Finding an appropriate image to show

This part will vary in complexity depending on how your products are set up. I am going to assume that there is an option on each product named 'Color', but that 'Color' can be any of the three option columns on the product (ie, that we can't assume that the first option will always be the colour option)

Step 1: Make a new snippet to contain the image-finding logic (it keeps our code clean and reusable)

• In the theme editor, make sure the 'Snippets' folder is expanded in the right-hand pane
• Click the 'Add new snippet' link
• Give the file a meaningful name (such as 'find-color-image')

Step 2: In your alternate collection template, find your product loop and include the new snippet

• First, find the product loop. It should look something like {% for product in collection.products %}

• Immediately after the above line, add {% include 'find-color-image', color: template.suffix, product:product %}(assuming that your template name matches the colour you are looking for - otherwise, change template.suffix to the colour you want (wrapped in quotes), such as 'red')

Step 3: Build the find-color-image snippet. The following code should do what you're looking for.

{% 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 %}

Step 4: Update image links in your collection template

• Change references to the product's image to the color_image variable set in the above snippet.

Hope this helps!