> ## 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 the cart header and footer

# ${color}[#204a87](How to set up the cart header and footer)

${color}[#3465a4](**In this article:**)
* [Change the cart title](#1-change-the-cart-title)
* [Change the checkout button](#1-change-the-checkout-button)
* [Show the savings on the checkout button](#1-show-the-savings-on-the-checkout-button)

The header is the top line of the cart drawer with the cart title and the close button. The footer is the **Checkout** button at the bottom. Both are always shown, and you can change their texts and colors.

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

1. Open **ShopCart** and click **Edit** in the **Cart Drawer** card.
2. Click **Header**.
3. In **Cart title**, enter your title. Keep `{{cart_items_quantity}}` to show the number of items, for example "Cart 3". Click **{}** in the field to insert a variable.
4. Click **Save** at the top of the editor.

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


On the **Styles** tab you can change the **Background color**, **Text color** and **Close button color**.

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

1. Click **Footer**.
2. In **Summary text**, enter the text of the checkout button. Keep `{{cart_total_price}}` to show the cart total, for example "Checkout • $1,329.95".
3. Click **Save**.

When a product has a compare-at price or a discount applies, the button also shows the old total crossed out.

On the **Styles** tab you can change the footer background and the colors of the **Checkout button**.

# ${color}[#204a87](Show the savings on the checkout button)

Select **Show discount**. A **Discount text** field appears with `Save • {{cart_total_discount}}`, and the button shows how much the customer saves, for example "Save • $100.00".

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


# ✔️ 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 products in the cart](https://help.devit.software/en/article/how-to-set-up-products-in-the-cart-bi78rx/)
* [How to translate the cart](https://help.devit.software/en/article/how-to-translate-the-cart-14e88th/)