> ## Documentation Index
> Fetch the complete documentation index at: https://codebeans-customer-cart-manager.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Widget templates

> Choose one of nine ready-made designs for the cart widget, or build your own to match your brand.

The cart widget is the card your shoppers see on the cart page and in the cart drawer. It always shows their **Cart ID**, a heading, a short message, and a button that sends their cart to your support team.

Open **Settings → General settings → Modify Cart Widget** (or click **Go to Templates** in the Setup Guide) to reach the **Choose Widget Template** page.

## Ready-to-use templates

These previews use each template's real colours and default text.

Your Cart ID: v\_yna3sj0b2

Need Assistance with Your Cart?

Get in touch with our team and mention the above unique Cart ID

Submit Your Cart to Support

Classic Elegance

Your Cart ID: v\_yna3sj0b2

Cart Identity Verified

Your unique cart reference is ready. Share it with us for instant help.

Get Support Now

Midnight Modern

Your Cart ID: v\_yna3sj0b2

Cart Support

Reference ID: \[ID]. Contact support for checkout help.

Contact Support

Minimalist Border

Your Cart ID: v\_yna3sj0b2

Wait! Don't Leave Your Cart!

We're here to help you finish your shopping. Quote your Cart ID!

Chat with Us

Playful Pop

Your Cart ID: v\_yna3sj0b2

Friendly Support for Your Cart

Having trouble? Give us your Cart ID and we'll fix it together!

Connect with Help

Sunset Vibe

Your Cart ID: v\_yna3sj0b2

Smooth Checkout Experience

Your Cart ID is your ticket to fast support. Let us know if you need any help.

Send Help Request

Ocean Breeze

Your Cart ID: v\_yna3sj0b2

Sustainable Support

Our team is standing by to assist. Reference your ID for quick service.

Message Support

Forest Eco

Your Cart ID: v\_yna3sj0b2

Premium Cart Assistance

Exclusive support available for your selection. Please provide your reference ID.

Request Concierge

Luxury Gold

Your Cart ID: v\_yna3sj0b2

Locked & Loaded!

Your cart ID is active. Need a hand? We've got you covered!

Ping Support

Neon Punch

> [!NOTE]
>
> **Classic Elegance** is available on every plan. The other eight designs, and custom designs, need a paid plan — they show a lock on the Free plan.

### Apply a template

**1. Pick a design**

Click a template card. A blue outline and tick show your selection. The template you're currently using carries a **Currently Active** label.

**2. Save**

Click **Save Template** (top right). The new design appears on your storefront on the next page load.

## Create a custom design

Click **✦ Create Custom Design** to open the template builder. A **Live Preview** on the right updates as you type.

**Details**

| Field | What it's for |
| - | - |
| **Template Name** | How the design is labelled in your list, e.g. *My Brand Theme*. |
| **Description** | Optional short note for your team. |

**🏷️ Badge Style**

The pill at the top that shows **Your Cart ID: …**

| Field | Example |
| - | - |
| **Background Color** | `#1a1a2e` |
| **Text Color** | `#ffffff` |

**🃏 Card Appearance**

| Field | Example |
| - | - |
| **Background Color** | `#f8faf9` |
| **Border Radius** | `16px` |
| **Show Separator Line** | Adds a thin line under the badge. |

**🔘 Button Style**

| Field | Example |
| - | - |
| **Background Color** | `#1a1a2e` |
| **Text Color** | `#ffffff` |
| **Border Radius** | `8px` |
| **Border Style** | `2px solid #333` or `none` |

**Text**

| Field | Default |
| - | - |
| **Heading Color** / **Body Text Color** | `#1a1a2e` / `#4a5568` |
| **Heading Text** | *Need Assistance with Your Cart?* |
| **Body Text** | *Get in touch with our team and mention the above unique Cart ID* |
| **Button Text** | *Submit Your Cart to Support* |

When you save a custom design it's **selected and published straight away**. It then appears under **✨ Your Custom Designs**, where you can switch back to it at any time.

> [!TIP]
>
> Write the body text from the shopper's point of view and mention the Cart ID — for example *"Quote the Cart ID above when you call us and we'll pull up your cart instantly."* That's what makes the ID useful to your support team.

### Delete a custom design

Hover over the design in **Your Custom Designs** and click the delete icon. If you delete the design that's currently live, your widget switches back to **Classic Elegance** automatically.

## Where the widget appears

The template controls how the widget looks. *Where* and *to whom* it appears is set in [Widget visibility](https://codebeans-customer-cart-manager.mintlify.site/storefront/visibility.md), and the popup version is covered in [Popup & exit-intent](https://codebeans-customer-cart-manager.mintlify.site/storefront/popup-and-exit-intent.md).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.