Re: How To Show Only Selected Variant Images in Dawn Theme

suryagoswami7 · ‎09-18-2022

Hi, how can i show only the selected variant images in the dawn theme. please help. Thanks in advance.

AvadaCommerce · ‎09-18-2022

You can check following steps:

1.Add following code below <head> in “Theme.liquid” file

2. Add thumbnail-color=”{{ media.alt }}” as shown in the screenshot below in main-product.liquid:

3. Dashboard -> Products -> Edit Product
On the Edit Product screen you will see the Media section just like the screenshot below:

Click on all the media images and add Alt Text as per the screenshot below:

4. Now edit “global.js” file and add this.filterMedia(); on line number 769. After adding this code add following JS function in “global.js” file on line number 774:

filterMedia() {

$('[thumbnail-color]').hide();

var selected_variant = this.currentVariant.featured_media.alt;

var selected_attribute = '[thumbnail-color="' + selected_variant + '"]';

if (selected_variant == selected_variant) {

$(selected_attribute).show();

} }

Once done you should be able to see only selected variant images.

I hope this helps.

banned

suryagoswami7 · ‎09-19-2022

Hey @AvadaCommerce , Thanks for your reply. I already saw this in a video. Its not working for me. Is there a alternate way for it? i found another blog too but it is also not working.

AvadaCommerce · ‎09-19-2022

Hi @suryagoswami7 ,

Sorry if it is not working. That is the least I could do.

I think you can contact support themes from Shopify , then they can help you check it much more.

Have a nice day!

banned

suryagoswami7 · ‎09-20-2022

Thanks for your response. I figured it out, Used another method.

ececiper · ‎11-10-2022

Hi @Suryagoswami7,

Can you share the method that worked for you?

jehan70 · ‎01-21-2023

Can you share the method that worked for you?

Inspirebylina · ‎01-22-2023

Why don't you share the method that worked for you for the community?

websensepro · ‎08-01-2023

Tried and tested up to Dawn 11.0.0

Let me know if it does not work. Happy to help

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

Free Shopify Beginner Tutorial

BrucesWaynee · ‎08-17-2023

Well this works almost. Tried it right now - on the phone it becomes right. All the colors are split. But on desktop, i dosent work if you use the thumbnail carousel. Does anyone have the fix for this?