Solved

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

Lukii37
Excursionist
25 0 6

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

 

Web capture_22-1-2024_155537_www.theracurerx.com.jpegWeb capture_22-1-2024_154923_admin.shopify.com.jpeg

Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
6882 1296 1323

This is an accepted solution.

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>

 

- 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 6 (6)

Dan-From-Ryviu
Shopify Partner
6882 1296 1323

What's theme are you using? 

- 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

Lukii37
Excursionist
25 0 6

I am using Taste

Dan-From-Ryviu
Shopify Partner
6882 1296 1323

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>

- 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

Lukii37
Excursionist
25 0 6

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
Shopify Partner
6882 1296 1323

This is an accepted solution.

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>

 

- 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

Lukii37
Excursionist
25 0 6

Thank you.