Skip to main content
⚠️ Important notice This customization only works with Version 1 of the Upcart cart modules. If you recently upgraded your cart to Version 2, these customizations may not work. You will need to use the new selectors provided for Version 2 in the migration guide. If your customizations are not working as expected, you can also revert your cart back to Version 1 instead of using Version 2. We are currently working on new customization templates for Version 2 of the modules, and they will be available soon.

​
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

  1. Open the Upcart App from your Shopify dashboard.
  2. Navigate to the Cart Editor.
  3. Click Settings and scroll to the bottom until you find the section labeled Custom CSS.

​
Adding the CSS

  1. 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;  
  }  
}
  1. Save your changes.
  2. 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.