Please help me relocate thumbnails on the Sense Theme

Store Design
,
1

Hi,

I am having trouble relocating my thumbnails to the left side of the main image on my product page. The theme only allows a below photo carousel option but I don’t like the layout on my desktop. Is there another way around this with the sense theme?

2

Hi, @Empbuilder77
Please share website URL

3

Hi @Empbuilder77

Go to your Online store > Themes > Edit code > Assets > open base.css and add this code at the bottom

@media (min-width: 751px) {
  .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: calc(100% - 100px);
  }
  .product--thumbnail_slider .thumbnail-slider {
    width: 100px;
    padding-right: 10px;
    align-items: flex-start !important;
  }
  .product--thumbnail_slider .slider-button {
    display: none !important;
  }
  .product--thumbnail_slider .thumbnail-slider .thumbnail-list.slider--tablet-up {
    padding: 5px;
    display: block;
  }
  .product--thumbnail_slider .thumbnail-slider .thumbnail-list.slider--tablet-up .thumbnail-list__item.slider__slide {
    width: 100%;
  }
  .thumbnail {
     padding: 5px !important;
  }
}
4

You can follow these steps:
Go to Online Store → Themes → Edit code.
Go to Assets folder → base.css.file

.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: calc(100% - 100px);
  }
  .product--thumbnail_slider .thumbnail-slider {
    width: 100px;
    padding-right: 10px;
    align-items: flex-start !important;
  }
  .product--thumbnail_slider .slider-button {
    display: none !important;
  }
  .product--thumbnail_slider .thumbnail-slider .thumbnail-list.slider--tablet-up {
    padding: 10px;
    display: block;
  }
  .product--thumbnail_slider .thumbnail-slider .thumbnail-list.slider--tablet-up .thumbnail-list__item.slider__slide {
    width: 100%;
  }
  .thumbnail {
     padding: 5px !important;
  }

Add the following code at the bottom of the file above tag

5

the-enkore.com

6

I’ve tried attaching the code and it’s not working.. I double checked the file and everything? The url is the-enkore.com..

7

I tried attaching this to the file and it didn’t work.

8

hi @Empbuilder77

Your store has password protected