Solved

Help needed with cropping Shopify product images to square thumbnails in Klaviyo

  • 3 June 2021
  • 2 replies
  • 402 views

Badge +2

Hi there,

Checking in to see if anyone on the Klaviyo forums can help out with my request.

I am pulling in product data from Shopify. Everything works fine. However, I would like to crop my product images to 90 x 90px squared as a thumbnail for the abandoned cart emails flows.

Currently I have a table with a placeholder image pulling from Shopify. The current code is:

Email placeholder that contains an image URL:
{% if item.product.variant.images.0.src %}{{item.product.variant.images.0.src}}{%else%}{{item.product.images.0.src|missing_product_image}}{%endif%}

Image Settings
Link: {{ organization.url|trim_slash }}/products/{{ item.product.handle }}


Is this type of cropping of the product image possible with adjustments to the above code? If so, how would it work and what would the code be?

 

Thanks in advance.

- Evan

icon

Best answer by elisegaines 3 June 2021, 20:35

View original

2 replies

Userlevel 5
Badge +25

Hey @Evan! While it’s not exactly 90x90, you could try using the thumbnail image instead of the full sized image with this code: 

{% if item.product.variant.images.0.thumb_src %}{{item.product.variant.images.0.thumb_src}}{%else%}{{item.product.images.0.thumb_src|missing_product_image}}{%endif%}

From there, you can set an Image Width of 90 in the message editor, which will shrink the thumbnail image down to 90x90. 

Hope this helps! Let me know if you run into any issues with that code. 

Elise

Badge +2

Hi Elise,

Thanks for your reply. I’ve added in the code you provided that works great!

Thanks for that!

Evan

Reply