Product image doesn't match variant selected

Highlighted
New Member
1 0 0

First off, I've seen similar posts but haven't found a solution that applies to me. I apologize!

 

I have an issue related to the selected variant.

 

For one, how do I set a default variant for a product? I have a shirt with 8 color options and in the featured image the color is forest green but when you go to the product page, it defaults to white. I would like to adjust each one manually.

 

Following that, when you select a color from the drop down on mobile, the product image does not update to match which really annoys users. Is this possible to fix?

 

And if they swipe through the images of the different colors, can it update the dropdown for them based on the image they are viewing?

 

My website is vistablvd.com -- I appreciate all the help!

0 Likes
Highlighted
Tourist
6 1 0

Your featured image is the first image of the product, so your first variant must be the same color of your featured image. You can reorder the options/variants, here is the documentation : https://help.shopify.com/en/manual/products/variants/edit-variants#change-the-display-order-of-optio...

If your featured image is a Green color Shirt, your first variant must be Green / XL ...

 

Example code:

In product.liquid you can use this code:

{%- assign current_variant = product.selected_or_first_available_variant -%}

 

With current_variant variable, you can access to the attributes as a variant object : https://shopify.dev/docs/themes/liquid/reference/objects/variant

Example:

If you want to show the featured image:

1. Get the feature image

{%- assign featured_image = current_variant.featured_image | default: product.featured_image  -%}

2. Show the featured image

<img src="{{ featured_image | img_url: 'master' }}" alt="{{ featured_image.alt | escape }}">

0 Likes