How Can I Automatically Enforce a 1:1 Aspect Ratio for Product Images in Dynamic and Static Product Blocks?

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 ​@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 ​@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.

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!