Hi there
I am using Dawn theme. I was wondering if someone could maybe assist me please. How can I change the arrows’ shape and colour on my featured collection? It is currently square shape, I would like to change it to circles.
Thank you 
Topic summary
Change arrow shape and color in the Shopify Dawn theme’s featured collection slider.
-
Goal: Replace square slider arrows with circular ones and change their color.
-
Context: Dawn theme; arrows in the featured collection slider (desktop). Images were shared to illustrate the desired look, and a site preview link was provided.
-
Action: Add custom CSS in Edit code > base.css.
-
Solution details: Targeted .collection .slider-component-desktop .slider-button (including disabled state). Set background to black (#000), icon/text color to white (#fff), full opacity, 1px black border, and made arrows circular using border-radius: 50%. A hover rule ensured the color remains white.
-
Outcome: The CSS change worked as intended (circular arrows with updated colors). The helper offered further assistance if needed.
-
Status: Resolved; no disagreements or open questions.
-
Notes on terms: “Dawn” is Shopify’s default theme; “base.css” is the theme’s main stylesheet; “slider-button” is the CSS class controlling the slider arrows.
Hi there, thank you for your reply. I am looking to the change the shape and colour of the arrows on the featured collection. (See picture attached please :))
Okay Can you Share Your Site Preview Link
Add this css and see what color you want to keep then let me change it
Add This css In your Edit code > base.css File.
.collection .slider-component-desktop .slider-button,.collection .slider-component-desktop .slider-button[disabled="disabled"]{
background: #000;
color: #fff;
opacity: 1;
border: 1px solid #000;
border-radius: 50%;
}
.collection .slider-button:not([disabled]):hover{
color:#fff !important;
}
1 Like
Thank you so much. It worked
It’s My Pleasure
You Need More help don’t hesitate to reach out