# Cart Drawer

<figure><img src="https://3432241786-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAgyEGjimJ0Z5PS9XDyAH%2Fuploads%2FRGN0PGEPv4kcTtsC8c8r%2Fimage.png?alt=media&#x26;token=8ccb4458-94c3-43b5-b5f9-4b6be1ad4d40" alt=""><figcaption></figcaption></figure>

To set up the **cart drawer** for your store, follow the steps below.

* From your Shopify admin, go to **Online Store ->** **Themes**.
* Find the theme that you want to edit, and then click **Customize**.
* Click **Theme settings ->** **Cart ->** Select Type **Drawer**

<figure><img src="https://3432241786-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAgyEGjimJ0Z5PS9XDyAH%2Fuploads%2FCz5kIVp90BEYIA9wmjgX%2Fimage.png?alt=media&#x26;token=18887754-1efb-4b51-8827-edcd55fd6624" alt=""><figcaption></figcaption></figure>

In **Popup group ->** Add **Cart drawer**

<figure><img src="https://3432241786-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAgyEGjimJ0Z5PS9XDyAH%2Fuploads%2FP5kfBvm4d3KN2hExiH1E%2Fimage.png?alt=media&#x26;token=dbfa5af1-0f62-487a-96a3-5ff27d917ac9" alt=""><figcaption></figcaption></figure>

#### Cart Drawer Setting

<figure><img src="https://3432241786-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAgyEGjimJ0Z5PS9XDyAH%2Fuploads%2F9qFTtapVZFBVg3iyBIS3%2Fimage.png?alt=media&#x26;token=487fdb33-c0b2-4305-a4ab-ba7f375f3113" alt=""><figcaption></figcaption></figure>

### Configuration <a href="#user-content-configuration" id="user-content-configuration"></a>

| Label        | Type           | Description                                                                        | Visibility     |
| ------------ | -------------- | ---------------------------------------------------------------------------------- | -------------- |
| **Notice**   | `paragraph`    | To display your cart drawer, choose the cart type 'Drawer' in your theme settings. | Always visible |
| Collection   | `collection`   | Select a collection to display in the cart drawer when it is empty.                | Always visible |
| Color scheme | `color_scheme` | Choose the color scheme to apply to the cart drawer.                               | Always visible |

Inside the cart drawer, there are **two blocks** that allow you to configure the content displayed in the drawer:\
![](https://3432241786-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAgyEGjimJ0Z5PS9XDyAH%2Fuploads%2FPX2AMxKn4ya9w5mk6852%2Fimage.png?alt=media\&token=ec0a3e70-6844-4e91-8f38-7ca0b8861bb1)

1. **Cart Product**
   * This block displays the products that have been added to the cart inside the cart drawer.\
     ![](https://3432241786-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAgyEGjimJ0Z5PS9XDyAH%2Fuploads%2F5qubKMZ8mUk1tQgjwdka%2Fimage.png?alt=media\&token=1cae3cb7-f0b2-46b4-9ed8-0651bc2e69e2)<br>

     ### Cart Product Settings <a href="#user-content-general" id="user-content-general"></a>

     | Label        | Type       | Description                                                                                                                                                 | Visibility     |
     | ------------ | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
     | Gap          | `range`    | Adjust the spacing (in pixels) between individual product items within the cart list.                                                                       | Always visible |
     | Aspect ratio | `select`   | Select the visual proportion for product images. **Auto** adapts to the image, **Portrait** uses a tall format, and **Square** uses equal width and height. | Always visible |
     | Border       | `checkbox` | Enable this to display a subtle border separating each product item in the list.                                                                            | Always visible |
     | Vendor       | `checkbox` | Enable this to show the product's brand or manufacturer name above the product title.                                                                       | Always visible |

     ### &#x20;<a href="#user-content-padding" id="user-content-padding"></a>

     ### Padding <a href="#user-content-padding" id="user-content-padding"></a>

     | Label  | Type    | Description                                                      | Visibility     |
     | ------ | ------- | ---------------------------------------------------------------- | -------------- |
     | Top    | `range` | Set the internal spacing at the top of the product block.        | Always visible |
     | Bottom | `range` | Set the internal spacing at the bottom of the product block.     | Always visible |
     | Left   | `range` | Set the internal spacing on the left side of the product block.  | Always visible |
     | Right  | `range` | Set the internal spacing on the right side of the product block. | Always visible |
2. **Cart Popular Products**
   * This block displays an additional, customizable product block inside the cart drawer.

<figure><img src="https://3432241786-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAgyEGjimJ0Z5PS9XDyAH%2Fuploads%2Ff8JF7WT6Q8ACeptkv9X5%2Fimage.png?alt=media&#x26;token=29748015-0b19-41ea-b7ff-0a0593ebd482" alt=""><figcaption></figcaption></figure>

## Cart Popular Products Settings <a href="#user-content-cart-popular-products-settings" id="user-content-cart-popular-products-settings"></a>

| Label         | Type         | Description                                                                                            | Visibility                             |
| ------------- | ------------ | ------------------------------------------------------------------------------------------------------ | -------------------------------------- |
| Title         | `text`       | Enter the heading text to be displayed above the popular products section (e.g., "You May Also Like"). | Always visible                         |
| Collection    | `collection` | Select a collection of products to recommend to customers in the cart drawer.                          | Always visible                         |
| Show products | `range`      | Set the number of products to display from the selected collection.                                    | Visible when "Collection" is not empty |
| Show arrows   | `checkbox`   | Enable this to display navigation arrows for scrolling through the recommended products.               | Visible when "Collection" is not empty |

#### Padding <a href="#user-content-padding" id="user-content-padding"></a>

| Label  | Type    | Description                                                                 | Visibility     |
| ------ | ------- | --------------------------------------------------------------------------- | -------------- |
| Top    | `range` | Set the internal spacing at the top of the popular products section.        | Always visible |
| Bottom | `range` | Set the internal spacing at the bottom of the popular products section.     | Always visible |
| Left   | `range` | Set the internal spacing on the left side of the popular products section.  | Always visible |
| Right  | `range` | Set the internal spacing on the right side of the popular products section. | Always visible |