Slideshow pagination in Spotlight theme

Store Design
, , ,

Topic summary

A user needed to customize the slideshow pagination colors in the Spotlight theme. The default color palette settings weren’t affecting the pagination bar, which they wanted to change to background color #334843 with dots/arrows in #F3F3F3.

Solutions Provided:
Three community members offered CSS code solutions, all following a similar approach:

  • Navigate to Online Store → Themes → Edit Code
  • Locate the CSS file (base.css, theme.css, style.css, or main.css)
  • Add custom CSS targeting .slideshow__controls, .slider-counter__link, and .slideshow__autoplay elements

The solutions varied slightly in specificity and selectors but targeted the same elements to override default styling.

Resolution:
The issue was successfully resolved. The original poster confirmed one solution worked perfectly and improved page smoothness.

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

Hi, i’m using Spotlight theme and i have a pagination bar that i cant seem to change the color of. would like it to be the same as the background #334843 and the dots/arrows to be #F3f3f3 , but changing the color pallet does not seem to do anything.

PetterB_0-1738684705313.png
PetterB_0-1738684705313.png1276×612 362 KB

Any advice is appreciated

Flawless Norway

1 Like
2

Hi @PetterB ,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

.slideshow__controls.slideshow__controls--top.slider-buttons.slideshow__controls--border-radius-mobile {
    background: #334843 !important;
}

.slider-counter__link--active.slider-counter__link--dots .dot {
    background: white !important;
}

.slideshow__autoplay path {
    fill: white !important;
}
1 Like
3

Hi @PetterB

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. 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:
.slideshow__controls.slideshow__controls--top {
    background: #334843;
}
.slider-counter__link--active.slider-counter__link--dots .dot {
    background-color: #F3f3f3  !important;
}
.slider-counter__link--dots .dot {
    border-color: #F3f3f3 !important;
}
.slideshow__autoplay path {
    fill: #F3f3f3 !important;
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
4

Hi @PetterB

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

Hope this can help you solve the issue

Best regards,

Richard | PageFly

1 Like
5

Thank you for your solution, worked like a charm. The page was instantly smoother. :slightly_smiling_face:

1 Like