Dawn Theme - Slideshow section: change the color of the bottom page bar

Store Design
, , , , ,

Topic summary

Goal: Change the Dawn theme slideshow’s bottom “page turn” bar to #cdcabe to match the site background.

Attempts made (unsuccessful):

  • Added CSS in the slideshow section targeting multiple classes on .slideshow__controls with background set to #cdcabe.
  • Added rules in base.css for:
    • .slideshow__controls … button { color: #CDCABE; }
    • .slider-counter__link–dots .dot { border/background: #CDCABE; }
    • .slider-counter__link–active … .dot { background: #CDCABE; }

Latest suggestion:

  • A reply proposes a simpler rule:
    • .slidesh ow__controls { background-color: #cdcabe; }
    Note: The selector appears to contain a spacing typo (“slidesh ow__controls”), which may need correcting to target the intended element.

Context:

  • “Dawn” is Shopify’s default theme; the “page turn” bar refers to the slideshow controls/pagination area at the bottom.

Status:

  • No confirmation that the suggested CSS resolves the issue. Discussion remains open/unsolved. An image attachment illustrates the white bar currently visible.
Summarized with AI on December 12. AI used: gpt-5.
1

Hello,

Looking for some help in changing the color of the bottom ‘page turn’ bar of the slideshow section in the Dawn theme?

I would like to turn the white to #cdcabe to match the background of the site. I’ve attached a picture of the current white bar for reference.

Screenshot 2024-12-17 at 1.31.19 PM.png
Screenshot 2024-12-17 at 1.31.19 PM.png300×500 22.4 KB

I’ve tried the following and have been unsuccessful:

  1. Adding custom CSS to the slideshow section

.slideshow__controls.slider-buttons.no-js-hidden.slideshow__controls–border-radius-mobile {

background: #cdcabe;

}

  1. Adding the following to Base.css

.slideshow__controls.slider-buttons.no-js-hidden button {

color: #CDCABE;

}

.slider-counter__link–dots .dot {

border: #CDCABE;

background: #CDCABE;

}

.slider-counter__link–active.slider-counter__link–dots .dot {

background: #CDCABE;

}

Any other ideas?

2

Hope this code is helpful to you!

.slideshow__controls {
    background-color: #cdcabe;
}