I'd like to change the background color of my slideshow dots area on Dawn theme

Technical Q&A

Topic summary

A user seeks to change the background color of slideshow navigation dots in their Shopify Dawn theme store.

Initial Solutions Provided:

  • Add CSS targeting .shopify-section.slideshow .dot with custom background-color to the base.css file
  • Include hover and active states for the dots
  • Alternative approach: insert CSS code in the theme’s liquid file before the </body> tag

Current Issue:

  • The user implemented suggested CSS but reports it doesn’t fully work
  • Specifically wants the white background area around the dots to be black as well
  • The problem remains unresolved and requires immediate attention

Status: Ongoing - the user is awaiting a solution that addresses both the dot color and the surrounding background area.

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

I’d like to chnage the background color of the slideshow’s dots on my store. Can you please suggest me a solution, please? My store is: www.sportswearfy.com

2

@Sportwearfy_of

Hi Kindly add the bellow CSS code in the “base.css” file.

.shopify-section.slideshow .dot {
background-color: red; /* change the color according to you*/
}

.shopify-section.slideshow .active, .shopify-section.slideshow .dot:hover{
background-color: #000000; /* change the color according to you*/
}

SWSolutions_0-1682132987854.png
SWSolutions_0-1682132987854.png776×364 129 KB

3

Hi @Sportwearfy_of ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea for solution:

Step 1. Go to Online Store → Theme → Edit code
Step 2. Open your theme.liquid theme file
Step 3. Paste below code before :

Note: You can adjust value to fit your store

Hope my answer will help you.

Best regards,

Victor | PageFly

4

I did that, but It doesn’t work

5

It did do something. But I want the white background area to be black as well. That’s the issue I want to address ASAP.

6

Hi @Sportwearfy_of

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Online Store ->Theme ->Edit code

Assets ->Base.css

.title-wrapper-with-link {
    margin: 0px !important;
}

Hope you find my answer helpful!

Best regards,

Richard | PageFly