Align Product Image Thumbnails To Left Of Main Image - Dawn Theme (Desktop Only)

Store Design

Topic summary

Goal: move product media thumbnails to the left of the main image in Shopify’s Dawn theme, desktop only, without changing mobile.

What worked for some:

  • Adding a CSS snippet to base.css (inside a desktop media query) to reorder the gallery via flex (row-reverse) so thumbnails appear on the left. Mobile remains unchanged.
  • One update notes it only worked after changing the Product media setting from “Thumbnails” to “Thumbnails carousel” (Dawn 15.0.0).

Common issues reported:

  • Thumbnails stack below the main image instead of moving left (seen on various versions, e.g., Dawn 8.0+).
  • When many images, the vertical list extends with no wrapper/scroll or arrows; users want a capped list (e.g., max 4) with scroll/controls.
  • Mixed compatibility across themes (requests for Refresh and Palo Alto) with no provided cross-theme solution.

Maintainer responses/outcomes:

  • Basic left-alignment via CSS was shared; advanced behavior (scroll/arrows, cross-theme support) flagged as custom work and suggested to hire an expert.
  • A YouTube tutorial link was shared as an additional resource.

Status: partially solved. Works for some with the CSS + correct media setting; unresolved for others (version/theme differences, scrolling/navigation for long thumbnail lists).

Summarized with AI on December 13. AI used: gpt-5.
16

Your code worked for me! Only thing dad did not move was the carrousel if there are more than 3 images. So now there is a whole list of images without an option to ‘scroll’ trough them. What needs to be added to make this possible and have max 4 images on the left and arrows to scroll trough the image list?

Thanks in advance! Looking forward to your suggestions.