Solved

Reduce size of secondary thumbnails on product page (debut theme)

Timito
Pathfinder
93 1 37

Hi

I'd like to reduce the size of the thumbnails on the product page to look smaller, as shown here. Thank you

Website is sneakersafe.co.uk

SneakerSafe_0-1611940484833.png

 

Accepted Solution (1)
SumanSaurabh
Shopify Partner
69 26 26

This is an accepted solution.

@Timito 

I am sorry, but in your previous post this was not clear to me that you want to fit all thumbnails in one row.

In order to fit all thumbnails in one row on desktop, please do the following:

1. From your Shopify admin, go to Online Store > Themes.

2. Click Actions > Edit code next to theme you want to edit.

3. In the Assets directory, click to open your theme.css file.

4. At the bottom of theme.css file, paste the following CSS code:

@media only screen and (min-width: 990px) {
  .product-single__thumbnails-item--medium {
     flex: 1 1 0px;
  }
}

5. Save the changes.

Important: the above CSS code will fit all thumbnails in one row regardless of their count. For example, if any product have 7 thumbnails then they will also get adjusted to fit in one row. If you want to display only 5 thumbnails in one row (as shown in your previous screenshot), please use the following code instead:

@media only screen and (min-width: 990px) {
  .product-single__thumbnails-item--medium {
     flex: 0 0 20%;
  }
}

 

I hope this will solve your issue.

Thanks!

 

➸ Need a Shopify developer? Chat on WhatsApp | Email: info@omnisitecreations.com
➸ For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Hire me on UpWork
➸ Your Coffee Tip and my code, A perfect blend. ❤️

View solution in original post

Replies 8 (8)

SumanSaurabh
Shopify Partner
69 26 26

This solution requires editing of your theme code. Most of the files that make up a theme contain Liquid, Shopify's templating language. Theme files also contain HTML, CSS, and JavaScript. Edit the code for a theme only if you know HTML and CSS, and have a basic understanding of Liquid. To know more what is theme editing, please visit:

https://help.shopify.com/en/manual/online-store/os/using-themes/managing-themes/duplicating-themes

Before you customize your theme, it's a good idea to duplicate your theme to create a backup copy. This makes it easy to discard your changes and start again if you need to.

Steps to duplicate a theme:

1. From your Shopify admin, go to Online Store > Themes.

2. For the theme that you want to duplicate, click Actions > Duplicate.

 

Solution of your specific issue:

1. From your Shopify admin, go to Online Store > Themes.

2. Click Actions > Edit code next to theme you want to edit.

3. In the Sections directory, click to open your product-template.liquid file.

4. Find the following piece of code:

 <img class="product-single__thumbnail-image" src="{{ media.preview_image | img_url: '110x110', scale: 2 }}" alt="{{ thumbnailAlt }}">

Note: if you are using an older Debut theme, this code may vary a little. So you can simply look for the class="product-single__thumbnail-image" to find this line.

5. In above piece of code 110x110 is your thumbnail image dimension further multiplied by 2. Reduce this dimension to something lesser. For example to reduce the thumbnail images by 50%, change 110x110 to 55x55, please make sure other codes around is not messed up.

6. Save the changes.

I hope this will help.

Thanks!

➸ Need a Shopify developer? Chat on WhatsApp | Email: info@omnisitecreations.com
➸ For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Hire me on UpWork
➸ Your Coffee Tip and my code, A perfect blend. ❤️
Timito
Pathfinder
93 1 37

Thank you for your help, but I'd like for all the thumbnail images to be in 1 row like illustrated before. Would that be possible? Thank you @SumanSaurabh 

SumanSaurabh
Shopify Partner
69 26 26

This is an accepted solution.

@Timito 

I am sorry, but in your previous post this was not clear to me that you want to fit all thumbnails in one row.

In order to fit all thumbnails in one row on desktop, please do the following:

1. From your Shopify admin, go to Online Store > Themes.

2. Click Actions > Edit code next to theme you want to edit.

3. In the Assets directory, click to open your theme.css file.

4. At the bottom of theme.css file, paste the following CSS code:

@media only screen and (min-width: 990px) {
  .product-single__thumbnails-item--medium {
     flex: 1 1 0px;
  }
}

5. Save the changes.

Important: the above CSS code will fit all thumbnails in one row regardless of their count. For example, if any product have 7 thumbnails then they will also get adjusted to fit in one row. If you want to display only 5 thumbnails in one row (as shown in your previous screenshot), please use the following code instead:

@media only screen and (min-width: 990px) {
  .product-single__thumbnails-item--medium {
     flex: 0 0 20%;
  }
}

 

I hope this will solve your issue.

Thanks!

 

➸ Need a Shopify developer? Chat on WhatsApp | Email: info@omnisitecreations.com
➸ For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Hire me on UpWork
➸ Your Coffee Tip and my code, A perfect blend. ❤️
Timito
Pathfinder
93 1 37

Thank you very much, exactly what i wanted!

NicolasF
New Member
11 0 0

Hi @SumanSaurabh

 

how would you do if you have 23 thumbnails, and wanted them to be on one row, with arrows to switch, like if you were using  a smartphone ? 🙂 

I want to have the same output on desktop.

 

Thank you in advance. 

 

SumanSaurabh
Shopify Partner
69 26 26

Hi @NicolasF 

This issue is already solved in another thread:

https://community.shopify.com/c/Technical-Q-A/Debut-theme-Product-thumbnails-as-slider/td-p/571620

I hope this will help.

Thanks!

➸ Need a Shopify developer? Chat on WhatsApp | Email: info@omnisitecreations.com
➸ For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Hire me on UpWork
➸ Your Coffee Tip and my code, A perfect blend. ❤️
NicolasF
New Member
11 0 0

Hi @SumanSaurabh , 

it looks like the solution you are poiting at do not work with the last version of the Debut theme. 

The only way I found is to buy some code and apply it to my shop's code.

Has the guys try to say in the last comment of the subject you pointed at, I'm feeling more and more trapped by shopify.

The code exists, for the last version, but I have to pay for it, even if i'm already paying for the plateform when I'm using it, and when I sell with it.  It's a bit sad I think.

 

Aksh1
Visitor
2 0 0

What about in Dawn theme?  I can't found the theme.css. Please help.