> ## 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 customize the cart drawer design

# ${color}[#204a87](How to customize the cart drawer design)

${color}[#3465a4](**In this article:**)
* [Choose a color template](#1-choose-a-color-template)
* [Set the card style, font and background](#1-set-the-card-style-font-and-background)
* [Change the colors of each widget](#1-change-the-colors-of-each-widget)
* [Preview on desktop, tablet and mobile](#1-preview-on-desktop-tablet-and-mobile)

You can match the ShopCart cart drawer to your store's look without code: pick a ready-made color template, then fine-tune the font, card style and colors.

# ${color}[#204a87](Choose a color template)

1. Open **ShopCart** and click **Edit** in the **Cart Drawer** card.
2. Click **Design** and open **Color templates**.
3. In **Choose color template**, select a template: **Graphite**, **Violet & Gold**, **Light Lilac**, **Terracotta**, **Neon Lime** or **Azure**. The preview on the right changes right away.
4. Click **Save** at the top of the editor.

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


A template sets the colors of the whole cart at once. You can still change single colors afterwards on each widget's **Styles** tab.

# ${color}[#204a87](Set the card style, font and background)

Open **Theme setting**:

* **Card style**: **Sharp** for square corners or **Rounded** for rounded ones.
* **Font settings**: search for a font in **Font** and choose its **Style**, for example **Semi Bold**. The box above shows a sample.
* **Main background color**: the background of the whole cart drawer.

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


Click **Save** when you're done.

# ${color}[#204a87](Change the colors of each widget)

Every widget has its own colors. Click the widget on the left, for example **Header** or **Upsells**, and open the **Styles** tab. To go back to the original look of a widget, click **Restore to default** at the bottom of the panel.

# ${color}[#204a87](Preview on desktop, tablet and mobile)

Use the three device icons next to **Publish** at the top of the editor to see the cart on desktop, tablet and mobile. The preview shows sample products, so you can check the design before you add anything to your own cart.

# ✔️ Next step

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

* [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 set up products in the cart](https://help.devit.software/en/article/how-to-set-up-products-in-the-cart-bi78rx/)
* [Quick start in ShopCart](https://help.devit.software/en/article/quick-start-in-shopcart-1kc2m47/)