> ## Documentation Index
> Fetch the complete documentation index at: https://docs.shopify.lightsout.agency/llms.txt
> Use this file to discover all available pages before exploring further.

# Customize the cart page in Facet

> Set up Facet's cart page: show or hide the discount code and order note fields, link the continue shopping button, and color the order summary box.

The cart page lists everything a shopper has added, with the order summary and the checkout button beside it. In Facet it is built from the **Cart** section. This page covers the section's settings and how the cart page works alongside the cart drawer.

![The Cart section as it appears on the Facet demo storefront.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/pages-templates/cart/cart-overview.jpg?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=24fd7136e37602d81ee06bb739b0841f)

## What this section controls

* The discount code field in the summary box.
* The order note field in the summary box.
* The continue shopping link and where it leads.
* The colors of the summary box.
* The colors, spacing and width of the page.

The summary box always shows the subtotal, any discounts, the total and a line about taxes and shipping, followed by the **Checkout** button. Express checkout buttons, such as Shop Pay or PayPal, appear under it when you turn them on in your Shopify payment settings.

## Cart page and cart drawer

Facet has no setting that picks between the cart page and the [Cart drawer](https://docs.shopify.lightsout.agency/themes/facet/sections/cart-drawer.md). While the Cart drawer section is on your store, the cart icon in the header and the add to cart buttons open the drawer, and its **View cart** button opens the cart page. If you hide or remove the Cart drawer section, the cart icon and add to cart buttons take shoppers to the cart page instead.

On the cart page itself, the drawer stays closed: the cart icon opens the cart page, and adding a product updates the page.

## Getting started

**1. Open the Theme Customizer**

In your Shopify admin, open **Online Store**, then **Themes**, and click **Customize** next to Facet.

**2. Open the cart page**

In the page selector at the top of the Customizer, choose **Cart**. Then click **Cart** in the **Sections** panel. Add a product to your cart first to see the full layout.

**3. Choose the fields**

Turn the discount code and order note fields on or off, and pick where **Continue shopping** leads.

![The theme editor with the Cart section selected in the sidebar, its settings panel open on the left and the section highlighted in the preview.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/pages-templates/cart/cart-location.jpg?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=328595b9efc62fd3a94ba8f220b98fdc)

## Section settings

![Theme editor sidebar showing the Cart section settings: Show discount code field, Show order note field, Show continue shopping link, Continue shopping link, Summary box color scheme, Common settings, and more.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/pages-templates/cart/cart-settings-1.png?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=cbf13e9d3eb505cba5333b51296f8925)

![Theme editor sidebar showing the Cart section settings (part 2, scrolled): Summary box color scheme, Common settings, Color scheme, Top padding, Bottom padding, Page width, and more.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/pages-templates/cart/cart-settings-2.png?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=8bc447cf41150c9a7e6d739f092ba152)

* **Show discount code field**: on by default. Adds a field with an **Apply** button to the summary box. Applied codes show as small labels the shopper can remove. A code that doesn't apply shows an error.
* **Show order note field**: on by default. Adds a text box where shoppers can leave a note with their order, up to 250 characters. You see the note on the order in your admin.
* **Show continue shopping link**: on by default. Adds a **Continue shopping** link under the checkout button.
* **Continue shopping link**: where the link leads. Leave it empty to link to all products. Appears only when **Show continue shopping link** is on.
* **Summary box color scheme**: the colors of the box that holds the totals and the checkout button.

When the cart is empty, the page shows "Your cart is empty" and a **Continue shopping** button. The button uses the **Continue shopping link** too, even when the link under the checkout button is turned off.

### Common settings

These work the same in every section. See [Common settings](https://docs.shopify.lightsout.agency/themes/facet/common-settings.md) for details.

* **Color scheme**: the page colors.
* **Top padding**: None, Small, Medium (default), Large or Extra large.
* **Bottom padding**: None, Small, Medium, Large (default) or Extra large.
* **Page width**: Narrow, Narrower, Fluid (default) or Full.

## Best practices

* **Pick a summary color that stands apart.** A summary box in a different color scheme from the page makes the totals and the checkout button easy to find.
* **Turn off the order note if you can't act on it.** Shoppers expect a note to be read. Leave it on only if your team checks notes before shipping.
* **Point continue shopping at a curated collection.** New arrivals or best sellers give shoppers a better next step than all products.

## Related guides

> [card] [Cart drawer](https://docs.shopify.lightsout.agency/themes/facet/sections/cart-drawer.md)
>
> Set up the slide-out cart that opens from the header.

> [card] [Colors](https://docs.shopify.lightsout.agency/themes/facet/theme-settings/colors.md)
>
> Create the color scheme for the summary box.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.