Hide/Remove variant product images debut theme mobile view

Taylortth
Tourist
8 0 2

Hello, 

I was able to hide the product thumbnails that are displayed below the product photo using the code below by adding it to the bottom of the theme.scss.liquid file. However, this is only working for the desktop view and not mobile view. I would also like to hide the thumbnails on mobile too. Thank you, any help is appreciated. 

 

/*================ Hide Thumbnails beneath Main product image ================*/

.product-single__thumbnails {
display: none;
}

KetanKumar
Shopify Partner
16931 1850 6334

Hello, @Taylortth 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
andy_shop_elev
Tourist
4 0 0

Hello,

 

@KetanKumar Having a similar issue with Mobile still displaying the variant images.

 

Any help would be appreciated.

 

Thanks!

0 Likes

Hey @andy_shop_elev ,

Add this too in your assets-->theme.css file.

 

@media only screen and (max-width: 749px){
.product-single__thumbnails {
display: none;
}
}

 

Please do let me know if it works for you.
Thanks

Zeian Shahzad | Designer | Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Email: shopify.zeian@gmail.com
Cheers!!
0 Likes
andy_shop_elev
Tourist
4 0 0

@Zeian_Shahzad  Thanks for the reply and suggestion

Tried the solution below, but unfortunately it did not remove the variant images.

-Andrew

0 Likes

Please share your website url.

Zeian Shahzad | Designer | Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Email: shopify.zeian@gmail.com
Cheers!!
andy_shop_elev
Tourist
4 0 0

 

 

Thanks

0 Likes

@andy_shop_elev , Add this

@media only screen and (max-width: 749px){
.thumbnails-wrapper {
display: none;
}
}

 

Zeian Shahzad | Designer | Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Email: shopify.zeian@gmail.com
Cheers!!
andy_shop_elev
Tourist
4 0 0

Amazing.

 

Thank you!

0 Likes

You're welcome.

Zeian Shahzad | Designer | Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Email: shopify.zeian@gmail.com
Cheers!!
0 Likes