Hey, I’ve tried this code the images appear below the main image. Any idea why?
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).