Show featured image until a variant is selected

[Ryu888]

Hi everyone
Does anyone know how to show featured image at first until a variant is selected?
Thanks in advance!!

https://a7■■■1-ra.myshopify.com/
Password: 1

[rajweb]

Hey @Ryu888 ,

Yes, you can absolutely do that on Shopify — show the featured (default) product image until a variant is selected, after which the variant image appears. Here’s how you can implement it, depending on your theme and setup.

JavaScript-based (Theme-agnostic):

This is a general solution that works in most Shopify themes:

1. In your product.liquid or main-product.liquid file (or wherever the product form and images are rendered), add a data attribute to track the featured image:

2. Add JS to handle variant changes:

Note: Adjust selectors based on your theme. Some use data-product-id, or dynamic section IDs like ProductJson-{{ section.id }}.

Would you like help with this specific to your theme (e.g., Dawn, Broadcast, Debutify, etc.)? I can tailor the solution accordingly. Let me know which theme you’re using!

Best,

Rajat

Shopify Expert

[Ryu888]

Thank you for your help Rajat

I’m currently using PureTemplates ver 2.0.1
It would be much help if you could guide me to fix this
TIA

[TheScriptFlow]

Hey @Ryu888 ,

Could you please share the correct store password? Because i check and found that it’s not correct. Correct password will help me to take a look in your store to provide you better solution as I can.

In the previous days I do same task for one of my Customer and I would like to tell you how you can implement the same thing in your store.

Here are the steps you can follow.

1. Go to product page template: First you need to go in the product page template. You can find product page template by these steps: Go to Shopify Admin > Online Store > Edit Code. In the Edit code search bar you have to search for main-product.liquid or product.liquid.
2. Find the variant image Switching logic: Usually you will find the JavaScript Block like this:

variant.addEventListener('change', function(){
     // code that updates image 
});

If you don’t find it from the main-product.liquid then you can search it from theme.js file.

• After founding it now you have to update the JS with this one code:

document.addEventListener("DOMContentLoaded", function() {
  const featuredImage = document.querySelector('.product__media img').src;
  const variantSelect = document.querySelector('[name="id"]');

  variantSelect.addEventListener('change', function() {
    const selectedOption = this.options[this.selectedIndex];
    const imageId = selectedOption.getAttribute('data-image-id');

    if (imageId) {
      // Replace with your logic to switch to variant image
      const variantImage = document.querySelector(`img[data-image-id="${imageId}"]`);
      if (variantImage) {
        document.querySelector('.product__media img').src=variantImage.src;
      }
    } else {
      // No variant image, fallback to featured
      document.querySelector('.product__media img').src=featuredImage;
    }
  });
});

Now you have to test on the product page which has variants.

Thanks

[Ryu888]

Thank you for your help thescriptflow
Password : 123456

I will try this steps and where I should put code after I found that code?

[TheScriptFlow]

I gave you detailed guide you can read my reply again.

I mention two theme files.

1. main-product.liquid or product.liquid.
2. theme.js

Please try to paste the code and let me know if this is work for you. Otherwise I provide you another code that works.

Thanks

[Ryu888]

Couldn’t find this code sir

variant.addEventListener(‘change’, function(){
// code that updates image
});

[TheScriptFlow]

May I know where you check this coding?

Or would you like to share the collab code in the p/m so that I personally take a look and add the featured image as a first image.

[Ryu888]

I checked main-product.liquid or product.liquid.

Since I asked some designer to make my shop so I dont really know the code setting

[TheScriptFlow]

I just send you a p/m. Waiting for your reply.

[Dotsquares]

Hi @Ryu888 ,

Yes, you can definitely show the featured image first and only change it when a variant is selected. By default, Shopify themes often auto-switch to the first variant image, but you can customize this behavior.

Here’s how you can do it:

Solution (using JavaScript):

You’ll need to modify your product page JavaScript to prevent the image from switching automatically when the page loads.

1. Locate your product page JavaScript file, often found in:

• Assets/product.js or similar

• Or sometimes directly within your theme files (like product-template.liquid or main-product.liquid)

2. Prevent automatic variant image switching on load: Find the code that changes the main image when a variant is selected. It’ll look something like this:

js

if (variant && variant.featured_image) {
updateProductImage(variant.featured_image);
}

Modify it so it only triggers when the user selects a variant manually, not on initial page load. For example:

let variantSelectedManually = false;

document.querySelectorAll(‘input[name=“id”], select[name=“id”]’).forEach(input => {
input.addEventListener(‘change’, () => {
variantSelectedManually = true;
const selectedVariant = getSelectedVariant(); // use your theme’s variant selector logic
if (selectedVariant && selectedVariant.featured_image) {
updateProductImage(selectedVariant.featured_image);
}
});
});

// Prevent auto-switching on initial load
if (!variantSelectedManually) {
// Do not update the image
}

3. Or an easier approach (if using Dawn theme or similar): You can remove or comment out the media_gallery.update() call that happens on variant change inside product-form.js.

Let me know your theme name and I’d be happy to give more theme-specific help if needed!

Hope this helps