How to set up products in the cart

In this article:

• Change how products are shown
• Set up the discount badge
• Show a product metafield
• Set up the empty cart

Products in cart controls how the products in the cart drawer look: the quantity buttons, prices, images, the "Save" badge and the message for an empty cart.

Change how products are shown

1. Open ShopCart and click Edit in the Cart Drawer card.
2. Click Products in cart and open Cart.
3. Set the options:
4. • Show quantity selector: the − and + buttons that change the quantity. Clear it to hide them.
   • Display price: Total product price shows the price multiplied by the quantity, Single product price shows the price of one item.
   • Image size and Vertical spacing: the size of the product image and the height of each product card.
4. Click Save at the top of the editor.

Set up the discount badge

Products with a compare-at price get a green badge, for example "Save 11%". Open Discount badge to change it:

• Badge text: keep {{value}} where the saving should appear, for example "Save {{value}}".
• Counting type: Percentage shows the saving in percent, Difference in amount shows it as an amount of money.

Show a product metafield

You can show extra information from a product metafield on the product card, for example the delivery time or the material.

1. Open Product metafield and select Show product metafield in cart.
2. In Metafield keys, select the metafields to show.
3. Choose the Display style, Badge or Plain text, and the Position, for example Next to product name.
4. Click Save.

Set up the empty cart

When the cart is empty, the drawer shows a message and a button. Open Empty cart to change them:

• Empty cart text: for example "Your cart is empty".
• Button text: for example "Shop now".
• Button link: the page the button opens, as a relative path, for example /collections/all. Leave it blank to use the default.

This is how the empty cart looks on the store:

To change the colors of the product cards, prices, quantity buttons and badge, open the Styles tab.

✔️ Next step

Check our articles to learn more about the app's functionality:

• How to customize the cart drawer design
• How to set up the cart header and footer
• How to add product upsells to the cart

Updated on: 20/10/2026