Studio Theme - Place images on the left side of thumbnail

Store Design
, , , ,
1

Hi Team.

Is there a way to place the images on the left side of the product’s thumbnail? If so and achieved via code, the incoming products will also be placed the same?

Store: Glowcare.se
PS: Glowcare1991

123.PNG
123.PNG1906×931 221 KB

2

Hello @GeeKyuu24 , Yes you can achieve this via custom coding and all the products will adopt the same new layout. You can reach out to a theme developer or hire an expert developer to do that on your behalf if you don’t have any coding experience using HTML, CSS, and Javascript.

Regards,

Osama Farooqi

3

Is there a way to show me the code and how to achieve it?

4

Hello @GeeKyuu24 , actually it will require some hours of work to achieve. There are plenty of tutorials you may find on different platforms on how to achieve this if you like to code yourself which is appreciated !!

Regards,

Osama Farooqi

5

@GeeKyuu24 Please try this method…

1) First in your theme customization make this changes in default product Page.

![Product Thumbnail.png|763x745](upload://mNc7OkSzRCfP9Qoe6h2wgl0BmZ.png)

2) Follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css->paste below code at the bottom of the file:

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css->paste below code at the bottom of the file:
@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;
	}
	 .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;
  }
}

If you feel like my answer is helpful, Please mark it as a SOLUTION.

6

Show images to left side: