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

# Cart Drawer

> Configure the slide-out cart drawer that displays cart contents when customers add products.

The Cart Drawer section controls the slide-out drawer that appears when customers add items to their cart or click the cart icon. It provides a quick view of cart contents without leaving the current page.

<img src="https://mintcdn.com/digifist/Kn40XMeEPcK0Aasw/images/theme/release/sections/cart-drawer/cart-drawer-overview.png?fit=max&auto=format&n=Kn40XMeEPcK0Aasw&q=85&s=4c5523f54f00e32fb4f2eed832cff198" alt="Cart drawer overview" width="3280" height="2186" data-path="images/theme/release/sections/cart-drawer/cart-drawer-overview.png" />

## What this section controls

* Product card display in cart drawer
* Product image aspect ratios
* Empty cart messaging and CTA
* Information bar blocks for promotional messages
* Cart totals and checkout button

## Section settings

<Tabs>
  <Tab title="Product Cards">
    ### Card media aspect ratio

    Controls the aspect ratio of product images displayed in the cart drawer.

    **Available options:**

    * **1:1** - Square images
    * **3:4** - Portrait format
    * **5:6** - Tall portrait

    **Default:** 3:4

    <Tip>
      Portrait aspect ratios (3:4) work best for apparel and accessories, while square (1:1) suits lifestyle products.
    </Tip>

    <img src="https://mintcdn.com/digifist/Kn40XMeEPcK0Aasw/images/theme/release/sections/cart-drawer/product-cards.png?fit=max&auto=format&n=Kn40XMeEPcK0Aasw&q=85&s=e3b654d43e5cfd5fe8bca2798c85ce95" alt="Product card aspect ratio settings" width="3280" height="2186" data-path="images/theme/release/sections/cart-drawer/product-cards.png" />
  </Tab>

  <Tab title="Empty Cart">
    ### Button URL

    Destination link for the "Continue Shopping" button displayed when cart is empty.

    * **Default:** `/collections`

    <Note>
      Empty cart title and description text can be customized in theme locales under the cart section.
    </Note>

    <img src="https://mintcdn.com/digifist/Kn40XMeEPcK0Aasw/images/theme/release/sections/cart-drawer/empty-cart.png?fit=max&auto=format&n=Kn40XMeEPcK0Aasw&q=85&s=3f080e47a8c1b6db152fa84cd74e23a5" alt="Empty cart settings" width="3280" height="2186" data-path="images/theme/release/sections/cart-drawer/empty-cart.png" />
  </Tab>
</Tabs>

## Block settings

### Information Bar

Add promotional messages or important information displayed within the cart drawer.

**Icon** - Icon name from theme icon library

* **Default:** "theme-box"

**Custom icon** - Upload a custom icon image

* Overrides the icon setting when provided

**Title** - Information message text

* **Default:** "Information title goes here"

<Tip>
  Use information bars to display free shipping thresholds, delivery timeframes, or return policy highlights.
</Tip>

<img src="https://mintcdn.com/digifist/JAX1ZL2jzyduQMK4/images/theme/release/sections/cart-drawer/info-bar.png?fit=max&auto=format&n=JAX1ZL2jzyduQMK4&q=85&s=e8f8a1e3957981b8100bbe7fb76e4b9b" alt="Information bar block" width="3280" height="2186" data-path="images/theme/release/sections/cart-drawer/info-bar.png" />

## Best practices

* Use 3:4 aspect ratio for apparel stores to show product details clearly
* Add information bars for free shipping thresholds to encourage larger orders
* Keep information bar messages concise - under 50 characters for mobile readability
* Set button URL to your primary collection or homepage for empty carts
* Test drawer functionality on mobile devices for smooth user experience
* Limit information bars to 2-3 items to avoid clutter
* Use icons that match your messaging (e.g., truck icon for shipping)

## Common use cases

* **Free shipping threshold** - "Spend \$25 more for free shipping!"
* **Delivery information** - "Orders ship within 24 hours"
* **Return policy** - "Free returns within 30 days"
* **Secure checkout** - "Secure SSL encrypted checkout"
* **Limited stock** - "Low stock items in your cart"
* **Discounts** - "Add \$50 more to unlock 10% off"

## Related guides

<Card title="Cart Settings" icon="cart-shopping" href="/themes/release/theme-settings/cart">
  Configure cart behavior and features
</Card>

<Card title="Cart Page" icon="bag-shopping" href="/themes/release/cart">
  Customize the full cart page
</Card>

<Card title="Cart Page" icon="bag-shopping" href="/themes/release/cart">
  Learn about the full cart page
</Card>