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

Store Design
1

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-6-2mm?variant=39966923227331

2

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;
    }
1 Like