How to change the image slider on the product page on mobile to dots

Store Design
,
1

I want the slider that appears on small screens on the product images to show dots that are filled as you advance in the carousel instead of numbers. I also want this to be on top of the image. I have attached an image of how it is on my site navigocross.com and how I want it to look like on the site bluebananabrand.com for example

Captura de ecrã 2024-05-07, às 00.00.22.png
Captura de ecrã 2024-05-07, às 00.00.22.png828×948 917 KB

Captura de ecrã 2024-05-06, às 23.59.56.png
Captura de ecrã 2024-05-06, às 23.59.56.png848×872 81 KB

2

Hello @navigocross ,

  1. Identify which carousel/slider is used in the theme you are using.
  2. Check their breakdown/responsive documentation and example code.
  3. Get back to the theme and find the carousel/slider existing code. Ince found make the changes a/to the documentation.

Thanks

3

I dont understand it. My theme is Dawn 14.0.0

4

I found the answer in this thread: https://community.shopify.com/c/shopify-design/how-can-i-replace-slide-numbers-with-dots-on-my-website/m-p/1893507

But for me, at point 4, I didn’t make changes in ‘main-product.liquid’ because I couldn’t find the code there, but rather in ‘product-media-gallery.liquid’.

1 Like
5

On Sense Theme. This worked like a charme. thanks for the tip!