The slideshow section in Shopify is a great way to highlight products, promotions, or brand visuals. However, depending on your theme, the default colors of the slideshow navigation arrows and pagination may not match your store’s branding.
In this guide, I’ll show you how to customize the slideshow controls’ colors using simple CSS.
1. Check Which Control Style You Are Using On Your Store
The code we need to add will vary slightly depending on the type of controls your slideshow has assigned. The first step is to check which control style you are using and, if you prefer a different one, update it before adding any modifications.
Inside Shopify’s Theme Editor, select your slideshow and look for the Pagination Style menu in the settings. Choose between Counter, Numbers, and Dots. Save your selection and then proceed to the next step to update the colors.
2. Add Custom CSS To Your Slideshow
Scroll to the bottom of the slideshow settings and locate the Custom CSS field. From the following code, add the blocks that apply to the pagination style you selected in the previous step. Make sure to use the colors that match your branding. You can replace the colors included here with other CSS color names, HEX values, RGB codes, etc.
/* use this first to color the arrows, it might modify some numbers too, but not the dots */
.slider-button {
color: blue;
}
/* changes color of numbers in the Counter Pagination Style */
.slider-counter {
color: red;
}
/* changes color of numbers in the Numbers Pagination Style */
.slider-counter__link--numbers {
color: green;
}
/* changes color of the active number in the Numbers Pagination Style */
.slider-counter__link--active.slider-counter__link--numbers {
color: lightblue;
}
/* changes color of the dots in the Dots Pagination Style */
.slider-counter__link--dots .dot {
color: pink;
background-color: yellow;
border-color: orange;
}
/* changes color of the active dot in the Dots Pagination Style */
.slider-counter__link--active.slider-counter__link--dots .dot {
background-color: gray;
border-color: purple;
}3. Save And Test Your Changes
Once you have added all the desired changes, save your theme and reload your website to confirm that everything appears as you envisioned.
Customizing your slideshow controls makes your Shopify store look more polished and aligned with your branding. With just a few lines of CSS, you can personalize the arrows, dots, and numbers to better match your store’s aesthetic.
Need more help? Feel free to reach out!