How can i change slideshow dots design

Store Design

Topic summary

A user wants to customize the appearance of slideshow navigation dots on their Shopify store (https://e018c6-82.myshopify.com/).

Desired Change:

  • Transform default slideshow dots into a different visual design
  • Images were provided showing the current state and target design

Solution Provided:
A community member offered a CSS-based fix:

  1. Navigate to Admin → Online Store → Theme → Edit code
  2. Locate the base.css file
  3. Add custom CSS snippet at the end of the file to modify dot styling and hide previous/next buttons
  4. Save and reload to see changes

Status: The discussion appears resolved with a working code solution provided. The helper requested feedback through likes/marking as solution if successful.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

How can i change slideshow dots design
from This

2222222.PNG

to this

111111111.PNG
111111111.PNG411×103 370 Bytes

thanks in advance

2

What’s your store url ?

3

https://e018c6-82.myshopify.com/

4

here is
https://e018c6-82.myshopify.com/

5

HI bro @Martin299 ,

I have reviewed your requirement, you just need to edit css script and the issue will be resolved. You can follow my instructions!

Step 1: Go to Admin → Online store → Theme > Edit code:

BSSCommerceB2B_0-1722937182552.png
BSSCommerceB2B_0-1722937182552.png400×195 26.3 KB

Step 2: Search for the file base.css. And add this code snippet to the end of the file.

button.slider-counter__link.slider-counter__link--dots.link.slider-counter__link--active {
    scale: 1.5 !important;
}
button.slider-button.slider-button--prev, button.slider-button.slider-button--next {
    display: none !important;
}

Step 3: Save your code and reload this page.

The result will be:

BSSCommerceB2B_1-1722937243652.png
BSSCommerceB2B_1-1722937243652.png1303×510 881 KB

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir!

1 Like