Solved

Making Variants Visible for Mobile, but not Desktop

Trevor_Carr8
Tourist
8 0 0

Hi all,

I just followed the instructions in this video ( https://www.youtube.com/watch?v=ARpSIscriYA&list=PLgS4mrk5DcAJ0h8OY68OmiNcBVE9s6HWS&index=4&t=276s ) to hide variant images besides the one selected. It worked very well! The only issue is that the variant thumbnails disappeared on mobile. Is anyone able to assist me in making them visible on mobile? I would even be fine if all the variants were visible on mobile.

variant thumbnails mobile.jpg

 

Please let me know if you are aware of any potential solution.

Thank you!!

Accepted Solution (1)
JHKCreate
Shopify Expert
3571 639 916

This is an accepted solution.

Add the following code to our theme.scss.css:

@media only screen and (max-width: 749px)
{
li.product-single__thumbnails-item.product-single__thumbnails-item--medium.js.slick-slide.slick-cloned {
    display: block!important;
}
}


let me know if that works! 

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com

View solution in original post

Replies 7 (7)

JHKCreate
Shopify Expert
3571 639 916

Hi @Trevor_Carr8 

Would you mind sharing your store's URL so we can assist on that?

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com
Trevor_Carr8
Tourist
8 0 0
JHKCreate
Shopify Expert
3571 639 916

This is an accepted solution.

Add the following code to our theme.scss.css:

@media only screen and (max-width: 749px)
{
li.product-single__thumbnails-item.product-single__thumbnails-item--medium.js.slick-slide.slick-cloned {
    display: block!important;
}
}


let me know if that works! 

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com
Trevor_Carr8
Tourist
8 0 0

Unfortunately, it didn't work @JHKCreate ... I appreciate you getting back though!

JHKCreate
Shopify Expert
3571 639 916

Are you sure? I can see them now:

JHKCreate_0-1613688086281.png

Let me know!

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com
Trevor_Carr8
Tourist
8 0 0

@JHKCreate I just closed out the page and went back, it does work! Thank you so much! 

JHKCreate
Shopify Expert
3571 639 916

Amazing!

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com