Please help me relocate thumbnails on the Sense Theme

Please help me relocate thumbnails on the Sense Theme

Empbuilder77
New Member
4 0 0

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? 

Replies 7 (7)

websensepro
Shopify Partner
1272 144 160

Hi, @Empbuilder77 
Please share website URL

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

Free Shopify Beginner Tutorial
Empbuilder77
New Member
4 0 0

the-enkore.com

Dan-From-Ryviu
Shopify Partner
10030 1999 2043

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;
  }
}

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Empbuilder77
New Member
4 0 0

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

Dan-From-Ryviu
Shopify Partner
10030 1999 2043

hi @Empbuilder77 

Your store has password protected

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

websensepro
Shopify Partner
1272 144 160

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 </body> tag

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

Free Shopify Beginner Tutorial
Empbuilder77
New Member
4 0 0

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