Boost Theme - How to show variant image in a collection?

Technical Q&A
1

I can’t seem to get a variant image to generate on a product tile in a collection. Here a description and what has worked so far:

There is a certain product type for which I’m making a customized collection template. This collection shows each variant as an individual product, showing the product title, variant name, and variant image, and product price.

So, say for example, Product #1 is called “Drinking Glass” has a variant titled “Style” and 3 options called “wide”, “short”, and “tall”. In the collection, you’d see three tiles for this one product. One tile would be titled “Drinking Glass - Wide”, the image selected as the “wide” image for that option, and the price of the “Drinking Glass” product (all glasses cost the same). So, three tiles for one product, but ultimately they all link back to the same product page. I’ve been able to to get the tiles to generate in the correct numbers and render the variant name (wide/short/tall). I can’t seem to get the image of that variant.

There are three new files I’m working on:

collection.collection-variant-tiles.liquid

collection-variant-tiles.liquid

product-block-variant-tiles.liquid.

In collection-variant-tiles.liquid, here is was loops to render each tile in the collection:

{% for product_option in product.options_with_values %}
{%- if product_option.name == "Style" -%}
{% for value in product_option.values %}
{% render 'product-block-variant-tiles', quickbuy: quickbuy_toggle, product: product, grid_class: grid_class_list, show_vendor: section.settings.show_vendor, variant_selected:value %}

{% endfor %}
{%- endif -%}
{% endfor %}

By adding variant_selected:value in the render line, I was able to then use {{ variant_selected }} in the block file (product-block-variant-tiles.liquid) to render the variant name.

Now, I know that I have to edit this line in order to change the image:

{% render 'responsive-image', image: product.featured_media.preview_image %}

But, I can’t seem to get the right syntax to render just the assigned variant image for that rendered variant block.

Does anyone know how to select the variant image?

2

@mzl

try out this code.

<img src="{{ product.images[forloop.index0] | img_url: 'large' }}" alt="" class="img-responsive" />
3

That did give me a “No Image” placeholder image. The {% render %} seems to output a WHOLE BUNCH of other data.
I tried:

{% render 'responsive-image', image: product.images[forloop.index0] %}

and that did not render any image. Completely broken. It looks like the image is set as a background url in style. So, using that tidbit above, it just put this error in style:

“padding-top:Liquid error (responsive-image line 8): divided by 0%”

When its set as “image: product.featured_media.preview_image” it will generate
style="background-image: url("https://cdn.shopify.com/s/files/ … “);”

4

Hello @mzl

Did you ever figure out how to get variants showing as products within collections for the Boost theme? I’m trying to get this done for our site but do not have the code to do it. would love any help you could provide. Thank you