Change position of button (arrow) for next picture on product page

Solved
MST65912
Excursionist
26 0 10

On my product page the arrow button for clicking to the next picture is below the product picture. How can I make it so the arrows is in the middle on the side of the product picture instead of below?

 

my url: https://aestheticblendd.com/collections/all-sterling-silver/products/copy-of-figaro-sterling-silver-...

0 Likes
namphan
Explorer
58 6 15

This is an accepted solution.

Hi @MST65912,

Please follow the steps:
- Step 1: Go to Online store > Themes > Actions > Edit code.
- Step 2: Go to Assets > theme.css and paste this at the bottom of the file:
.Product__SlideshowNavArrow--previous{
  position: absolute !important;
  top: 50% !important;
  left: 15px !important;
}
.Product__SlideshowNavArrow--next{
  position: absolute !important;
  top: 50% !important;
  right: 15px !important;
}