By default, CartGenie compresses variant images and serves them to customers when they are added to the cart or displayed at checkout. This helps reduce page load times due to large image sizes and dimensions.
For most users, this is ideal as the cart and checkout images don’t need to be very large. However, if your page layout requires larger display sizes, the images can appear pixelated.
Here is how to fix that:
In Webflow, go to the page where you want to change the image size served: Cart or Checkout Page
Click on the CartGenie wrapper for the page:
Cart:
Layer Name (default): “cg-cart-wrapper”
It should have the custom attribute: data-cg-cart-modal="1"
Checkout:
Layer Name (default): “cg-section”
It should have the custom attribute: data-cg-page="checkout"
Then, in the Layer Settings panel add a new Custom Attribute

Name:
data-cg-cart-item-img-sizeValue:
largeSize options to use as values:
large
max size: 3000x3000
medium
max size: 500x500
(This is the default size used without adding a custom attribute)
small
max size: 256x256
thumb
max-size: 64x64
Note: Each product image is only served once per page. So if the cart and checkout wrappers have separate sizes, then the cart image will be displayed correctly on all pages except the checkout where it will get overwritten by the defined checkout value size.