Product Thumbnails Positioning on Product Page Debut

Solved
magnitu
Excursionist
21 0 3

Hi shopify friends.
I want to Thumbnails Positioning on Product Page on left side from main image. 

In the screenshots as now and as we want.
What can we do in liquid for this?

Our URL - https://amzsupply.com/collections/disposable-bouffant-caps/products/amz-case-of-500-green-bouffant-c...
Screenshot_29.pngScreenshot_28.png
Additionally: what can we change in liquid files to make the content more compact, like on the Amzon product page?

KetanKumar
Shopify Partner
20430 2114 7676

This is an accepted solution.

Hello, @magnitu 

Thanks for post.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste bellow code in the bottom of the file

@media only screen and (min-width: 750px) {
.product-single__media-wrapper {
    width: 80%;
    float: right;
}
.thumbnails-wrapper.thumbnails-slider--active {
    float: left;
    width: 15%;
}
.product-single__thumbnails-item {
    flex: 0 0 100% !important;
}
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
magnitu
Excursionist
21 0 3

It worked. Thank you very much.
- I will be grateful if you show how to indent less.
- And I can’t find in the liquid file how to change the font size for certain blocks: title, description for example.
I just want to make the content more compact.

Screenshot_33.pngScreenshot_32.png

0 Likes
KetanKumar
Shopify Partner
20430 2114 7676

@magnitu 

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
nezi
Tourist
6 0 3

I'm using the Debut theme and want to achieve the same. When I go to Online Store > Theme > Edit Code >Asset I only see theme.css. I can't find a theme.scss.liquid. Has this file changed since this post?

KetanKumar
Shopify Partner
20430 2114 7676

@nezi 

Welcome to the Shopify community!
and Thanks for your question.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
KetanKumar
Shopify Partner
20430 2114 7676

@nezi 

Thanks, sorry i can't see thumbnail image

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
KetanKumar
Shopify Partner
20430 2114 7676

@nezi 

Thanks for it 

do you need a vertical slider right?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes