Slideshow navigation section different color than the background.

Store Design
, , , ,
1

Hello everybody,
I am using Dawn theme & trying to make my background a solid yellow color. /
The Slideshow section has a little white pagination section/slideshow navigation at the bottom. When i change background color this remains white. Can somebody help?

popemgame.com (its still in the early works :'D)

2

Hi @sifis269 ,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

.slideshow__controls {
    background-color: yellow !important; /* Background color change */
    border-radius: 0 !important; /* Remove rounded corners if needed */
}

.slider-buttons button {
    background-color: transparent !important; /* Transparent buttons */
    border: none !important; /* Remove border */
}

.slider-buttons button svg {
    fill: black !important; /* Change arrow icon color */
}

.slider-counter {
    color: black !important; /* Change pagination number color */
}
1 Like
3

thank you so much!! solved!!

1 Like
4

Yep, that white strip is a common Dawn thing — it’s coming from the slideshow pagination container, not the main section background.

In Dawn, the slideshow has a separate wrapper for the dots/navigation that keeps its own background. You can fix it by targeting that element with CSS, something like setting the background on the slideshow controls container to match your yellow. Usually it’s a class like .slideshow__controls or .slider-buttons, depending on your Dawn version. Once that’s set, the white bar disappears and blends into the section.

If you don’t feel like hunting selectors or touching CSS, I built an app called Easy Edits that handles this kind of thing visually. You just click the slideshow, change the background (or tell the AI what you want), and it applies only to that piece. I’m the developer.

https://apps.shopify.com/easy-edits