Overview
If your product images look stretched, squished, or cut off in Upcart, this is usually caused by a theme styling conflict. Some Shopify themes apply global image styling that affects how product images display inside Upcart.
You can fix this issue by adding a short CSS customization directly within Upcart’s editor settings.
How to Fix It
Follow these steps to apply a CSS customization that preserves your product image proportions.
Accessing Custom CSS Settings
Open the Upcart App from your Shopify dashboard.
Navigate to the Cart Editor.
Click Settings and scroll to the bottom until you find the section labeled Custom CSS.
Adding the CSS
Copy and paste the following CSS snippet into the Custom CSS field:
#CartPopup img {
object-fit: contain !important;
}
.upcart-upsell-item-image-wrapper a {
height: 100% !important;
display: flex !important;
}
.upcart-upsell-item-image-wrapper {
background-color: transparent !important;
}
@media (max-width: 600px) {
[class*="styles_ProductRow__imageWrapper__"] {
height: auto !important;
}
}
Save your changes.
Refresh your storefront and open Upcart to confirm that the images now display correctly.
Why This Happens
Some Shopify themes apply global CSS rules that resize or crop images in ways that affect how they appear in third-party apps like Upcart. These rules can override Upcart’s default styling and distort image proportions.
The CSS snippet above ensures that product images maintain their original aspect ratio and display correctly on both desktop and mobile devices.