# Cart drawer

![image](https://docs-assets.foxecom.app/pebble-theme/Fox-BG%20Light%20-%202025-11-27T160712.878_OarCXUAJ.jpg)

Cart drawer (also known as the slide-out cart, or side cart) allows customers to view and manage their shopping cart without leaving the current page.

Overall, a cart drawer is useful for improving the user experience and increasing conversions to an online store. By giving an enhanced customer experience, you can reduce the cart abandonment rate of your store.

## How to enable the Cart drawer

<Hint type="success">

Steps:

1. From the theme editor (**Customize**), navigate to **Theme settings** > **Cart**.
2. Set the **Type** as **Drawer**.
3. **Save** the changes.

</Hint>

*Learn more about Cart settings:*&#x20;

<PageLink href="https://docs.foxecom.com/pebble-theme/theme-settings/cart">Cart</PageLink>

![image](https://docs-assets.foxecom.app/pebble-theme/image_jLBePuO3.png)

## How to customize the Cart drawer

<Hint type="success">

Steps:

1. In the theme editor (**Customize**), scroll down to the **Overlay group** area.
2. Select the **Cart drawer** section.
3. Make necessary changes.
4. Click **Save**.

</Hint>

![image](https://docs-assets.foxecom.app/pebble-theme/image_i5R7BEAl.png)

The Cart drawer settings are organized into two main sections:

* **Cart summary**
* **Cart recommendations**

Each section is described below.

### Cart summary

#### Color scheme

![image](https://docs-assets.foxecom.app/pebble-theme/image_xU7uz9SH.png)

Choose a color scheme (e.g., *Scheme 11*) to define the background, text, and accent colors used in the **cart drawer summary**.

<Hint type="info">

To edit the color schemes, go to **Theme settings** > [Colors](https://docs.foxecom.com/pebble-theme/theme-settings/colors)

</Hint>

![image](https://docs-assets.foxecom.app/pebble-theme/image_v3ZXYQuR.png)

#### Show separator line

![image](https://docs-assets.foxecom.app/pebble-theme/image_LPcrxSam.png)

Toggle this option to show or hide the dividing line between the cart contents above and the cart drawer summary.

![image](https://docs-assets.foxecom.app/pebble-theme/image_MGrBdD4s.png)

### Cart recommendations

#### Enable cart recommendations

![image](https://docs-assets.foxecom.app/pebble-theme/image_pIRbS9JN.png)

Turn this on to display recommended products inside the cart drawer.

#### Product recommendations

![image](https://docs-assets.foxecom.app/pebble-theme/image_cmANiop4.png)

Select up to 10 products to display as curated recommendations in the cart drawer.

If you leave this list empty, the cart drawer will automatically display **AI-powered product recommendations** based on the items currently in the customer’s cart.

<Hint type="info">

For more information on how Shopify generates automated recommendations, refer to [Shopify help guide](https://help.shopify.com/en/manual/online-store/storefront-search/search-and-discovery-recommendations).

</Hint>

#### Heading

![image](https://docs-assets.foxecom.app/pebble-theme/image_idsrWIs7.png)

Customize the title shown above the recommendations section (e.g., Complete The Look).

![image](https://docs-assets.foxecom.app/pebble-theme/image_pbZZFWbi.png)

#### Number of products to show

![image](https://docs-assets.foxecom.app/pebble-theme/image_jKwdfJO2.png)

Use the slider to choose how many products appear in the recommendations carousel (Range: 1 – 10 products).

#### Product title line limit

![image](https://docs-assets.foxecom.app/pebble-theme/image_cBVo7MJ5.png)

Choose how many lines of text are allowed for product titles. This is useful if you want a more compact layout.

![image](https://docs-assets.foxecom.app/pebble-theme/image_yBSXC7ts.png)

#### Show swatches

![image](https://docs-assets.foxecom.app/pebble-theme/image_XnjZdm5t.png)

Toggle to display color or material swatches under each recommended product (if available).

![image](https://docs-assets.foxecom.app/pebble-theme/image_iIaxRsFA.png)

#### Show product vendor

![image](https://docs-assets.foxecom.app/pebble-theme/image_56sY0yUy.png)

Displays the vendor name (brand) in each recommended product.

![image](https://docs-assets.foxecom.app/pebble-theme/image_qW3KcdVP.png)

#### Show product types

![image](https://docs-assets.foxecom.app/pebble-theme/image_YfOf4JRS.png)

Shows the product type (e.g., Pants, Dress, Tops) in each recommended product.

![image](https://docs-assets.foxecom.app/pebble-theme/image_SgywtsdJ.png)

#### Show quick add

![image](https://docs-assets.foxecom.app/pebble-theme/image_gE63Ikw8.png)

Adds a "Quick Add" button so customers can add recommended products directly to their cart without leaving the drawer.

![image](https://docs-assets.foxecom.app/pebble-theme/image_u8Y7Lx3L.png)