Product image slider dots (mobile only) Debut Theme

Store Design
1

Default product page on debut theme has image thumbnails underneath the product but I want the slider dots for mobile only. How can this be achieved?

I would like something similar to the image below.

IMG_7746.jpg
IMG_7746.jpg1242×2061 77.6 KB

2

Hi @solo11 ,

This is Victor from PageFly - Landing Page Builder App.

You can try this code by following these steps:

  • Go to Online Store->Theme->Edit code
  • Asset-> timber.scss
  • Paste the below code at the bottom of the file

@media(max-with:767px){

.grid__item.four-fifths.product-single__photos,.grid__item.one-fifth {width:100%}

.grid__item.one-fifth ul{

  • display: flex !important;
  • justify-content: center !important;

}

.grid__item.one-fifth ul li{

width:16px !important;

height:16px !important;

padding-left:0 !important;

border-radius:64px;

background:black;

margin:0 4px

}

.grid__item.one-fifth ul li img{opacity:0 !important}

}

PageFlyVictor_0-1670474022395.png
PageFlyVictor_0-1670474022395.png261×546 130 KB

Hope my solution works perfectly for you!

Regards,

Victor | PageFly

3

Hi @solo11 ,

Wanted to provide another solution for your reference as well, here are the steps:

  1. Go to Online Store → Theme → Edit code
  2. Find sections/product-template.liquid
  3. Add the following to the top of the file:

Hope this works for you!

Cheers,

Layoutbase - Drag & Drop, Easy Page Builder on Shopify

4

Hey, thank you for your reply.

Your solution worked but the only issues with it is, is that it makes the product image smaller than normal which ruins it’s quality and if someone was to click on the photo then it would open the photo in a cdn.shopify.com URL which just makes it easy for them to just download the photo and its not beneficial. If it did not do that then that would be great and if you are able to provide a solution then I would be thankful for that!

Thank you again

5

Hey, thank you for your reply.

Your solution worked but the only issues with it is, is that it makes the product image smaller than normal which ruins it’s quality and if someone was to click on the photo then it would open the photo in a cdn.shopify.com URL which just makes it easy for them to just download the photo and its not beneficial. If it did not do that then that would be great and if you are able to provide a solution then I would be thankful for that!

Thank you again