Skip to main content

The product images on my website have varying aspect ratios—some are 1:1 while others are 2:3. When using product blocks, whether dynamic or static, is there a way to automatically enforce a 1:1 aspect ratio for all displayed images?

Hello ​@Aiman Iqbal ,

Yes you can make all your product images show in a 1:1 aspect ratio automatically using CSS, no need to manually crop each image. Just add this code to your theme's CSS or in the "custom CSS" section if your theme supports it:

 

.product-block img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
  height: auto;
}


This forces all images inside product blocks to display as perfect as squares and keeps them looking clean and uniform, even if their original sizes vary. Just make sure your theme uses the product - block class or replace it with the correct one used on your store.

 

Let me know if this help!


Hi ​@Aiman Iqbal 

In Klaviyo, there’s no built-in setting to force a 1:1 aspect ratio for product images. The best way is to use square (1:1) images in your product feed. If that’s not possible, you can use this custom HTML block to crop images to a square:

<div style="width: 100%; aspect-ratio: 1 / 1; overflow: hidden;">
<img src="{{ item.image_url }}" style="width: 100%; height: 100%; object-fit: cover;" />
</div>

This will make all images display as perfect squares in your emails.


Hi ​@DishaM13,

Where can I add this custom HTML code? 


@DishaM13 and ​@MANSIR2094 You both had great solutions, but they assume the campaign manager has access to either the website’s theme code or the ability to embed custom HTML blocks. In larger organizations, those changes aren’t always easy to make due to approval processes or technical limitations.
 

@devin.patel 

What we need is a solution that can be applied directly within Klaviyo’s product block, ideally without requiring manual image editing or HTML customization to a website.

It would be incredibly valuable if Klaviyo could offer a built-in setting to constrain product images in blocks to a 1:1 ratio for cleaner, more consistent layouts—especially in dynamic product feeds.


Hi ​@DishaM13,

Where can I add this custom HTML code? 

Hi ​@Aiman Iqbal 

To add the custom HTML in Klaviyo:

  1. Open your email campaign or flow.

  2. Drag in a Text block (not an Image block).

  3. Click the </> (Source Code) icon.

  4. Paste the HTML I shared earlier.

  5. Save and preview, your images will now show as 1:1 squares.


@DishaM13 and ​@MANSIR2094 You both had great solutions, but they assume the campaign manager has access to either the website’s theme code or the ability to embed custom HTML blocks. In larger organizations, those changes aren’t always easy to make due to approval processes or technical limitations.
 

@devin.patel 

What we need is a solution that can be applied directly within Klaviyo’s product block, ideally without requiring manual image editing or HTML customization to a website.

It would be incredibly valuable if Klaviyo could offer a built-in setting to constrain product images in blocks to a 1:1 ratio for cleaner, more consistent layouts—especially in dynamic product feeds.

Thanks @EMiranda, totally agree, my solution works for those with code access, but a built-in 1:1 option in Klaviyo would definitely make things easier for everyone!


Reply