Re: Change color of pagination style of active slide

adisicoffeeindi · ‎04-25-2024

How can I make my slide show's active tab to be of different color.

I have added images for better understanding.

Website- adisicoffee.com

Regards.

This

To This

Dan-From-Ryviu · ‎04-25-2024

Hi @adisicoffeeindi

Please go to your Online Store > Themes > Edit code > open theme.liquid file, add this code below after <head>

<style>
#MainContent .slider-counter__link--active.slider-counter__link--dots .dot {
    background: #000 !important;
}
</style>

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Mike-Consentik · ‎04-25-2024

Hi @adisicoffeeindi

This is Mike from Omega

You can add this CSS code

#shopify-section-template--17757424419133__8d2b6d2b-e2ca-45de-9c2d-de958c2a77f1 .slider-counter__link--dots.slider-counter__link--active .dot {
    background: #333 !important;
}

If you find this helpful, please give it a like or mark it as a solution.
Consentik GDPR Cookie Banner: Effortlessly stay in compliance with EU GDPR and CCPA with Google Consent Mode V2. Free plan available and 24/7 Support

View solution in original post

Dan-From-Ryviu · ‎04-25-2024

Hi @adisicoffeeindi

Please go to your Online Store > Themes > Edit code > open theme.liquid file, add this code below after <head>

<style>
#MainContent .slider-counter__link--active.slider-counter__link--dots .dot {
    background: #000 !important;
}
</style>

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Mike-Consentik · ‎04-25-2024

Hi @adisicoffeeindi

This is Mike from Omega

You can add this CSS code

#shopify-section-template--17757424419133__8d2b6d2b-e2ca-45de-9c2d-de958c2a77f1 .slider-counter__link--dots.slider-counter__link--active .dot {
    background: #333 !important;
}

If you find this helpful, please give it a like or mark it as a solution.
Consentik GDPR Cookie Banner: Effortlessly stay in compliance with EU GDPR and CCPA with Google Consent Mode V2. Free plan available and 24/7 Support

PageFly-Oliver · ‎04-25-2024

Hi @adisicoffeeindi ,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file -> Save

<style>
#MainContent .slider-counter__link--active span{
background:black !important
}
</style>

I see your site great but I want to suggest a small idea is you can add 1 more button CTA for the slideShow

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!

PageFly - #1 Page Builder for Shopify merchants.

All features are available from Free plan. Live Chat Support is available 24/7.