How to invert Slideshow Bar in Dawn Theme

Store Design
, ,

Topic summary

A user wants to invert the slideshow navigation bar in Shopify’s Dawn theme from a white background with black dots to a black background with white dots.

Solution Provided:
A developer shared CSS code to add to assets/component-slider.css:

  • Changes .slideshow__controls background to black
  • Sets slider button colors to white
  • Modifies slider counter link dots to white with appropriate borders

Outcome:
The CSS solution successfully resolved the issue. The user confirmed it worked as intended.

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

Hey,

I want to invert the slideshow bar into Black background with white dots but could not find the right code.

So I want to turn this:

Help 1.png
Help 1.png127×199 21.7 KB

Into this:

123.png
123.png1356×196 11.9 KB

2

@richjj

Please share your store URL!

Thanks!

3

code: koriclothing

4

@richjj

Please add the following CSS code to your assets/component-slider.css bottom of the file.

.slideshow__controls {background: #000 !important;}
.slider-button {color: #fff!important;background: #000!important;}
.slider-counter__link--active.slider-counter__link--dots .dot {background-color: #fff!important;}
.slider-counter__link--dots .dot {border: 0.1rem solid #fff!important;}

Thanks!

5

Thank you, it worked!

1 Like
6

@richjj

If helpful then please Like Solution.

Welcome again Thanks!