Eternal issue of replacing variant image by featured image on product page (Trade 15.4.0)

[antoinecrisias]

Hi there,

I’m using Trade Theme 15.4.0. and variant options for my products. I’ve set my images in a carousel (big main image and small carousel below with arrows).

As mentioned, I’m trying to solve this issue : featured image of my product isn’t shown first when opening product page ; it’s 1st variant image shown instead. I found a lot of topics about this issue, but none solved it for me on Trade 15.4.0 Theme ; each proposition seems to be very close but nothing fits.

So please, let me know if it’s possible to :

• Set featured image as main image on first view when opening product page (instead of 1st variant image)
• Naturally set variant image as main image when clicking (another) variant (than the 1st one automatically selected when opening the page).
• BONUS : If possible, make all variant images disappear from carousel below ?

Any help from anywhere will be very much appreciated ! And as I’m not an IT guy, and as English is not my mother tongue, please be gentle with technical operations

Oh, and a cost free solution please, 324€ per year, I hope we can solve this tiny issue together without paying a single more penny

Big thanks and cheers from France

Antoine

[Maximus3]

Your product page automatically selects the first variant by default. If you want to display a different image than the first variant image, you’ll need to first disable or remove the underlying auto-selection attribute.

[tim_1]

Here is the solution which should work in all Dawn family themes, does not require editing theme code and does not break anything.

Go to the “Product information” section and add a “Custom liquid” block at the bottom of the section.
Paste the following code:

{% if product.variants.size > 1 and product.selected_variant == nil %}
  <script>

    var mg = document.querySelector('#shopify-section-{{section.id}}  media-gallery');
    var vs = document.querySelector('#shopify-section-{{section.id}}  variant-selects [name]');
    var pf = document.querySelector('#shopify-section-{{section.id}}  product-form');

    var showFeatured = () => {
      /* select featured product image */
      mg.setActiveMedia( '{{ section.id }}-{{ product.featured_media.id }}' );

      /* disable cart button for now (for ver>=15) */
      pf.toggleSubmitButton && pf.toggleSubmitButton( true, 'Select options' );

      /* change variant selectors to force selection */
      if (vs.tagName == "SELECT") {
        vs.insertAdjacentHTML( 'afterbegin', `<option disabled>Select options</option>` );
        vs.children[0].selected = true;
      } else vs.checked = false;
    };

    if (mg && vs && pf) {
      if (document.readystate == 'complete') setTimeout(showFeatured, 100)
      else document.addEventListener('DOMContentLoaded', showFeatured);
    }
  </script>
{% endif %}

Demo is here – Absolut Vodka 700mL – BBK Market
It’s Dawn, but works same with Trade:

Works best with version 15 and newer.
Only drawback is a small LCP metric penalty.

Also, the theme already have setting to not show variant images in thumbs – “Hide other variant media after one is selected”:

---

if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it

[antoinecrisias]

Hi, thank you for your reply. Can you be more specific ? Thanks !

[antoinecrisias]

Thanks you for your reply ; I found “Hide other variant media…” option, Thanks !

About Custom Liquid section, I added it but nothing like “Custom Lqd for featured” appears.

how can I add it to try your code?

Thanks !

[tim_1]

It would not just appear, you have to rename it yourself – did you know that you can rename section blocks by simply clicking their title in block properties and typing new name?

Does the code work though?

---

if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it

[antoinecrisias]

Ah ok !

Well, I’m afraid nothing changes…

Please tell me if you see something wrong here.

Thanks !

[antoinecrisias]

I see that the Custom Lqd for featured section you added is inside of production informations. I can’t manage to add any Custom Liquid section inside of it…

[tim_1]

It’s not a section, it’s a block inside the “Product info” section.
I specifically mentioned this in my original post.

Since your theme is version 15.4 it must have a “Custom liquid” block.

[antoinecrisias]

I don’t see how to add any block to my section though.

[tim_1]

Hover between existing blocks and click the “+” sign when it appears:

There is a manual – https://help.shopify.com/en/manual/online-store/themes/theme-structure/sections-and-blocks#add-block

[antoinecrisias]

Halleluyah it worked, thank you for your patience @tim_1

unless it’s too much to ask : is it possible to make variant small image in carousel disappear ?

[tim_1]

Check the “Hide other variant media after one is selected” setting?

[antoinecrisias]

This one ? it’s enabled already.

In fact, I’d like to get same UX as this product page (if you can see that link) : JURIE & JARRE | LAMPE A POSER AURORE – JURIE ET JARRE