Dawn Theme Product Page Move Image To Left Side (Desktop)

Store Design
,

Topic summary

A user seeks to move product images from the right side (Dawn theme default) to the left side on desktop, matching industry standards, with thumbnails positioned accordingly.

Solutions Provided:

  • PageFly-Oliver’s CSS code successfully moved images to the left by adding custom CSS to section-main-product.css using flexbox direction reversal
  • Code targets the product grid with media query for screens 767px+ width

Follow-up Adjustments:

  • Spacing issue resolved: User added padding: 0rem 2rem to .grid__item to increase gap between image and product description
  • Thumbnail positioning: Original poster wanted thumbnails on the left of the main image
  • Thumbnail size: User requested larger thumbnails; Oliver provided additional CSS targeting #MainContent .thumbnail-list with grid template adjustments

Status: Main objective (moving images left) achieved through custom CSS in theme files. Additional refinements for thumbnail layout and sizing addressed through supplementary code snippets. Solution requires editing theme code files directly in Shopify Admin.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
5

Hi Zeno, unfortunately this did not work for me. I also tried to add !important to the code. Maybe I have other code preventing this from working?