Bring Pagination inside slider Design

SutReet · ‎11-10-2024

Hi There,

Need to get the pagination inside the slide.

and add an announcement bar below. This theme does not have an option to add an announcement bar in the template section.

Website- Sutreet.in

Dan-From-Ryviu · ‎11-11-2024

Please update previous code

html #shopify-section-template--16561525194838__slideshow_kezVWj .slider-buttons {
    display: flex;
    bottom: 0;
    border: unset;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0px);
}

- 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

SutReet · ‎11-10-2024

Need pagination inside slides.
Please help with the same.

Dan-From-Ryviu · ‎11-10-2024

Hi @SutReet

Please add this code to theme.liquid file after <head> in Online Store > Themes > Edit code

<style>
html #shopify-section-template--16561525194838__slideshow_kezVWj .slider-buttons {
display: flex;
top: -46px;
border: unset
}
html #shopify-section-template--16561525194838__slideshow_kezVWj .slideshow__autoplay.slider-button {
border-left: unset;
}
</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.

SutReet · ‎11-11-2024

Hi Dan,

It's not coming in the phone view.

Dan-From-Ryviu · ‎11-11-2024

Please update previous code

html #shopify-section-template--16561525194838__slideshow_kezVWj .slider-buttons {
    display: flex;
    bottom: 0;
    border: unset;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0px);
}

- 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.

SutReet · ‎11-12-2024

Hi @Dan-From-Ryviu

Thanks for this. Working.

Dan-From-Ryviu · ‎11-12-2024

Very welcome! Could you mark it as solved and like?

- 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.