How can I quickly change the pagination style on my website?

AryavK · ‎11-28-2023

OK! Let me get to the point, i have been trying for days to change the pagination style of my website from

to

now i know the shopify team takes days to answer, but i need it ASAP or you don't want to see my dark side. Please help me guys, I really need to change it, refresh theme.

Store URL - faithandyou.in

Theme - Refresh

faith&you

Dan-From-Ryviu · ‎11-28-2023

Hi, please update the code

<style>
.slider-buttons .slider-counter__link {
    margin: 1rem 4px !important;
    padding: 0px !important;
    width: 100px;
    background: #ffffff33;
}
.slider-mobile-gutter .slider-buttons {
    position: absolute;
    left: 50%;
    bottom: 10px;
    z-index: 99;
    border: unset;
    transform: translate(-50%, 0px);
}
.slider-buttons .slider-button { display: none !important }
.slider-buttons .slider-counter__link--dots .dot {
    border-radius: unset;
    width: 10rem;
}
.slider-buttons .slider-counter__link {
    padding: 1rem 4px;
}
.slider-buttons .slider-counter__link--dots .dot {
    background: #ffffff3d;
}
.slider-buttons .slider-counter__link--active.slider-counter__link--dots .dot {
   background: #fff;
   transition: 0.4s linear;  
   transition-property: width, background-color;    
   width: 100%; 
   animation: progressAnimationStrike 3s;   
}

@keyframes progressAnimationStrike {
     from { width: 0 }
     to   { width: 100% }
}    
</style>

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- 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.
- En...Sign up now.

View solution in original post

Dan-From-Ryviu · ‎11-28-2023

Go to your Online store > Themes > Edit code > open theme.liquid file, add this code after <head> tag

<style>
.slider-buttons .slider-button { display: none !important }
.slider-buttons .slider-counter__link--dots .dot {
    border-radius: unset;
    width: 10rem;
}
.slider-buttons .slider-counter__link {
    padding: 1rem 4px;
}
</style>

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- 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.
- En...Sign up now.

AryavK · ‎11-28-2023

wow, that is fast, though can you please make it inside the slideshow section

like this and also make it like progress bar

sorry for the mean things i said about the support team, you are fast in replying and i am liking the solution till now, can you still please give me the code like i asked.

thank you so much @Dan-From-Ryviu

faith&you

Dan-From-Ryviu · ‎11-28-2023

Please update code to this

<style>
.slider-mobile-gutter .slider-buttons {
    position: absolute;
    left: 50%;
    bottom: 10px;
    z-index: 99;
    border: unset;
    transform: translate(-50%, 0px);
}
.slider-buttons .slider-button { display: none !important }
.slider-buttons .slider-counter__link--dots .dot {
    border-radius: unset;
    width: 10rem;
}
.slider-buttons .slider-counter__link {
    padding: 1rem 4px;
}
.slider-buttons .slider-counter__link--dots .dot {
    background: #ffffff3d;
}
.slider-buttons .slider-counter__link--active.slider-counter__link--dots .dot {
    background: #fff;
}
</style>

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- 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.
- En...Sign up now.

AryavK · ‎11-28-2023

man @Dan-From-Ryviu

you are goated🐐

thank you so much, when i get my first sale, i will paypal you that money you g

faith&you

Dan-From-Ryviu · ‎11-28-2023

You are very welcome

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- 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.
- En...Sign up now.

AryavK · ‎11-28-2023

I have one last request g,

can you turn it into a progress bar,

like this

it shows when it will move to the next slide?

thanks g,

you are the best

faith&you

Dan-From-Ryviu · ‎11-28-2023

Hi, please update the code

<style>
.slider-buttons .slider-counter__link {
    margin: 1rem 4px !important;
    padding: 0px !important;
    width: 100px;
    background: #ffffff33;
}
.slider-mobile-gutter .slider-buttons {
    position: absolute;
    left: 50%;
    bottom: 10px;
    z-index: 99;
    border: unset;
    transform: translate(-50%, 0px);
}
.slider-buttons .slider-button { display: none !important }
.slider-buttons .slider-counter__link--dots .dot {
    border-radius: unset;
    width: 10rem;
}
.slider-buttons .slider-counter__link {
    padding: 1rem 4px;
}
.slider-buttons .slider-counter__link--dots .dot {
    background: #ffffff3d;
}
.slider-buttons .slider-counter__link--active.slider-counter__link--dots .dot {
   background: #fff;
   transition: 0.4s linear;  
   transition-property: width, background-color;    
   width: 100%; 
   animation: progressAnimationStrike 3s;   
}

@keyframes progressAnimationStrike {
     from { width: 0 }
     to   { width: 100% }
}    
</style>

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- 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.
- En...Sign up now.

AryavK · ‎11-28-2023

man you are the best bro

thanks

i will definitely tip you when i get my first sale

faith&you

AryavK · ‎11-28-2023

you are the king of kings

faith&you

How can I quickly change the pagination style on my website?

How can I quickly change the pagination style on my website?

Community Blog Articles