add arrows to swipe between product images (next, previous) on the product page (Dawn 11.0.0 theme)

Store Design
, , ,

Topic summary

A user seeks to add navigation arrows for swiping between product images on their Shopify store using the Dawn 11.0.0 theme. The theme settings only allow arrows for thumbnails, not the main product image when using the “Thumbnails Desktop Layout.”

Solution Provided:
Another user (DRAWandCARE) successfully implemented custom arrows and shared a detailed step-by-step guide:

  • Set Desktop layout to “Thumbnail Carousel” in theme customization
  • Add specific code to product-media-gallery.liquid file to enable desktop slider
  • Insert CSS code for arrow styling (desktop and mobile)
  • Optionally add a third code snippet related to arrow functionality

The solution references tutorial resources from jabwebsolution.com, though some original video links are no longer available.

Reported Issues:

  • Some users experienced arrow positioning problems (not centered, showing image slices)
  • Numbers appearing below images with incorrect counts and non-functional arrows
  • Mobile view arrow functionality issues
  • Compatibility questions with Dawn version 15
  • The CSS code portion in the detailed solution appears incomplete/missing in the forum post

Status: Multiple users confirmed the solution works perfectly for Dawn 12.0.0 and even the Spotlight theme, though implementation challenges and display issues persist for some.

Summarized with AI on October 24. AI used: claude-sonnet-4-5-20250929.
13

Hello! Apologies for the delayed response; I just noticed your message.

To solve the ‘problem’, I followed this video guide, but unfortunately, the link is no longer available. Perhaps the issue is because the tutorial was created for the 11th version of the theme, while the current version is 12 (but it still works perfectly for my Dawn 12.0.0 theme): https://www.youtube.com/watch?v=Za8QYFJ9njc

But! The video author has added the necessary codes to this page: https://jabwebsolution.com/how-to-create-product-slider-in-shopify-dawn-theme/. I also found a new video on the same topic on the author’s channel: https://www.youtube.com/watch?v=ouhYdxGSfhc&t=548s. Please check it out; here, the author might also explain where to add the codes for them to work.

However, I noticed that the arrows in the new video look slightly different… So, if the “updated” guides don’t assist you, please feel free to reach out again, and I’ll try to provide you with the codes I used for my own site earlier :blush:

Hope this will be helpful for you!