# Cart drawer

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FJwnj4eZFLK52w3cg5Yfr%2FFox-BG%20Light%20-%202025-11-27T160712.878.jpg?alt=media&#x26;token=cab522a0-cf18-4c7e-a03e-2d2ef455cca2" alt=""><figcaption></figcaption></figure>

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 <a href="#how-to-enable-the-cart-drawer-for-your-shopify-store" id="how-to-enable-the-cart-drawer-for-your-shopify-store"></a>

{% hint style="success" %}
Steps:

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

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

{% content-ref url="../theme-settings/cart" %}
[cart](https://docs.foxecom.com/pebble-theme/theme-settings/cart)
{% endcontent-ref %}

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FR9PWdPG8dxZNKFaQViWP%2Fimage.png?alt=media&#x26;token=85763c28-61cc-4dd6-9f74-61dc1b8f0daa" alt=""><figcaption></figcaption></figure>

## How to customize the Cart drawer <a href="#how-to-customize-your-cart-drawer" id="how-to-customize-your-cart-drawer"></a>

{% hint style="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**.
   {% endhint %}

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FnF4WV0m6OtUyDGZDUWXf%2Fimage.png?alt=media&#x26;token=8119c725-57f1-4786-94b9-031e912924bf" alt=""><figcaption></figcaption></figure>

The Cart drawer settings are organized into two main sections:

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

Each section is described below.

### Cart summary

#### Color scheme

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FKYHeK2H6ZFq9nhdPDu98%2Fimage.png?alt=media&#x26;token=4345343b-1f37-4a54-a192-f081dfab5137" alt=""><figcaption></figcaption></figure>

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

{% hint style="info" %}
To edit the color schemes, go to **Theme settings** > [Colors](https://docs.foxecom.com/pebble-theme/theme-settings/colors)
{% endhint %}

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FiBvIWozzXf6EW5OI1IQR%2Fimage.png?alt=media&#x26;token=2524dbe7-e233-4b9b-b634-8b0ac6482a6a" alt=""><figcaption></figcaption></figure>

#### Show separator line

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FHBYFmHZmh6YAlRH6l0jE%2Fimage.png?alt=media&#x26;token=03a1bc36-2417-467e-a9a0-eefa09acfe27" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2F70g8NwlEtpyuvCyG1Uzr%2Fimage.png?alt=media&#x26;token=d518987d-0278-44f1-8c3b-7871a58d1fe9" alt=""><figcaption></figcaption></figure>

### Cart recommendations

#### Enable cart recommendations

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2Fy6PwjwXw1jQUVbsMgLai%2Fimage.png?alt=media&#x26;token=1cb9b008-f779-478d-8bd6-c3308df42b10" alt=""><figcaption></figcaption></figure>

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

#### Product recommendations

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2F0gTZomBe7W3dNIh37g31%2Fimage.png?alt=media&#x26;token=c1a9603b-9943-4a7c-a4da-57e80ca211db" alt=""><figcaption></figcaption></figure>

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 style="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).
{% endhint %}

#### Heading

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FfLpyadxFSNaEgEJTP9iR%2Fimage.png?alt=media&#x26;token=47b76908-1bcd-49fe-b80f-dd22a051c253" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FusNLfO5M2s6171aWVUJW%2Fimage.png?alt=media&#x26;token=db11fb51-d07f-464d-bad7-9b8ed1e38817" alt=""><figcaption></figcaption></figure>

#### Number of products to show

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FGRyrDDGIMyUM5nOKqGVy%2Fimage.png?alt=media&#x26;token=0378a392-b598-4576-b08d-68799ec4795d" alt=""><figcaption></figcaption></figure>

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

#### Product title line limit

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2Fqm876miksrz3oaNBXCwN%2Fimage.png?alt=media&#x26;token=7aa3e2cc-e077-4756-ad96-7b2d841512c6" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FpndnGfXbLt37y4kdp8uT%2Fimage.png?alt=media&#x26;token=a0a857fe-c325-4ff6-8d22-ecbd2cba9c31" alt=""><figcaption></figcaption></figure>

#### Show swatches

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2Fkzn7HYmMLfuasK0stS3R%2Fimage.png?alt=media&#x26;token=a364b030-6f02-48c3-9770-aebd4a50617b" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FnFOv1xI5MMdaIYwmoiod%2Fimage.png?alt=media&#x26;token=ebd662bc-7fba-4a7d-812f-e099b7583806" alt=""><figcaption></figcaption></figure>

#### Show product vendor

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2F666fGho0gkItEaD8FPes%2Fimage.png?alt=media&#x26;token=ef3572b7-a2d1-4c2d-b5dd-e825d640fe70" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FrRfwFfahm4FmfcYJl6BU%2Fimage.png?alt=media&#x26;token=878fca7b-c395-4978-8702-e2536733bded" alt=""><figcaption></figcaption></figure>

#### Show product types

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FAMr3X4b1VHRVdSjVbAZ6%2Fimage.png?alt=media&#x26;token=da09ac85-b05a-4c5a-8576-ffc8984cd41b" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FHJuQYss9IQkOp8OQnue2%2Fimage.png?alt=media&#x26;token=849afce3-c9cf-42e4-adab-d5be48a0bc0d" alt=""><figcaption></figcaption></figure>

#### Show quick add

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FJo9HMW4vrr6jpZEwpGj1%2Fimage.png?alt=media&#x26;token=370bf701-84b9-4d5e-9ede-a3ad7eac112a" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2Fvjfr5ouFwqu8UdNKJn24%2Fimage.png?alt=media&#x26;token=67221945-4690-477f-9c8b-9bfd878c934f" alt=""><figcaption></figcaption></figure>