Variant displayed on Collection page

Solved
Highlighted
New Member
3 0 0

At the moment on collection the default product image is displayed. On product pages the first availablevariant is displayed. I would like the first available variant image to be displayed on the collection pages as well. I'm using the Supply theme.

Any help with how to go about this would be appreciated.

Thanks

0 Likes
Highlighted
Shopify Partner
472 66 86

Hello, @westcoastgames 

Please share your site URL,

So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Highlighted

Success.

Shopify Partner
472 66 86

please try this.

{% for variant in product.variants %}
{% if variant.available %}
{{ variant.title }}
{% endif %}
{% endfor %}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
New Member
3 0 0

Thanks this allowed me to solve the problem.

In the product-grid-item.liquid I put this code. It seems to be working.

 

{% if product.featured_image %}
{%- assign image = product.featured_image -%}
{%- assign max_width = width | plus: 0 -%}
{%- assign max_height = height | plus: 0 -%}

{% for variant in product.variants %}
{% if variant.available %}
{%- assign image = variant.image -%}
{%- assign max_width = width | plus: 0 -%}
{%- assign max_height = height | plus: 0 -%}
{% break %}
{% endif %}
{% endfor %}

0 Likes
Highlighted
Tourist
3 1 2

You may not  need the loop at all:

{% if product.featured_image %}
	{% assign image = product.featured_image %}

	{% if product.first_availeble_variant and product.first_availeble_variant.image %}
		{% assign image = product.first_availeble_variant.image %}
	{% endif %}

	{%- assign max_width = image.width | plus: 0 -%}
	{%- assign max_height = image.height | plus: 0 -%}

{% endif %}

 

 

0 Likes