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

Question

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 SettingsLink: {{ 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

elisegaines · Accepted Answer

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

Evan · Answer

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

Reply

Sign up

Use your Klaviyo credentials

Log in to the Community

Use your Klaviyo credentials

Scanning file for viruses.

This file cannot be downloaded