Shopify themes, liquid, logos, and UX
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.
Any advice is appreciated
Solved! Go to the solution
This is an accepted solution.
Hi @PetterB
Try this one.
.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!
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;
}
This is an accepted solution.
Hi @PetterB
Try this one.
.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!
Thank you for your solution, worked like a charm. The page was instantly smoother. 🙂
Hi @PetterB
This is Richard from PageFly - Shopify Page Builder App
Please add this code to your theme.liquid above the </head> 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 </head>
<style>
#shopify-section-template--17725509533867__slideshow_XA9zJc .slideshow__controls.slideshow__controls--top {
background: #334843;
}
#shopify-section-template--17725509533867__slideshow_XA9zJc .slider-counter__link--active.slider-counter__link--dots .dot {
background-color: #F3f3f3 !important;
}
#shopify-section-template--17725509533867__slideshow_XA9zJc .slider-counter__link--dots .dot {
border-color: #F3f3f3 !important;
}
#shopify-section-template--17725509533867__slideshow_XA9zJc .slideshow__autoplay path {
fill: #F3f3f3 !important;
}
</style>
Hope this can help you solve the issue
Best regards,
Richard | PageFly
Please let me know if it works by giving it a Like or marking it as a solution!
➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)
All features are available from Free plan. Live Chat Support is available 24/7.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025