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.

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.

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, and the popup version is covered in Popup & exit-intent.