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?
Solved
How Can I Automatically Enforce a 1:1 Aspect Ratio for Product Images in Dynamic and Static Product Blocks?
Best answer by DishaM13
Hi
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.
+19Hello
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
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.
+1
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
Where can I add this custom HTML code?
Hi
To add the custom HTML in Klaviyo:
-
Open your email campaign or flow.
-
Drag in a Text block (not an Image block).
-
Click the
</>(Source Code) icon. -
Paste the HTML I shared earlier.
-
Save and preview, your images will now show as 1:1 squares.
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!
Log in to the Community
Use your Klaviyo credentials
Log in with Klaviyo
Use your Klaviyo credentials
Log in with KlaviyoEnter your E-mail address. We'll send you an e-mail with instructions to reset your password.