> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.devit.software/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to set up products in the cart

# ${color}[#204a87](How to set up products in the cart)

${color}[#3465a4](**In this article:**)
* [Change how products are shown](#1-change-how-products-are-shown)
* [Set up the discount badge](#1-set-up-the-discount-badge)
* [Show a product metafield](#1-show-a-product-metafield)
* [Set up the empty cart](#1-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.

# ${color}[#204a87](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:
   * **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.

![](https://storage.crisp.chat/users/helpdesk/website/-/3/2/7/1/3271b421d88bd400/products-in-cart-settings_18ar2oq.png =800x421)


# ${color}[#204a87](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.

# ${color}[#204a87](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**.

|| Only metafields with Storefront API access appear in the list. To allow one, open **Settings** > **Metafields and metaobjects** > **Products** in your Shopify admin, open the metafield and turn on **Storefront API access**.

# ${color}[#204a87](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.

![](https://storage.crisp.chat/users/helpdesk/website/-/3/2/7/1/3271b421d88bd400/empty-cart-settings_svk8dj.png =800x421)


This is how the empty cart looks on the store:

![](https://storage.crisp.chat/users/helpdesk/website/-/3/2/7/1/3271b421d88bd400/storefront-empty-cart_1km2g2r.png =440x661)


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](https://help.devit.software/en/article/how-to-customize-the-cart-drawer-design-17up6oa/)
* [How to set up the cart header and footer](https://help.devit.software/en/article/how-to-set-up-the-cart-header-and-footer-1rzek4e/)
* [How to add product upsells to the cart](https://help.devit.software/en/article/how-to-add-product-upsells-to-the-cart-103t040/)