Solved

Change Pagination Style Refresh Theme

AryavK
Trailblazer
219 9 29

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

Screenshot 2023-11-28 at 3.55.35 PM.png

to

Screenshot 2023-11-28 at 3.55.47 PM.png

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
Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
6916 1305 1334

This is an accepted solution.

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 or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

View solution in original post

Replies 9 (9)

Dan-From-Ryviu
Shopify Partner
6916 1305 1334

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>

Screenshot_3.jpg

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

AryavK
Trailblazer
219 9 29

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

Screenshot 2023-11-28 at 5.07.26 PM.png

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
Shopify Partner
6916 1305 1334

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 or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

AryavK
Trailblazer
219 9 29

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
Shopify Partner
6916 1305 1334

You are very welcome

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

AryavK
Trailblazer
219 9 29

I have one last request g,

can you turn it into a progress bar, 

Screenshot 2023-11-28 at 5.23.56 PM.png

like this

 it shows when it will move to the next slide?

thanks g,

you are the best

faith&you
Dan-From-Ryviu
Shopify Partner
6916 1305 1334

This is an accepted solution.

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 or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

AryavK
Trailblazer
219 9 29

man you are the best bro

thanks

i will definitely tip you when i get my first sale

faith&you
AryavK
Trailblazer
219 9 29

you are the king of kings

faith&you