FROM CACHE - en_header
Promotion image

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

Solved

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

Lukii37
Excursionist
25 0 6
‎01-22-2024 02:58 AM

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

Labels:
1,096 Views
0 Likes
Report
Accepted Solution (1)
In response to Lukii37

Dan-From-Ryviu
Shopify Partner
9229 1851 1884
‎01-22-2024 04:10 AM

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 and Accept solution!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- 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

1,041 Views
0 Likes
Report
Replies 9 (9)

Dan-From-Ryviu
Shopify Partner
9229 1851 1884
‎01-22-2024 03:09 AM

What's theme are you using? 

- Helpful? Like and Accept solution!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

1,075 Views
0 Likes
Report
In response to Dan-From-Ryviu

Lukii37
Excursionist
25 0 6
‎01-22-2024 03:12 AM

I am using Taste

1,073 Views
0 Likes
Report
In response to Lukii37

Dan-From-Ryviu
Shopify Partner
9229 1851 1884
‎01-22-2024 03:24 AM

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 and Accept solution!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

1,062 Views
0 Likes
Report
In response to Dan-From-Ryviu

Lukii37
Excursionist
25 0 6
‎01-22-2024 04:02 AM

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?

1,042 Views
0 Likes
Report
In response to Lukii37

Dan-From-Ryviu
Shopify Partner
9229 1851 1884
‎01-22-2024 04:10 AM

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 and Accept solution!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

1,042 Views
0 Likes
Report
In response to Dan-From-Ryviu

Lukii37
Excursionist
25 0 6
‎01-22-2024 04:14 AM

Thank you.

1,039 Views
1 Like
Report
In response to Dan-From-Ryviu

RaghavGoel1
Excursionist
41 0 12
‎08-03-2024 03:19 AM

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?

Screenshot 2024-08-03 at 10.41.30 AM.png


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

Screenshot 2024-08-03 at 10.41.37 AM.png


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



237 Views
0 Likes
Report
In response to RaghavGoel1

RaghavGoel1
Excursionist
41 0 12
‎08-03-2024 03:31 AM

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

237 Views
0 Likes
Report
In response to RaghavGoel1

Dan-From-Ryviu
Shopify Partner
9229 1851 1884
‎08-03-2024 03:57 AM

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>

- Helpful? Like and Accept solution!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

233 Views
0 Likes
Report

Community Blog Articles

page_thumb_platform Cropped.png
Get ready for peak holiday selling season 2024

By investing 30 minutes of your time, you can unlock the potential for increased sales,...

By Jacqui Sep 11, 2024
03 leaderboard.webp
Highlights | Top Contributors August '24

We appreciate the diverse ways you participate in and engage with the Shopify Communi...

By JasonH Sep 9, 2024
Jacqui_0-1725391911908.jpeg
Recap | An AMA with 2H Media: Marketing Your Shopify Store!

Thanks to everyone who participated in our AMA with 2H Media: Marketing Your Shopify St...

By Jacqui Sep 6, 2024
Terms of Service Privacy Policy