How can I create a vertical thumbnail overlay in Dawn theme?

Store Design

Topic summary

A user wants to reposition product image thumbnails in the Dawn theme to display vertically while overlaying the main product image, rather than the default horizontal layout.

Current Status:

  • The desired effect requires significant code modifications to the theme
  • Solutions found online are for older themes and don’t work with Dawn

Technical Approach:

  • Changes needed in the product-thumbnail.liquid snippet where product image code is located
  • Requires modifications to both CSS and JavaScript in the image gallery code
  • The implementation is complex and may require hiring a developer

Resources Provided:

  • A YouTube tutorial link was shared demonstrating how to move thumbnail images vertically

The discussion remains open with no complete solution provided yet for the Dawn theme specifically.

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

I want to move my thumbnails to look like this, where the thumbnails are vertical but also overlay the main image. I am using Dawn theme. Any insights? All I can find is information for older themes and it doesn’t work. Thanks.

Screen Shot 2023-04-11 at 12.17.04 PM.png
Screen Shot 2023-04-11 at 12.17.04 PM.png1540×1368 702 KB

2

Hi @shellbell

This is good way to display product image but this is not easy to manage, for that need to change more code based on theme code, i can give you idea about that, or you can hire any expert for that

You can find product image code in product-thumbnail.liquid snippet and where you can fins image gallery code, you have to do css and some js changes to archive this,

Best regard

3

You can move your thumbnail images vertically: