Display main image not first variant on page load.

Stuart_Mitchell
Tourist
7 0 2

Hi all,

I've trawled the search function and found a fair few posts about variant images etc but not really one that fits what I'm after or if it does it's not very clear that it's the same thing. 

I am using Supply theme and I have product variant images. The problem is when the user clicks on the item to get to the product page it automatically changes the image to the first variants image. I don't want to do that, I'd like the main product image to stay until the user selects a variant from the drop down. I'd be happy with the default item saying something like "Please pick a color" and then defaulting to the main product image.

Could anyone help me get an idea about how this could be accomplished? I'm fairly new to Shopify but I can manage html, css and JS but not so experienced with JQuery or liquid. 

Many thanks in advance for all of your time...

Cheers

Stuart.

Replies 22 (22)
Alex135
Astronaut
1889 2 471

The last steps (Steps 7 - 12) in the tutorial tell you how to translate the text.  Will this do for you?

https://docs.shopify.com/support/your-website/themes/how-to-add-a-pick-an-option-to-drop-downs

Jermaine_Carty
New Member
2 0 1

Brilliant! Thanks for your help :)

tenoss
New Member
2 0 1

thanks really much Alex.

we were trying to do it for hours and hours.

we had trying by following this guide on Shopify:

https://help.shopify.com/en/themes/customization/products/variants/show-featured-image-on-product-pa...

but passage n. 3 in "Edit your product page template" is not very clear, might be good to change it with your answer in case someone need it in the future.

 

regards,

Achille

DanGuillermo
New Member
4 0 0

This all worked very well except for one thing.  I'm thinking it should be an easy fix but I can't seem to figure it out.  When I go to the product page it does not show the price until I select a color.  See the attached screenshot and you will see what I mean.

 

https://prnt.sc/pyure6

dehandre
New Member
1 0 0

My quick win:

Just created a new variant with the same first Image that you want to show and then the variant name put "Select" put the price as you have on your first real variant.

 

Cheer.

websitemad
Tourist
9 0 4

In Brooklyn I've just changed a single line and it seems to work. Yes, it takes out the price until a variant is selected, but as a user I would prefer to see the image I just clicked on displaying as the main image on the product page, rather than a variant that the user hasn't even seen before or selected yet.

 

In Sections, open up product-template.liquid

 

{% assign current_variant = product.selected_or_first_available_variant %}

 

change to this:

 

{% assign current_variant = product.featured_media %}

Alonsaar
Tourist
5 0 1

thanks man! was very helpful, you saved my day and my whole life!

LStew
New Member
1 0 0

I am struggling with getting the featured image to display on the home page for featured products with variants. To change the unavailable language though, make sure to follow the last step in that support page, where it says, "Change the Add to cart button language settings."

Koala77
Excursionist
12 0 3

Hi all,

Urgent request here

Our featured images (both for catalogues and products) are not displaying properly: they show as nearly blank. You can actually see a sort of highly transparent image, see link: https://www.koalacollective.com.au/ and scroll down to "Bestsellers"

This also happens with each product category and product. See for example: https://www.koalacollective.com.au/collections/kitchen/KITCHEN 

Our shop theme is "MINIMAL".

The site has been working fine all along, till we did some image related code tweaks today (like the ones discussed about in THIS THREAD), ONLY in preview mode without saving. The code is therefore the original one, yet the featured images are not displaying. We even tried to revert to the original code which dates back to when we first launched our shop back in mid November, yet the images are still NOT displaying properly.

Anyone know how to fix this?

We would be grateful if anyone could help solve this issue ASAP.

Thank you in advance,

Marina

dannnn77
New Member
12 0 0

Ok, let's keep this thread alive! I've gone through the tutorial, successfully. My variant pickers now start with "Pick a..." instead of defaulting to the first variant. My product page displays the featured image, not the first variant and the price of the first variant displays right away. (I would prefer it to show the price range of available variants instead, but one can only pound one's head against the desk so many times in one day).

 

Here's the issue: When a user makes their selections from the drop down menus, the Add To Cart button stays greyed out unless they refresh the page. 

Other than this, it seems to be working flawlessly, but obviously this is a large issue as it appears to users that we are sold out of everything unless they stumble upon the refresh workaround.

Anybody with some insight?