> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/eclipse/cart/cart.md).

# Cart

The **Cart** appears when customers add a product or click the cart icon in the Header. Customers can view their items in the cart, change product quantity, then click the checkout button to complete their purchase.

* Display the cart as a slide-out **drawer** or **page**
* Allow customers to add **notes** to their order
* Change the **cart icon** style in the header
* Set up cart features [Free shipping bar](/eclipse/cart/free-shipping-bar.md) and [Cross sells](/eclipse/cart/cross-sells.md)

<figure><img src="/files/8ANfnELA88s0Z5TSjeyz" alt="" width="563"><figcaption></figcaption></figure>

## Choose cart type: drawer or page

***

By default, the cart appears as a slide-out **Drawer** when customers add a product. In the Cart settings, you can turn off the cart drawer and redirect customers to the cart page instead.

`In theme settings, click Cart tab to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Cart type</mark></td><td>Choose how the cart appears when customers add a product.<br><br><strong>Drawer</strong>: Shows a slide-out cart, keeping customers on the current page.<br><strong>Page</strong>: Redirects customers to the cart page.</td><td><strong>Drawer</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Page</strong></td></tr></tbody></table>

## Customize cart colors

***

The cart drawer uses the **Drawers** colors in your theme settings. The cart page uses the **Default color scheme** in your theme settings.

`In theme settings, click Colors tab to find settings`

<table><thead><tr><th width="286">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Popovers, modals, and drawers</mark></td><td>Edit the color scheme for menus and cart drawers.</td></tr><tr><td><mark style="color:blue;">Default color scheme</mark></td><td>Select the color scheme for default pages, including the cart page.</td></tr></tbody></table>

## Change cart icon

***

The icon for the cart appears in the header. You change the icon style or choose to show no icon.

`In theme settings, click the Cart tab to find the settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Cart icon</mark></td><td>Change the icon style for the cart in the header.<br><br><strong>No icon</strong> shows a simple button with the item count.</td><td><strong>Cart</strong><br><strong>Bag</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>No icon</strong></td></tr></tbody></table>

## Enable cart notes

***

The **Cart notes** option allow customers to include a message with their order. The text entered into the order notes field will be included in the order details.

<table><thead><tr><th width="189">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Enable cart note</mark></td><td>Display a text field in the cart where customers can add requests or extra information to their order.</td></tr></tbody></table>

## Show currency code

***

When enabled, the country currency code appears next to the cart total.

`In the theme setting, click the Currency format tab to find the settings`

<table><thead><tr><th width="319">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Show currency codes on cart totals</mark></td><td>Show the three-letter country currency code next to cart totals.</td></tr></tbody></table>