> ## 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 add a discount code field to the cart

# ${color}[#204a87](How to add a discount code field to the cart)

${color}[#3465a4](**In this article:**)
* [Turn on the discount code field](#1-turn-on-the-discount-code-field)
* [Change the texts](#1-change-the-texts)
* [What customers see](#1-what-customers-see)

The discount code field lets customers apply a code right in the cart drawer and see the new total before they go to checkout.

# ${color}[#204a87](Turn on the discount code field)

1. Open **ShopCart** and click **Edit** in the **Cart Drawer** card.
2. Turn on the **Discount code** toggle on the left.
3. Click **Save** at the top of the editor.

The field works with the discount codes you create in **Discounts** in your Shopify admin. You don't need to set up codes in ShopCart.

# ${color}[#204a87](Change the texts)

Click **Discount code** and open the section you need:

* **Title**: the title of the field, "Discount code" by default.
* **Discount field**: the **Placeholder** inside the field and the **Error message** for a wrong code.
* **Button**: the text of the **Apply** button.

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


To change the colors of the field, the button and the applied code, open the **Styles** tab. Click **Save** when you're done.

# ${color}[#204a87](What customers see)

1. The customer clicks **Discount code** in the cart, enters the code and clicks **Apply**.
2. If the code works, it's shown as a tag and the **Checkout** button shows the new total with the old one crossed out. If the code is wrong, the customer sees your error message.
3. To remove the code, the customer clicks **×** on the tag.

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


The applied code is carried over to checkout, so the customer doesn't need to enter it again.

# ✔️ Next step

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

* [How to set up tiered rewards in the cart](https://help.devit.software/en/article/how-to-set-up-tiered-rewards-in-the-cart-1dmp3al/)
* [How to add a terms and conditions checkbox](https://help.devit.software/en/article/how-to-add-a-terms-and-conditions-checkbox-dwlxa7/)
* [Quick start in ShopCart](https://help.devit.software/en/article/quick-start-in-shopcart-1kc2m47/)