Align product image thumbnails to left of main image - Debut Theme (desktop only)

Store Design

Topic summary

  • Objective: Move product image thumbnails to the left of the main image in the Debut theme, desktop only (mobile remains default). An example screenshot was provided.

  • Constraints/considerations: Debut uses a fixed 1200px max-width; shifting thumbnails horizontally can reduce the main image area and may require broader layout changes.

  • Actionable update: A user shared a CSS-only approach (theme.css, under Assets) scoped to desktop via @media (min-width: 750px): make the main media wrapper 80% wide and float right; thumbnails wrapper 15% wide and float left; set thumbnail items’ flex to ~51% to control size/alignment. Flex percentage can be adjusted to fine-tune thumbnail sizing.

  • Follow-up question: Another user asked how to push the images further left to remove extra left-side whitespace; no confirmed fix posted yet.

  • Additional resource: A YouTube video link was shared demonstrating moving images to the left of the main image.

  • Status: Partially resolved. A working CSS snippet is available, but spacing/alignment refinements and potential layout side effects due to the theme’s fixed width remain open.

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

Hoping someone can help me move product image thumbnails to the left of the main image in the Debut theme.

Ideally looking to implement this in desktop only as the mobile default works fine.

thumbs.JPG
thumbs.JPG1407×819 85.2 KB

I’ve seen a few unanswered forum posts on this topic so any help would be amazing!

Thanks.

1 Like
2

Hi,
Please share your store URL, So I will give you proper solution here !

3

Thanks for the reply, myshopify store URL below

4

Hi,

I have checked your requirement, there is a fixed max-width 1200px for layout, if we put horizontal thumbnail than your main product image size will reduce, it will not look good,

This is time consuming task, you have to do code customization or you have to change whole product page layout plus all pages layout.

5

Ah yes I understand it will make the main image smaller - I have resized images specifically for this.

Is it a simple code paste to just move the thumbnails to the left side? (ignoring any side effects)

If possible I would like to try it, and can always revert back to default if it ruins the page?

Again, many thanks for the replies!

6

This worked for me adding to the bottom of the theme.css (under assets):

@media only screen and (min-width: 750px) {
.product-single__media-wrapper {
    width: 80%;
    float: right;
}
.thumbnails-wrapper.thumbnails-slider--active {
    float: left;
    width: 15%;
}
.product-single__thumbnails-item {
    flex: 0 0 51% !important;
}
}

You can adjust the thumbnail size by changing the bottom percentage (flex). 50% seemed to mess up the alignment so I used 51%.

1 Like
7

Hey, do you know how to move the pictures more to the left? It worked like a charm but theirs just a little to much room on the left side of the screen?

8

Move images to left side of main image: