Display main image not first variant on page load.

New Member
7 0 0

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.

0 Likes
Shopify Expert
9807 92 1560

In supply, you'd need to edit product.liquid and remove (or comment out) part of the code. So change this:

      if (variant.featured_image) {
        var newImg = variant.featured_image,
            el = $featuredImage[0];
        $(function() {
          Shopify.Image.switchImage(newImg, el, timber.switchImage);
        });
      }

into:

/*
      if (variant.featured_image) {
        var newImg = variant.featured_image,
            el = $featuredImage[0];
        $(function() {
          Shopify.Image.switchImage(newImg, el, timber.switchImage);
        });
      }
*/

 

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
1 Like
New Member
7 0 0

Hi Jason,

Thanks for your response, I'm not sure I explained myself very well though. I do want to keep the functionality of having variant images, but only when a variant is chosen. I don't want the image to automatically change to the first variants image when the page loads, I need my visitor to see the main product image first then be able to make a selection. 

I know that makes it a little more complicated but I'm sure it should be possible.

Thanks for your time with this.

Cheers

Stuart.

0 Likes
Astronaut
1890 1 393
New Member
7 0 0

Hi Alex,

Apologies for the delay in responding I've been away for a couple weeks. I have looked at that and it seems like a great option and I'm planning on implementing it, the only problem is that even with that additional option it still changes to the image of the first actual product variant, is there a way to make it use the default product image somewhere when that block of code executes to add the additional option into the drop down. So for instance it would say "Please choose a colour" and also set the main product image as the current image.

I think this is getting closer to a solution so fingers crossed.

I appreciate your time and help so far.

Cheers

Stuart.

0 Likes
Astronaut
1890 1 393

Open Templates/product.liquid.  Find the line of code below.

          {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

Try changing it to:

          {% assign featured_image = product.featured_image %}

 

2 Likes
New Member
7 0 0

Hi Alex,

That didn't work, as soon as the page loads it still changes the main image to the first variants image even without anything being chosen on the drop down menu. 

I'm at a bit of a loss :(

Regards

Stuart.

0 Likes
Astronaut
1890 1 393

You're missing one step from the tutorial: Step #5.  The instructions aren't completely clear, so it's understandable.  I will restate that step below.

For the Supply theme, open Templates/product.liquid.  Look for:

              <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

Change it to:

              <option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

 

3 Likes
New Member
7 0 0

Hi Alex, you're an absolute legend, that's sorted me right out. I really appreciate your help very much indeed!

Thanks again :)

Stuart.

0 Likes
New Member
2 0 1

Hi

I've been following this as had the same problem.  I have fixed the issue so I can now have main image displayed first, the only problem I am having is that it is saying unavailable, even when all variants are in stock, the unavailable will dissapear once I choose one of the variants.  How do i get it so it's not saying unavailable straight away?  I'm using the sunshine theme.

Thanks

Jermaine

1 Like