Display all variant images of a product on a collection page?

Highlighted
New Member
3 0 0

I need to show the assigned variant images (using the standard https://apps.shopify.com/variant-images) on not just the product and cart pages (that Caroline kindly explains here https://gist.github.com/carolineschnapp/9495805 and here https://gist.github.com/carolineschnapp/8444587) but also on the collection pages.

I have tried things like the below, but I cant figure out how to get the variant image to display:

{% for product in collection.products %}
        {% for variant in product.variants %}
                    <div class="prod-img">
                        <a href="{{ product.url | within: collection }}">
                            <img src="{{ variant.image.src }}" alt="" class="img-responsive" />
                        </a>
                    </div>
                    <div class="prod-caption">
                        <a href="{{ product.url | within: collection }}">
                                {{ variant.title }} - {{ variant.price }}
                        </a>
                    </div>
                {% endfor %}
        {% endfor %}

Let me know if you think its possible to have variant images show on the /collections/all page. Also does anyone know how this can be used in your template? http://docs.shopify.com/themes/liquid-documentation/objects/variant#variant-image

Thanks,

Kevin

0 Likes
Highlighted
Shopify Staff
Shopify Staff
5704 0 291

Hi Kevin,

On collection pages, variants are not featured, products are. So I am not sure what you are trying to achieve.

Can you elaborate?

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
0 Likes
Highlighted
Shopify Expert
156 0 24

It sounds like they want all variants of a product showing up as a unique product on a collection, even though they all link to the same product.

Developer for Pixel Union
0 Likes
Highlighted
Shopify Staff
Shopify Staff
5704 0 291

Shopify has no concept of variant image, so you can ignore 'variant.image', that won't give you anything other than the product featured image ( we will remove that from the docs, sorry ), so you can use the following:

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

Given that your product images are in the same order as the variants they are meant to illustrate.

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
0 Likes
Highlighted
New Member
3 0 0

(Thanks Gray for succinctly describing the issue.)

YES! Thank you Caroline that works perfectly provided that the product images are in the same order as the variants.

We will explain this to our client if that is the way it needs to be, that they will only be allowed one image per variant, and that they need to always be uploaded in the corresponding order. But do you think there would be someway to latch on to the image file that is associated to the variant as assigned by the official Shopify Variant Image App? Maybe somewhat like you did it for the cart page using JSON? (https://gist.github.com/carolineschnapp/8444587) That way they could have multiple product images but only the few product images that are assigned with the variant image app show up on the collections page as individual links back to its product page.

i.e.= 

image 1 of red bike front (assigned to the red color variant via the app)
image 2 of red bike side

image 3 of red bike rear

image 4 of blue bike front (assigned to the blue color variant via the app)
image 5 of blue bike side
image 6 of blue bike rear

All of the above images will display on the bike product page but on the collection page just images 1 and 4 would show up with the appropriate variant name below it and link to the bike product page.

Thank you very much for your assistance!

Kevin

0 Likes
Shopify Staff
Shopify Staff
5704 0 291

Hi Kevin!

Yes that would be possible. You'd need to make an Ajax request to come up with the correct variant image, an Ajax request to the Variant Images app. You will see how that's done here: http://docs.shopify.com/manual/more/official-shopify-apps/variant-images#show-right-thumbnail-on-car...

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
0 Likes
Highlighted
New Member
3 0 0

Thank you very much Caroline for letting us know that it would be possible. 

If there are any experts out there that you know of or could recommend, we would certainly be willing to hire someone to write this code as its a bit outside of our comfort zone.

Kevin

0 Likes
Highlighted
Tourist
19 0 0

Hi Caroline,

 

I am hoping if you know the answer for this as well.

 

I have been trying to let the product thumbnail image to correspond to what variant is selected on the collection page.

 

Right now, if I choose a variant, the thumbnail displayed in the collection page doesn't change from featured image. I am trying to change that.

 

You can see the example here. 

 

 

https://billiondollarbabystory.com/collections/shoes

 

Can you or someone who might know how to fix this please help me fix this?

 

0 Likes