# Cart Drawer

To add the cart drawer information and customize its appearance using Shopify's theme customization options, you can follow these steps:

1. **Enable cart note**
   1. **Purpose:** The Cart Note allows customers to add additional comments or instructions to their order, such as gift notes or special requests.
   2. **How to enable**
      1. In the **Shopify Admin** panel, go to **Online Store > Themes > Customize**.
      2. Look for the **Cart** section (this can vary depending on your theme).
      3. Find the option to enable a **Cart Note** field, which will display an input field in the cart drawer for customers to leave a note.
      4. Ensure this option is turned on if it's available in your theme settings.
2. **Cart recommendation heading**
   1. **Purpose:** This is the heading or title for the product recommendations shown within the cart drawer, such as "You might also like" or "Recommended for you."
   2. **How to enable**
      1. In the theme customization panel, find the **Cart Recommendations** settings.
      2. You may have an option to customize the **heading** for this section. You can change it to something like "You Might Also Like" or "Recommendations Just for You."
      3. This is typically linked to Shopify's recommendation engine or a third-party app like **Product Recommendations** that pulls related products based on customer behavior.
3. **Cart recommendations products**
   1. **Purpose:** Show recommended products based on the contents of the customer's cart.
   2. **How to enable**
      1. In your theme's customization panel, locate the section related to **Cart Recommendations** or **Upsell** options.
      2. Set the number of products you'd like to display under **Recommendations to Show** (for example, you can set it to display 12 products).
      3. You can often configure the specific products or set it to dynamically suggest products related to the customer's cart.
4. **Color scheme**
   1. **Purpose:** Adjust the color scheme for the cart drawer and recommendation sections to match your store's branding.
   2. **How to enable**
      1. In the **Theme Customizer**, look for the **Colors** or **Theme Settings** section.
      2. Under **Cart Colors** or **Drawer Colors**, you can choose from different color schemes (e.g., Scheme 1, Scheme 6).
      3. Select a color scheme that fits your store's theme and branding, and the cart drawer will reflect the chosen color.
5. **Desktop and Mobile columns**
   1. **Purpose:** Adjust the number of product columns displayed in the cart drawer for desktop and mobile views.
   2. **How to enable**
      1. In the **Theme Customizer**, go to the **Cart Recommendations** or **Product Grid** section.
      2. For **Desktop Columns**, set the number of columns you'd like (e.g., 4 columns).
      3. For **Mobile Columns**, set the number of columns for mobile users (e.g., 2 columns).
      4. These settings ensure that your cart drawer recommendations are optimized for different screen sizes.
6. **Center gap**
   1. **Purpose:** Adjust the space between recommended products in the cart drawer.
   2. **How to enable**
      1. In the **Theme Customizer**, you may find an option labeled **Center Gap** or similar under the **Product Grid** or **Cart Drawer** settings.
      2. Adjust this gap setting to control the spacing between each product, ensuring a clean and organized layout.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfINHkP5AZBWpekfArFu8WrhNuuRgiCqdMtUUoKCu1LSXePWkwN9ZDfvDadUf-HpTITQV3ZmgSKPxpITjr6iqMgXgTxS9L1Ch-JwgVHQX_mudssUO9K6ZFvfh-XJvFdiFONtJ0F?key=7_aHdMbaBNceKxuSNLyOfqDS" alt=""><figcaption></figcaption></figure>

### Implementation via Shopify customization

Once you’ve adjusted these settings through the theme customizer, Shopify will automatically reflect the changes to your cart drawer without requiring code modifications.

### Additional customization

If you want to further customize the cart drawer's behavior or appearance, you can edit the theme's Liquid templates:

1. **Edit the cart drawer template**
   1. Go to your **Shopify Admin > Online Store > Themes > Actions > Edit Code.**
   2. Open the **cart drawer** template file (usually named **cart-drawer.liquid** or something similar).
   3. Customize the HTML, CSS, or add custom JavaScript to enhance functionality, such as adding dynamic recommendations based on cart items or implementing custom animations.
2. **Custom recommendations logic**
   1. If you want more control over the products shown in the cart recommendations, you might want to use Shopify's **Product Recommendation API** or install an app to provide personalized suggestions.