Moving Thumbnails to Left Side of Main Product Picture Sense Theme

Store Design
, ,

Topic summary

A user sought help moving product page thumbnails to the left side of the main image in Shopify’s Sense theme.

Resolution:

  • The issue was self-resolved before community members could assist
  • Solution involves adding custom CSS code to the bottom of the “base.css” file in the Assets folder
  • After adding the code, users must select “Thumbnail Carousel” in the Customize settings for the thumbnails

Key Technical Details:

  • The CSS code uses media queries (min-width: 757px) and flexbox properties
  • Modifies .product--thumbnail_slider and related classes
  • Changes display, positioning, and flex-direction properties

Follow-up:
The user posted the complete CSS code for future reference and asked about adding arrow navigation to slide through images, though this question remains unanswered.

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

Hi,

I really want to move the thumbnails in my product page to the left side of the main product picture in Sense theme. Can anyone assist with this?

1 Like
2

Hey @TurkishTowels

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,

Moeed

3

@TurkishTowels
Sorry you are facing this issue,
it would be my pleasure to help you.
Please share your site URL,
I will check out the issue and provide you a solution here.

4

Hi,

I actually ended up finding the code online somewhere else that worked. All you have to do is copy and paste this code below in the bottom of the “base.css” file under the Assets folder. Also, after putting this code, make sure to go back to Customize and click on the thumbnails you are trying to move and on the right, you need to select “Thumbnail Carousel” in order for it to work. I am going to post the code in case someone else needs it in the future. Here is the code:

@media (min-width: 757px) {

.product–thumbnail_slider .thumbnail-slider {
align-items: self-start;
}
.product–thumbnail_slider {
position: relative;
}
.product–thumbnail_slider media-gallery {
display: flex;
flex-direction: row-reverse;
}
.product–thumbnail_slider .slider-mobile-gutter:not(.thumbnail-slider) {
width: 100%;
}
.product–thumbnail_slider .thumbnail-slider {
width: 100px;
padding-right: 10px;
}
.product–thumbnail_slider .slider-button {
display: none !important;
}
.product–thumbnail_slider .thumbnail-slider .thumbnail-list.slider–tablet-up {
height: 100%;
overflow: scroll;
padding: 0;
display: block;
}
.product–thumbnail_slider .thumbnail-slider .thumbnail-list.slider–tablet-up .thumbnail-list__item.slider__slide {
width: 100%;
}
}

5

do you know of a way I can add arrows to slide through images as well?