Having issues with a rectangle fill box for my square images

Store Design

Topic summary

A user encountered an issue on their Shopify store’s cart page where product images were displayed in a rectangular frame instead of a square one. The images themselves weren’t being cropped or stretched—they were simply centered within the rectangle.

Theme & Location:

  • Theme: Impulse
  • Issue location: Cart page
  • Default frame dimensions: 150x100 pixels

Solution Provided:
A CSS code snippet was shared to modify the cart page’s Custom CSS settings:

.cart__image a.image-wrap {
  aspect-ratio: 1;
  height: auto;
}

This code forces the image container to maintain a 1:1 aspect ratio (square), while keeping images centered without distortion.

Outcome:
The user confirmed the CSS solution worked perfectly, resolving the rectangular frame issue.

Summarized with AI on October 23. AI used: claude-sonnet-4-5-20250929.
1

Screenshot 2025-10-17 at 3.44.39 PM
Screenshot 2025-10-17 at 3.44.39 PM1920Ă—1041 60.5 KB

2 Likes
3

Could you share a bit more detail about the issue with the rectangle fill box?

  • Is the image being cropped or stretched?

  • Are you using a specific section or theme?

  • Do you want the images to stay perfectly square instead of showing a rectangle background?

Once I know this, I can guide you on how to fix it (via CSS or theme settings).

4

Hey Peter,

The image isn’t being cropped or stretched - it’s centered in the rectangle. My theme is Impulse, and it’s in my cart page. I’d like the frame (a rectangle) to be a square. I don’t want the image to fill the space.

5

Yep, looks like Impulse uses 150x100 “frame” there.
I’d try this CSS code in a Custom CSS setting of the “Cart page” section:

.cart__image a.image-wrap {
  aspect-ratio: 1;
  height: auto;
}

This should make your cart page product images square.

if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it
2 Likes
7

Thanks for the clarification!
Just to confirm: you’re using the Impulse theme and on the cart page you have an image inside a rectangle frame, and you want that frame itself to be a square, while keeping the image centered (not stretched or cropped), correct?

If that’s right, I can guide you with a small CSS adjustment to change the container into a square while preserving the image behavior.
Let me know and I’ll provide the exact code!

8

This worked! Perfect!

1 Like