Setting the image size for products in the cart and checkout

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-size

Value:

large

Size 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.