Resizing product variant images

Solved
Suhi
New Member
2 0 0

Hi guys!

Does anyone know how to resize product images which are displayed under the main product image? I would like to make it smaller. I have Debut theme. Thanks.

Product variant resizing-01.png

 

0 Likes
share your store url.

Shopify theme developer and customization

I Would like to add new functionality or customize an existing one, please hire me.
If helpful then please Like and Accept Solution .
Email: ashiquehussaincodediary@gmail.com

0 Likes
tim
Shopify Expert
2852 117 936

This is an accepted solution.

In your product-template.liquid section there is a following code at the upper part of the file:

 

  {% case section.settings.image_size %}
    {% when 'small' %}
... {%- assign product_thumbnail_width = 'medium-up--one-third' -%} ... {% when 'medium' %} ... {%- assign product_thumbnail_width = 'medium-up--one-quarter' -%} ... {% when 'large' %} ... {%- assign product_thumbnail_width = 'medium-up--one-fifth' -%} ... {% when 'full' %} ... {%- assign product_thumbnail_width = 'medium-up--one-eighth' -%} ... {% endcase %}

I've left only important parts here.

 

This code means that when 'Medium' image size is selected in section settings, thumbnails will be displayed as 4 in a row, since their width will be "one quarter" of the parent element. For small main image it outputs 3 thumbnails, for large -- 5. 

So you'd need to modify this line  for medium main image.

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
Suhi
New Member
2 0 0

It worked! Thank you very much :)

0 Likes
adalid-bori
Tourist
6 0 0

It does not work for me, any help? I am using Debut theme.


@tim wrote:

In your product-template.liquid section there is a following code at the upper part of the file:

 

  {% case section.settings.image_size %}
    {% when 'small' %}
... {%- assign product_thumbnail_width = 'medium-up--one-third' -%} ... {% when 'medium' %} ... {%- assign product_thumbnail_width = 'medium-up--one-quarter' -%} ... {% when 'large' %} ... {%- assign product_thumbnail_width = 'medium-up--one-fifth' -%} ... {% when 'full' %} ... {%- assign product_thumbnail_width = 'medium-up--one-eighth' -%} ... {% endcase %}

I've left only important parts here.

 

This code means that when 'Medium' image size is selected in section settings, thumbnails will be displayed as 4 in a row, since their width will be "one quarter" of the parent element. For small main image it outputs 3 thumbnails, for large -- 5. 

So you'd need to modify this line  for medium main image.

 


 

0 Likes
adalid-bori
Tourist
6 0 0

This is what I see when I enter the file, but it doesn't work for me making the changes you mention, any help?

Screen Shot 2020-02-05 at 7.04.51 PM.png

0 Likes
jvh5528
Tourist
12 0 2

Did you ever figure out how to fix this?

0 Likes
middyemb
New Member
1 0 0

mess.png

 

 

how do I make these way way smaller.     They are in my individual products as variants

0 Likes