Change Products Thumbnail preview into square format

[Zine]

Hello!

I was wondering if anyone could help me change the size of the thumbnails in product pages. I would really like them to be in a square format. I know it is possible to do it through coding but I wasn’t able to find it for days.

Thank you so much!

( See example: https://www.madeoftears.com/collections/earrings/products/victory )

[suyash1]

@Zine - it can be forced using css but few of the images will not look good.

[Zine]

Would you please mind sharing the code please? I’ll have a go at it

[suyash1]

@Zine - please add following code to the end of theme.scss file and check, adjust numbers as per need

.product-single__thumbnail-image {width: 90px; height: 90px;}

[Zine]

Thank you! As you advised, it’s not the best but it worked

[Ninthony]

Alternatively you can crop the images with liquid filters, just scroll down to the Crop section here for more details:

https://www.shopify.com/partners/blog/img-url-filter

[Zine]

Yes that’s what I’ve been trying to do for days but it didn’t work at all. I used this but nothing changed

{{ product.featured_image | img_url: ‘450x450’, crop: ‘center’ }}

[Ninthony]

Well that code would only affect your featured image. You’d have to track down in your code exactly where the thumbnail images are output and apply the filter to the correct liquid output. Probably would look something like:

{% for image in product.images %}
  {% unless forloop.index0 == 0 %}
    
  {% endunless %}
{% endfor %}

I have no idea if that’s what your code looks like, but you’ll be looking for the image loop in product-template.liquid most likely

[Zine]

I’m in product-template.liquid and the only code I could find that contain src is:

If I remember properly, I modified that code but it didn’t change anything (I think because it is related to featured media as you said..) I don’t know If I am allowed to but here is the code I have for the thumbnail in product-template.liquid

{% if product.media.size > 1 %}
{% if product.media.size > 4 %}
{%- assign enable_thumbnail_slides = true -%}
{% endif %}

{% if enable_thumbnail_slides == true %} {% include 'icon-chevron-left' %} {{ 'sections.slideshow.previous_slide' | t }} {% endif %}

{% for media in product.media %}

• {%- capture thumbnailAlt -%}
  {%- if media.media_type == ‘video’ or media.media_type == ‘external_video’ -%}
  {{ ‘sections.featured_product.video_thumbnail_alt’ | t: imageAlt: media.alt | escape }}
  {%- elsif media.media_type == ‘model’ -%}
  {{ ‘sections.featured_product.model_thumbnail_alt’ | t: imageAlt: media.alt | escape }}
  {%- else -%}
  {{ ‘sections.featured_product.gallery_thumbnail_alt’ | t: imageAlt: media.alt | escape }}
  {%- endif -%}
  {%- endcapture -%}

  {%- if media.media_type == ‘video’ or media.media_type ==‘external_video’ -%}

  {% include 'icon-video-badge-full-color' %}
  {%- endif -%} {%- if media.media_type == 'model' -%}
  {% include 'icon-3d-badge-full-color' %}
  {%- endif -%}
{% endfor %}

{% if enable_thumbnail_slides == true %} {% include 'icon-chevron-right' %} {{ 'sections.slideshow.next_slide' | t }} {% endif %}

{% endif %}

Thank you for your help again!