Changing image thumbnails in Debut Theme

Solved
zhenyathekid
Excursionist
17 0 14

Hi!

I using Debut theme. I have 5 pictures of my product and I want to put all of them in 1 slider under main picture. By default there are 3 pictures and customer should slide to see 2 more. 

zhenyathekid_0-1614683330110.png

 


How can I make them smaller but in 1 row?

website link: perfectodo.com

dmwwebartisan
Shopify Partner
5339 1230 1575

@zhenyathekid 

Please add the following code at the bottom of your assets/theme.css file.

@media only screen and (min-width: 990px){
.product-single__thumbnails-item--medium {flex: 0 0 20% !important;}
}

 

Hope this helps.

Thanks! 

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
zhenyathekid
Excursionist
17 0 14

@dmwwebartisan 

Thanks that worked for pc. How can I optimize it for mobile? Mobile is more important for me.

dmwwebartisan
Shopify Partner
5339 1230 1575

This is an accepted solution.

@zhenyathekid 

Please add the following code for the mobile.

@media only screen and (max-width: 749px){
.product-single__thumbnails-item-slide {width: 62px !important;}
.thumbnails-slider__prev {right: -30px !important;}
.thumbnails-slider__next {right: -30px !important;}
}

 

Thanks! 

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
zhenyathekid
Excursionist
17 0 14

Thanks!
it worked.

Mokai
New Member
1 0 1

Hello,

I was wondering if there are more than 5 images, how do you turn the product thumbnails into a slider/carousel? I am also using debut theme.

Thank you!

My Shopify store is www.paragonnshop.com

zhenyathekid
Excursionist
17 0 14

@Mokai 
Use settings above

0 Likes
dmwwebartisan
Shopify Partner
5339 1230 1575

@Mokai 

Please provide your store password.

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes