How to put the thumbnail images on the left side of the main product image of the dawn theme?

Store Design
,

Topic summary

A user seeks to reposition product thumbnail images from the bottom to the left side of the main product image in Shopify’s Dawn theme.

Initial Solution Attempts:

  • First CSS code targeting section-main-product.css with flex-direction reversal failed to work
  • Second, more comprehensive CSS code for base.css successfully repositioned thumbnails to the left

Key Resolution:
The solution worked after enabling “thumbnail carousel” in the product page settings within the theme customizer—a critical step initially overlooked.

Follow-up Issues:

  • One user successfully implemented the code but wants to customize thumbnail size, shape (rectangle vs square), and spacing between thumbnails
  • Another user reports the code created a long vertical list instead of maintaining the carousel functionality
  • Some users cannot locate the “thumbnail carousel” option in Dawn theme settings

Additional Resources:

  • A YouTube tutorial link was shared for displaying thumbnails vertically
  • Alternative CSS code using rotation transforms was provided for vertical thumbnail display

The discussion remains active with ongoing customization requests and implementation challenges.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
7

Hi @Dawood_Mirza_1 ,

your code worked great for me, thank you! Can you tell me how I can adjust the size and form of the thumbnails? I would like them to be

  • at least twice as big as they are displayed now
  • a rectangle instead of a square
  • and I would like to add space between the thumbnails

Thank you!

how it looks now.png
how it looks now.png2352×1528 330 KB

how it should look like.jpg
how it should look like.jpg842×595 51.6 KB