Change the position of the arrows from under the product photo to next to the photo

Store Design
, ,

Topic summary

Goal: Move product image navigation arrows from below the photo to the left/right sides for easier browsing.

Actions taken:

  • A helper advised adding custom code in theme.liquid (placed above ) and provided step-by-step instructions plus an image reference. Theme.liquid is the main layout file of a Shopify theme.
  • After applying the change, the arrows visually moved to the sides as desired.

New issue:

  • Clicking the new side arrows scrolls only the thumbnail slider beneath the main image, not the main product photo itself.
  • The user asked if the click behavior could be fixed so the main image changes.

Response/limitations:

  • The helper stated this cannot be adjusted because the click event (the JavaScript action triggered on click) for the media arrows is already controlled by the theme’s script. Overriding it risks breaking other theme functions.

Outcome/status:

  • Partial success: arrow position changed; core functionality unchanged.
  • No workaround or alternative solution provided; the functional request remains unresolved/ongoing.
  • Note: The solution relied on code and an attached image; exact code details were not included in the text.
Summarized with AI on January 16. AI used: gpt-5.
1

Hello!

Currently on my website the arrows to scroll through the photos are under the photo, and it doesn’t seem like a very convenient place for them. Is it possible to make them appear on each side of the photo so that it’s easier for the customer to navigate through them?

For reference, here is a link: https://monamauve.com/products/anniversary-card-cute-cat-meme-happy-wedding-dating-anniversary-for-husband-wife-boyfriend-girlfriend-gift-for-her-or-him-a6-a5

Any help is appreciated, thank you in advance!

2

Hi @monamauve

This is Noah from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

PageFlyNoah_0-1696384916568.png
PageFlyNoah_0-1696384916568.png1007×963 210 KB

Hope this can help you solve the issue

Best regards,

Noah | PageFly

3

Thank you Noah! I was able to move the arrows to the correct position, however, upon clicking the arrow, the photos do not change, but rather only the photo slider at the bottom of the photo moves forward. Is it possible to fix this?

4

Hi @monamauve Sorry, it won’t able to do that, because the click event on the media arrow is already handled by Theme script, if we change, it might break some other functions