Does anyone knows how to change the color of this dots . its refresh theme
Topic summary
A user seeks help changing the color of pagination dots in Shopify’s Refresh theme, providing a screenshot showing the current dot indicators.
Solution Provided:
Another user offers a CSS-based fix with step-by-step instructions:
- Navigate to Shopify admin → Online Store → Themes
- Access theme code editor via Actions → Edit code
- Locate the CSS file (base.css, style.css, or theme.css) in the Assets folder
- Add custom CSS targeting slideshow pagination elements
The CSS code targets:
.slider-counter__link--dotselements for inactive dots.slider-counter__link--activefor the active dot- Border colors and background colors
A result screenshot demonstrates the implementation, showing red-colored pagination dots. The discussion appears resolved with a working technical solution.
1 Like
Hi @DenVug ,
Try this one.
- From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
- Find the theme that you want to edit and click on “Actions” and then “Edit code”.
- In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
- And Save.
.slideshow__controls.slider-buttons.no-js-hidden.slideshow__controls--border-radius-mobile * {
color: red;
}
button.slider-counter__link.slider-counter__link--dots.link.slider-counter__link--active span.dot {
background:red;
}
button.slider-counter__link.slider-counter__link--dots.link span.dot {
border-color: red;
}
Result:
I hope it help.
1 Like