I’m trying to work out what code I need to create arrows on the left & right of the main image on the product gallery. I have it on the thumbnails below but we want it on the main image. We are using the Dawn theme for one website & Ride theme for the other website and need to make this change on both.
Hey @Joel_Patchett 
- happy to help out with this. I’m not seeing any images in the drop down in your post on my end:
Looks empty from what I can see on my end here, not sure if that’s just an error on my end. Could you try reposting them in a response just as plain uploaded images and I can take a look?
Hope to hear from you soon.
Hey sorry, I don’t actually have any photos. Does my description give enough info?
Hey @Joel_Patchett, no worries, I think I can still help a little bit! I did some testing on my end and I think I have an answer for you.
In Dawn and (I believe Ride as well), the main product image area uses the theme’s slider, so we can either unhide the built-in prev/next buttons (if they’re already in the markup) or add the same button markup your thumbnail slider uses to the main gallery so the existing JavaScript wires it up automatically.
Basically, all you’d need to do is enable next/prev arrows on the main product image in Dawn, by setting the product section’s Gallery layout to “Thumbnail” or “Thumbnail slider” in the theme editor (Online Store → Themes → Customize → Products → Default product), which should then turn the main media into a horizontal carousel.
Then, in the theme code, you’d want to add an overlay control container to the gallery markup in snippets/product-media-gallery.liquid so arrows sit over the main image snippets/product-media-gallery.liquid. The overlay is positioned and styled in assets/component-slider.css, and should let you have those the appear above media and remain visible on tablet/desktop.
Click handling is wired in assets/media-gallery.js, which should help advance the active media and smooth-scroll.
The arrows should only show when the product has two or more media items and are hidden on small screens by default, but you can change that in the same CSS if desired.
One other thing I’d note, is if your merchant’s theme has custom CSS or app blocks that modify the gallery, check those files first before adjusting these three spots since it could affect how this works.
Hope this helps, let me know if I can clarify anything on our end here 
Hey @joel - let me know if the above worked or if I can help out further, happy to dig into this more if needed.
Hey @Joel_Patchett - just closing the loop on this thread, let me know if I can help out with anything further on our end here.