How Do I Change My Arrows to the Side of my Slideshow Images?

Lukii37 · ‎01-22-2024

I am having trouble trying to search up how to do it, but it seems that no one has done it.

Dan-From-Ryviu · ‎01-22-2024

Please update the code

<style>
slideshow-component .slideshow__controls {
    justify-content: space-between;
    position: absolute;
    top: 50%;
    z-index: 9;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    border: unset;
}
slideshow-component .slideshow__controls .slider-counter,
slideshow-component .slideshow__controls .slideshow__autoplay {
    display: none;
}
slideshow-component .slideshow__controls .slider-button {
    width: 64px;
    height: 84px;
}
slideshow-component .slideshow__controls .slider-button .icon {
    height: 1.6rem;
}
@media (max-width: 749px) {
slideshow-component .slideshow__controls {
    top: 30%;
}
}
</style>

- Found this helpful? Hit "Like" and "Accept as Solution"! - Feeling generous. ☕ Buy me coffee!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

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 · ‎01-22-2024

What's theme are you using?

- Found this helpful? Hit "Like" and "Accept as Solution"! - Feeling generous. ☕ Buy me coffee!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

Lukii37 · ‎01-22-2024

I am using Taste

Dan-From-Ryviu · ‎01-22-2024

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

<style>
slideshow-component .slideshow__controls {
    justify-content: space-between;
    position: absolute;
    top: 50%;
    z-index: 9;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    border: unset;
}
slideshow-component .slideshow__controls .slider-counter {
    display: none;
}
slideshow-component .slideshow__controls .slider-button {
    width: 64px;
    height: 84px;
}
slideshow-component .slideshow__controls .slider-button .icon {
    height: 1.6rem;
}
@media (max-width: 749px) {
slideshow-component .slideshow__controls {
    top: 30%;
}
}
</style>

- Found this helpful? Hit "Like" and "Accept as Solution"! - Feeling generous. ☕ Buy me coffee!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

Lukii37 · ‎01-22-2024

Hi there, it did work however there is a pause and play on the right arrow which it will not allow me to press next, how do I move that to the bottom of the image?

Dan-From-Ryviu · ‎01-22-2024

Please update the code

<style>
slideshow-component .slideshow__controls {
    justify-content: space-between;
    position: absolute;
    top: 50%;
    z-index: 9;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    border: unset;
}
slideshow-component .slideshow__controls .slider-counter,
slideshow-component .slideshow__controls .slideshow__autoplay {
    display: none;
}
slideshow-component .slideshow__controls .slider-button {
    width: 64px;
    height: 84px;
}
slideshow-component .slideshow__controls .slider-button .icon {
    height: 1.6rem;
}
@media (max-width: 749px) {
slideshow-component .slideshow__controls {
    top: 30%;
}
}
</style>

- Found this helpful? Hit "Like" and "Accept as Solution"! - Feeling generous. ☕ Buy me coffee!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

Lukii37 · ‎01-22-2024

Thank you.

RaghavGoel1 · ‎08-03-2024

Hi Dan,

Thanks for your help - this worked well for my site as well (DAWN THEME)

However, there are 2 issues Im facing, would be extremely helpful if you could help fix. (Both are in mobile version)

1) On mobile, the arrows are not vertically centered... they are slightly towards the top. Can you please look into this?

2) Also, the arrows are appearing on top when Im opening the mobile menu... they are not under the menu but rather on top of it...

Please help fix this...I've tried doing it myself for hours but unable to. Thanks a ton in advance :))

RaghavGoel1 · ‎08-03-2024

Forgot to mention link to my site - Link to site: https://f40566-d3.myshopify.com/?_ab=0&_fd=0&_sc=1

Dan-From-Ryviu · ‎08-03-2024

Hi @RaghavGoel1

Please update the code

<style>
slideshow-component .slideshow__controls {
    justify-content: space-between;
    position: absolute;
    top: 50%;
    z-index: 2;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    border: unset;
}
slideshow-component .slideshow__controls .slider-counter,
slideshow-component .slideshow__controls .slideshow__autoplay {
    display: none;
}
slideshow-component .slideshow__controls .slider-button {
    width: 64px;
    height: 84px;
}
slideshow-component .slideshow__controls .slider-button .icon {
    height: 1.6rem;
}
</style>

- Found this helpful? Hit "Like" and "Accept as Solution"! - Feeling generous. ☕ Buy me coffee!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

How Do I Change My Arrows to the Side of my Slideshow Images?

How Do I Change My Arrows to the Side of my Slideshow Images?

Community Blog Articles