Main issue: change the slideshow pagination dots in Shopify’s Dawn Theme 9.0.0 from black to white.
What worked: A CSS override added to base.css successfully changed the active dot color.
Follow-up requests: The original poster then asked how to (1) remove the black outline and (2) make the background image grey or semi‑transparent similar to a provided reference screenshot (image attachment central for the desired look). The helper later noted it “seems” solved but did not post a solution.
New interest: Another participant confirmed the white-dot solution works and also requested guidance to remove the black outline and add a grey/semi‑transparent background like the original poster’s page.
Status and open questions:
Hello,
I’d like to change the color of my slideshow dots (image attached) to white. Right now the color corresponds to the “Text Color” of my site which is black and it doesn’t look good with most of my slides.
Can you help me change the inside circle to white? https://shop.coolcookies.com/
Thank you!
This is Lucas from PageFly - Landing Page Builder App
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file base.css
Step 3: Paste the below code at bottom of the file → Save
.slider-counter__link–active.slider-counter__link–dots .dot {
background-color: white !important;
}
Hope that my solution works for you.
Best regards,
Lucas| PageFly
That worked! Is it possible to remove the black outline and make the background image a grey or semi-transparent like the reference image? Thanks
Sorry for missing your message.
I have checked and it seems you have solved this problem. Let me know if you need help
Thank you.
Hello, I tried your solution and it worked.
I also want to know how to remove the black outline and make the background image a grey or semi-transparent like SearchGhost1738 's page.
Could you tell me how to do it?
Thank you in advance.
