Color variant bugged - image display is not shown, at a random pattern

[ZinoJK]

I have 8 different color variants and upon clicking each, ONE of them is not shown in random pattern.

These are my observations: www.mycalmfy.com

1. Color 1 is not shown this time, and when I refresh the page,

2. Color 1 OR some other color (2~8) is not shown at that time.

3. Always only ONE color is not shown.

I recently used this link to troubleshoot main product image not shown: Dawn Theme - Need product page main image to remain as 1st image when using variants - Shopify Commu...

Thank you

[Darshanp712]

Hello @ZinoJK, In your store for which product you have talked about the issue? Please let me know! 

Thanks!

[ZinoJK]

Its the nest bed, 1st item from the left. Thank you!

[Darshanp712]

Hello @ZinoJK, Thanks for the reply. 

I can see when we change the variant it has the "display: none;" property in the CSS. Please see the screenshots. In 1st screenshot, it has "display: none;" and in 2nd screenshot I disabled "display: none;" and it will reflect the "display: block;" property.

You can put it like this,

@media screen and (min-width: 750px) {

 .product--thumbnail_slider .product__media-item:not(.is-active) {

1.   display: block; 

}

}

Do the changes in CSS. If it does not work then please reply.

Thanks.

[Darshanp712]

Or you can just remove that class of the images from your CSS.

Remove the class ".product--thumbnail_slider .product__media-item:not(.is-active) " from the below code.

@media screen and (min-width: 750px) {

.product--thumbnail .product__media-item:not(.is-active),  .product--thumbnail_slider .product__media-item:not(.is-active) {

1. display: none;

}

}

and it will have to like this,

@media screen and (min-width: 750px) {

.product--thumbnail .product__media-item:not(.is-active) {

1. display: none;

}

}

Please try this if it still does not work then please reply.

Thanks!!

[ZinoJK]

Thank you so much for looking into it, html/css coding is not my main area,

Just one quick silly question,

How do i access the place where I am supposed to edit those codes you have provided above?

Thank you

[Darshanp712]

@ZinoJK You have to put custom CSS in your edit code. are you familiar with the edit code of the shopify admin side?

Please let me know, then we can go further.

[ZinoJK]

I am semi-familiar with the edir code of the shopify, IF you could please show me the screenshots / step-by-step guide on how to edit code above..! Hope I am not asking too much.. Thank you in advance

[Darshanp712]

Yes sure, Please wait I'll be attached a step-by-step process to go through it.

Thanks!

[Darshanp712]

Hello @ZinoJK , Please go through the below screenshots. and if anywhere you are stuck then reply to me.

please check it out and see the output if it works. Please do it in a staging theme not in a live theme for tasting purposes. If it works then implement in the live theme store.

[ZinoJK]

Would it be done in dawn theme? It seems It is abit different to what my codes are.

custom.css already exists so i named it custom2Fix.css.

Stuck on the 5th screenshot above..!

I understand it as putting that line of code just below base.css on line 259 on your screenshot,

but when i search base.css on my codes, it is showing as attached

[Darshanp712]

Hello @ZinoJK, please add it below the "base.css" named line. below 280th line. Please check it.

[ZinoJK]

I have attached my codes as a reference,

the site still has same issue..!

  

[Darshanp712]

Hello @ZinoJK , please remove that space in ".product__media-item--variant:first-child". Add like below css.

.product__media-item--variant:first-child {
    display: block !important;
}

[ZinoJK]

You are a legend, Darshnp712, Really appreciate your time and effort,

it is working as intended!!! Thank you so much 🙂

But now it is doing this...

[ZinoJK]

This only happens on PC it seems, mobile is working as intended.

Observation

1. color variant clicked and displayed

2. click on the other product photos and that photo is displayed below the color variant photo

[Darshanp712]

Okay, I see. Let me check on it, please. and kindly give me the name of the theme and which version of that theme you are using now.

[ZinoJK]

It is Dawn Ver 13.0.0 Thank you, appreciate it.

[Darshanp712]

Hello @ZinoJK, Your "slider-component" occurred 2 times in that structure and I think that is the issue in that we're stucked!