Solved

I would like to make my thumbnails on product pages bigger and placed on the left site

Antoninias
Excursionist
52 0 5

My theme is prestige and my website is www.antoninias.com

Accepted Solutions (2)

LitCommerce
Astronaut
2860 684 732

This is an accepted solution.

Hi @Antoninias,

Go to Assets > theme.scss.liquid and paste this at the bottom of the file:

@media screen and (min-width: 1008px) {
	.Product__Gallery--stack .Product__SlideshowNav--thumbnails {
		width: 115px !important;
	}
}

Hope it helps!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

LitCommerce
Astronaut
2860 684 732

This is an accepted solution.

Hi @Antoninias,

Please add code here:

Screenshot.png

Code:

.Product__SlideshowNavImage.is-selected {
    border: none!important;
    opacity: 0.6;
}

Hope it helps!

 

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

Replies 8 (8)

oscprofessional
Shopify Partner
15830 2369 3072

@Antoninias 
Hii,
Can Your Requirement for this type ?

oscprofessional_0-1654326005872.png

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing

LitCommerce
Astronaut
2860 684 732

This is an accepted solution.

Hi @Antoninias,

Go to Assets > theme.scss.liquid and paste this at the bottom of the file:

@media screen and (min-width: 1008px) {
	.Product__Gallery--stack .Product__SlideshowNav--thumbnails {
		width: 115px !important;
	}
}

Hope it helps!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
Antoninias
Excursionist
52 0 5

it worked thank you soo much! Do you perhaps know how to get rid of the black border that is applied on the image as well? I would like the style to be more minimal.

LitCommerce
Astronaut
2860 684 732

Hi @Antoninias,

Go to Assets > theme.scss.liquid and paste this at the bottom of the file:

 

 

.Product__SlideshowNavImage.is-selected {
    border: none !important;
}

 

Hope it helps!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
Antoninias
Excursionist
52 0 5

amazing, is it possible to use the opacity effect like the image attached bellow?

Antoninias
Excursionist
52 0 5

Screenshot 2022-06-06 at 11.21.06.png

LitCommerce
Astronaut
2860 684 732

This is an accepted solution.

Hi @Antoninias,

Please add code here:

Screenshot.png

Code:

.Product__SlideshowNavImage.is-selected {
    border: none!important;
    opacity: 0.6;
}

Hope it helps!

 

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
Antoninias
Excursionist
52 0 5

it worked perfectly, thank you so much!=)