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.
Click ✦ Create Custom Design to open the template builder. A Live Preview on the right updates as you type.
Details
🏷️ Badge Style
🃏 Card Appearance
🔘 Button Style
Text
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.
The pill at the top that shows Your Cart ID: …
Field
Example
Background Color
#1a1a2e
Text Color
#ffffff
Field
Example
Background Color
#f8faf9
Border Radius
16px
Show Separator Line
Adds a thin line under the badge.
Field
Example
Background Color
#1a1a2e
Text Color
#ffffff
Border Radius
8px
Border Style
2px solid #333 or none
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.
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.
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.
{"docsConfig":{"theme":"mint","$schema":"https://mintlify.com/docs.json","name":"CB Customer Cart Manager","description":"User guide for CB Customer Cart Manager — see every shopper's cart in real time, give each cart a support ID, and turn carts into Shopify draft orders.","colors":{"primary":"#13806F","light":"#3FD0BC","dark":"#0F6B5D"},"logo":{"light":"https://mintcdn.com/codebeans-customer-cart-manager/---vfl2MNOtZ2pPR/logo/light.svg?fit=max\u0026auto=format\u0026n=---vfl2MNOtZ2pPR\u0026q=85\u0026s=c41b5a1cd3f85a42931f96aad6da89d0","dark":"https://mintcdn.com/codebeans-customer-cart-manager/---vfl2MNOtZ2pPR/logo/dark.svg?fit=max\u0026auto=format\u0026n=---vfl2MNOtZ2pPR\u0026q=85\u0026s=df2fb9807fdd51fc68ec311c6a6b7866","href":"/"},"favicon":"https://mintcdn.com/codebeans-customer-cart-manager/---vfl2MNOtZ2pPR/favicon.png?fit=max\u0026auto=format\u0026n=---vfl2MNOtZ2pPR\u0026q=85\u0026s=95007f11f0d39174f6e340342d44f350","appearance":{"default":"system"},"navbar":{"links":[{"href":"/help/faq","label":"FAQ"}],"primary":{"type":"button","label":"Contact support","href":"mailto:support@shopylyst.com"}},"footer":{"socials":{"website":"https://codebeans.net"}},"search":{"prompt":"Search the Cart Manager guide…"},"seo":{"indexing":"navigable"},"icons":{"library":"lucide"},"contextual":{"options":["copy","view","chatgpt","claude"],"display":"header"},"styling":{"latex":true},"navigation":{"pages":[]}},"deployment":{"deploymentMetadataValue":{"subdomain":"codebeans-customer-cart-manager","hasAudioNarration":false,"actualSubdomain":"codebeans-customer-cart-manager","customDomains":[],"gitSource":{"type":"github","owner":"codebeans-shopify","repo":"cb-customer-cart-manager","deployBranch":"cb-customer-cart-manager-mintlify","contentDirectory":"","isPrivate":true,"mountPath":"","label":""},"chroma":{"latestBuiltDeploymentHistoryId":"6ad9b28ad74efe30fcf29cc2","collectionId":"aa3afdb6-5a51-41c6-9144-c05743c7646f","liveDeploymentHistoryId":"6ad9b28ad74efe30fcf29cc2","schemaVersion":"v3"},"entitlements":{"AI_CHAT":{"status":"DISABLED"},"WEB_MCP":{"status":"DISABLED"},"NARRATION":{"status":"DISABLED"}},"buildId":"6ad9b28ad74efe30fcf29cc2","clientVersion":"0.0.4006","searchFilterCounts":[{"language":"default","tag":"Managing carts","count":6},{"language":"default","tag":"Storefront widget","count":6},{"language":"default","tag":"Fees \u0026 surcharges","count":5},{"language":"default","tag":"Help","count":4},{"language":"default","tag":"Get started","count":3},{"language":"default","tag":"Email notifications","count":3},{"language":"default","tag":"AI integration (MCP)","count":2},{"language":"default","tag":"Draft orders","count":2},{"language":"default","tag":"Settings \u0026 plans","count":2},{"language":"default","tag":"Insights","count":1}]},"assistantConfig":{"enableAskAiButton":false,"enableStarterQuestions":false,"enableContextualStarterQuestions":false,"enableAskAiSearchBar":true},"basePath":"","hasChatPermissions":false,"hasWebMcpPermissions":false,"toggles":[{"name":"kill-isr","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-mintlify-slack","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-integrations-settings","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-pr-grouping","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"custom-prefix","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"analytics-v7","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"user-flows-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"no-publish-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-onboarding","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"llms-txt-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving-live","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"stripTemperatureMiddleware","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"support-platform-pylon-zendesk","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"instant-rollback","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications-server","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-fable","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fixed-ai-action-pricing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automation-resolve-merge-conflict","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"scoped-publishing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"mintql","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"page-level-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-version-history-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-page-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"full-page-search","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workspace-projects","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"assistant-v5","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"byok-sep-25","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fork-pr-previews","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"revalidation-jwt","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"vite-origin","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-updated-9-15","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-sso-scim","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"hobby-abuse-scan","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"dashboard-inbox","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-signup","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"turbopuffer-dual-write","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-enabled","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"approve-review-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"sso-setup-deadline-banner","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false}],"googleFontsInlined":false},"customCss":[],"page":{"pagePath":"storefront/widget-templates","slug":"/storefront/widget-templates","pageMetadata":{"title":"Widget templates","description":"Choose one of nine ready-made designs for the cart widget, or build your own to match your brand.","icon":"palette","href":"/storefront/widget-templates"},"description":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const _components = {\n p: \"p\",\n ..._provideComponents(),\n ...props.components\n };\n return _jsx(_components.p, {\n children: \"Choose one of nine ready-made designs for the cart widget, or build your own to match your brand.\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\n","frontmatter":{},"scope":{}},"pageType":"default","mdx":{"mdxSource":{"compiledSource":"\"use strict\";const{Fragment:_Fragment,jsx:_jsx,jsxs:_jsxs}=arguments[0];const{useMDXComponents:_provideComponents}=arguments[0];const WidgetPreview=({template=`classic`,cartId=`v_yna3sj0b2`,label})=>{const templates={classic:{name:`Classic Elegance`,badge:{bg:`#1a1a2e`,color:`#ffffff`,border:`none`},card:{bg:`#f8faf9`,border:`1px solid #e2e8f0`,radius:`16px`},separator:true,button:{bg:`#1a1a2e`,color:`#ffffff`,border:`none`,radius:`8px`},heading:{color:`#1a1a2e`,text:`Need Assistance with Your Cart?`},text:{color:`#4a5568`,body:`Get in touch with our team and mention the above unique Cart ID`},buttonText:`Submit Your Cart to Support`},\"modern-dark\":{name:`Midnight Modern`,badge:{bg:`#3b82f6`,color:`#ffffff`,border:`none`},card:{bg:`#1e293b`,border:`1px solid #334155`,radius:`20px`},separator:false,button:{bg:`#3b82f6`,color:`#ffffff`,border:`none`,radius:`10px`},heading:{color:`#f8fafc`,text:`Cart Identity Verified`},text:{color:`#cbd5e1`,body:`Your unique cart reference is ready. Share it with us for instant help.`},buttonText:`Get Support Now`},minimal:{name:`Minimalist Border`,badge:{bg:`transparent`,color:`#000000`,border:`1px solid #000000`},card:{bg:`#ffffff`,border:`2px solid #000000`,radius:`0px`},separator:true,button:{bg:`transparent`,color:`#000000`,border:`2px solid #000000`,radius:`0px`},heading:{color:`#000000`,text:`Cart Support`},text:{color:`#52525b`,body:`Reference ID: [ID]. Contact support for checkout help.`},buttonText:`Contact Support`},playful:{name:`Playful Pop`,badge:{bg:`#fef08a`,color:`#854d0e`,border:`none`},card:{bg:`#ffffff`,border:`none`,radius:`24px`},separator:false,button:{bg:`#ec4899`,color:`#ffffff`,border:`none`,radius:`24px`},heading:{color:`#111827`,text:`Wait! Don't Leave Your Cart!`},text:{color:`#4b5563`,body:`We're here to help you finish your shopping. Quote your Cart ID!`},buttonText:`Chat with Us`},\"sunset-vibe\":{name:`Sunset Vibe`,badge:{bg:`#f59e0b`,color:`#ffffff`,border:`none`},card:{bg:`#fff7ed`,border:`1px solid #ffedd5`,radius:`18px`},separator:true,button:{bg:`#f97316`,color:`#ffffff`,border:`none`,radius:`12px`},heading:{color:`#7c2d12`,text:`Friendly Support for Your Cart`},text:{color:`#9a3412`,body:`Having trouble? Give us your Cart ID and we'll fix it together!`},buttonText:`Connect with Help`},\"ocean-breeze\":{name:`Ocean Breeze`,badge:{bg:`#06b6d4`,color:`#ffffff`,border:`none`},card:{bg:`#f0fdfa`,border:`1px solid #ccfbf1`,radius:`14px`},separator:false,button:{bg:`#0891b2`,color:`#ffffff`,border:`none`,radius:`25px`},heading:{color:`#164e63`,text:`Smooth Checkout Experience`},text:{color:`#155e75`,body:`Your Cart ID is your ticket to fast support. Let us know if you need any help.`},buttonText:`Send Help Request`},\"forest-eco\":{name:`Forest Eco`,badge:{bg:`#10b981`,color:`#ffffff`,border:`none`},card:{bg:`#f0fdf4`,border:`1px solid #dcfce7`,radius:`12px`},separator:true,button:{bg:`#059669`,color:`#ffffff`,border:`none`,radius:`6px`},heading:{color:`#064e3b`,text:`Sustainable Support`},text:{color:`#065f46`,body:`Our team is standing by to assist. Reference your ID for quick service.`},buttonText:`Message Support`},\"luxury-gold\":{name:`Luxury Gold`,badge:{bg:`#d4af37`,color:`#000000`,border:`none`},card:{bg:`#0a0a0a`,border:`1px solid #d4af37`,radius:`0px`},separator:true,button:{bg:`#d4af37`,color:`#000000`,border:`none`,radius:`0px`},heading:{color:`#d4af37`,text:`Premium Cart Assistance`},text:{color:`#a3a3a3`,body:`Exclusive support available for your selection. Please provide your reference ID.`},buttonText:`Request Concierge`},\"neon-punch\":{name:`Neon Punch`,badge:{bg:`#a855f7`,color:`#ffffff`,border:`none`},card:{bg:`#0f172a`,border:`1px solid #a855f7`,radius:`20px`},separator:false,button:{bg:`#d946ef`,color:`#ffffff`,border:`none`,radius:`99px`},heading:{color:`#fdf4ff`,text:`Locked \u0026 Loaded!`},text:{color:`#e9d5ff`,body:`Your cart ID is active. Need a hand? We've got you covered!`},buttonText:`Ping Support`}};const t=templates[template]||templates.classic;return _jsxs(`div`,{style:{background:`#f4f4f5`,border:`1px solid rgba(15, 23, 42, 0.08)`,borderRadius:`14px`,padding:`14px`,margin:`8px 0`},children:[_jsxs(`div`,{style:{background:t.card.bg,border:t.card.border,borderRadius:t.card.radius,padding:`20px`,textAlign:`center`},children:[_jsxs(`div`,{style:{display:`inline-block`,background:t.badge.bg,color:t.badge.color,border:t.badge.border,padding:`6px 18px`,borderRadius:`30px`,fontSize:`13px`,fontWeight:700,letterSpacing:`0.3px`,marginBottom:`14px`},children:[`Your Cart ID: `,cartId]}),t.separator?_jsx(`div`,{style:{width:`60%`,height:`1px`,background:`#e5e7eb`,margin:`10px auto 14px`}}):null,_jsx(`div`,{style:{fontSize:`16px`,fontWeight:700,color:t.heading.color,marginBottom:`8px`,lineHeight:1.3},children:t.heading.text}),_jsx(`div`,{style:{fontSize:`13px`,color:t.text.color,marginBottom:`16px`,lineHeight:1.5},children:t.text.body}),_jsx(`div`,{style:{background:t.button.bg,color:t.button.color,border:t.button.border,borderRadius:t.button.radius,padding:`10px 22px`,fontSize:`14px`,fontWeight:600},children:t.buttonText})]}),label!==false?_jsx(`div`,{style:{textAlign:`center`,fontSize:`13px`,fontWeight:600,color:`#3f3f46`,marginTop:`10px`},children:label||t.name}):null]})};function _createMdxContent(props){const _components={a:`a`,code:`code`,em:`em`,p:`p`,strong:`strong`,tbody:`tbody`,td:`td`,th:`th`,thead:`thead`,tr:`tr`,..._provideComponents(),...props.components},{Columns,Heading,Note,Step,Steps,Tab,Table,Tabs,Tip,_MdxComponentBoundary}=_components;if(!Columns)_missingMdxReference(`Columns`,true);if(!Heading)_missingMdxReference(`Heading`,true);if(!Note)_missingMdxReference(`Note`,true);if(!Step)_missingMdxReference(`Step`,true);if(!Steps)_missingMdxReference(`Steps`,true);if(!Tab)_missingMdxReference(`Tab`,true);if(!Table)_missingMdxReference(`Table`,true);if(!Tabs)_missingMdxReference(`Tabs`,true);if(!Tip)_missingMdxReference(`Tip`,true);if(!_MdxComponentBoundary)_missingMdxReference(`_MdxComponentBoundary`,true);return _jsxs(_Fragment,{children:[_jsxs(_components.p,{children:[`The cart widget is the card your shoppers see on the cart page and in the cart drawer. It always shows their `,_jsx(_components.strong,{children:`Cart ID`}),`, a heading, a short message, and a button that sends their cart to your support team.`]}),`\n`,_jsxs(_components.p,{children:[`Open `,_jsx(_components.strong,{children:`Settings → General settings → Modify Cart Widget`}),` (or click `,_jsx(_components.strong,{children:`Go to Templates`}),` in the Setup Guide) to reach the `,_jsx(_components.strong,{children:`Choose Widget Template`}),` page.`]}),`\n`,_jsx(Heading,{level:`2`,id:`ready-to-use-templates`,children:`Ready-to-use templates`}),`\n`,_jsx(_components.p,{children:`These previews use each template’s real colours and default text.`}),`\n`,_jsxs(Columns,{cols:3,children:[_jsx(_MdxComponentBoundary,{name:`WidgetPreview`,children:_jsx(WidgetPreview,{template:`classic`})}),_jsx(_MdxComponentBoundary,{name:`WidgetPreview`,children:_jsx(WidgetPreview,{template:`modern-dark`})}),_jsx(_MdxComponentBoundary,{name:`WidgetPreview`,children:_jsx(WidgetPreview,{template:`minimal`})}),_jsx(_MdxComponentBoundary,{name:`WidgetPreview`,children:_jsx(WidgetPreview,{template:`playful`})}),_jsx(_MdxComponentBoundary,{name:`WidgetPreview`,children:_jsx(WidgetPreview,{template:`sunset-vibe`})}),_jsx(_MdxComponentBoundary,{name:`WidgetPreview`,children:_jsx(WidgetPreview,{template:`ocean-breeze`})}),_jsx(_MdxComponentBoundary,{name:`WidgetPreview`,children:_jsx(WidgetPreview,{template:`forest-eco`})}),_jsx(_MdxComponentBoundary,{name:`WidgetPreview`,children:_jsx(WidgetPreview,{template:`luxury-gold`})}),_jsx(_MdxComponentBoundary,{name:`WidgetPreview`,children:_jsx(WidgetPreview,{template:`neon-punch`})})]}),`\n`,_jsx(Note,{children:_jsxs(_components.p,{children:[_jsx(_components.strong,{children:`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.`]})}),`\n`,_jsx(Heading,{level:`3`,id:`apply-a-template`,children:`Apply a template`}),`\n`,_jsxs(Steps,{children:[_jsx(Step,{title:`Pick a design`,children:_jsxs(_components.p,{children:[`Click a template card. A blue outline and tick show your selection. The template you’re currently using carries a `,_jsx(_components.strong,{children:`Currently Active`}),` label.`]})}),_jsx(Step,{title:`Save`,children:_jsxs(_components.p,{children:[`Click `,_jsx(_components.strong,{children:`Save Template`}),` (top right). The new design appears on your storefront on the next page load.`]})})]}),`\n`,_jsx(Heading,{level:`2`,id:`create-a-custom-design`,children:`Create a custom design`}),`\n`,_jsxs(_components.p,{children:[`Click `,_jsx(_components.strong,{children:`✦ Create Custom Design`}),` to open the template builder. A `,_jsx(_components.strong,{children:`Live Preview`}),` on the right updates as you type.`]}),`\n`,_jsxs(Tabs,{children:[_jsx(Tab,{title:`Details`,id:`details`,children:_jsxs(Table,{children:[_jsx(_components.thead,{children:_jsxs(_components.tr,{children:[_jsx(_components.th,{children:`Field`}),_jsx(_components.th,{children:`What it’s for`})]})}),_jsxs(_components.tbody,{children:[_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.strong,{children:`Template Name`})}),_jsxs(_components.td,{children:[`How the design is labelled in your list, e.g. `,_jsx(_components.em,{children:`My Brand Theme`}),`.`]})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.strong,{children:`Description`})}),_jsx(_components.td,{children:`Optional short note for your team.`})]})]})]})}),_jsxs(Tab,{title:`🏷️ Badge Style`,id:`%F0%9F%8F%B7%EF%B8%8F-badge-style`,children:[_jsxs(_components.p,{children:[`The pill at the top that shows `,_jsx(_components.strong,{children:`Your Cart ID: …`})]}),_jsxs(Table,{children:[_jsx(_components.thead,{children:_jsxs(_components.tr,{children:[_jsx(_components.th,{children:`Field`}),_jsx(_components.th,{children:`Example`})]})}),_jsxs(_components.tbody,{children:[_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.strong,{children:`Background Color`})}),_jsx(_components.td,{\"data-numeric\":`true`,children:_jsx(_components.code,{children:`#1a1a2e`})})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.strong,{children:`Text Color`})}),_jsx(_components.td,{\"data-numeric\":`true`,children:_jsx(_components.code,{children:`#ffffff`})})]})]})]})]}),_jsx(Tab,{title:`🃏 Card Appearance`,id:`%F0%9F%83%8F-card-appearance`,children:_jsxs(Table,{children:[_jsx(_components.thead,{children:_jsxs(_components.tr,{children:[_jsx(_components.th,{children:`Field`}),_jsx(_components.th,{children:`Example`})]})}),_jsxs(_components.tbody,{children:[_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.strong,{children:`Background Color`})}),_jsx(_components.td,{\"data-numeric\":`true`,children:_jsx(_components.code,{children:`#f8faf9`})})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.strong,{children:`Border Radius`})}),_jsx(_components.td,{\"data-numeric\":`true`,children:_jsx(_components.code,{children:`16px`})})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.strong,{children:`Show Separator Line`})}),_jsx(_components.td,{children:`Adds a thin line under the badge.`})]})]})]})}),_jsx(Tab,{title:`🔘 Button Style`,id:`%F0%9F%94%98-button-style`,children:_jsxs(Table,{children:[_jsx(_components.thead,{children:_jsxs(_components.tr,{children:[_jsx(_components.th,{children:`Field`}),_jsx(_components.th,{children:`Example`})]})}),_jsxs(_components.tbody,{children:[_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.strong,{children:`Background Color`})}),_jsx(_components.td,{\"data-numeric\":`true`,children:_jsx(_components.code,{children:`#1a1a2e`})})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.strong,{children:`Text Color`})}),_jsx(_components.td,{\"data-numeric\":`true`,children:_jsx(_components.code,{children:`#ffffff`})})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.strong,{children:`Border Radius`})}),_jsx(_components.td,{\"data-numeric\":`true`,children:_jsx(_components.code,{children:`8px`})})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.strong,{children:`Border Style`})}),_jsxs(_components.td,{children:[_jsx(_components.code,{children:`2px solid #333`}),` or `,_jsx(_components.code,{children:`none`})]})]})]})]})}),_jsx(Tab,{title:`Text`,id:`text`,children:_jsxs(Table,{children:[_jsx(_components.thead,{children:_jsxs(_components.tr,{children:[_jsx(_components.th,{children:`Field`}),_jsx(_components.th,{children:`Default`})]})}),_jsxs(_components.tbody,{children:[_jsxs(_components.tr,{children:[_jsxs(_components.td,{children:[_jsx(_components.strong,{children:`Heading Color`}),` / `,_jsx(_components.strong,{children:`Body Text Color`})]}),_jsxs(_components.td,{children:[_jsx(_components.code,{children:`#1a1a2e`}),` / `,_jsx(_components.code,{children:`#4a5568`})]})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.strong,{children:`Heading Text`})}),_jsx(_components.td,{children:_jsx(_components.em,{children:`Need Assistance with Your Cart?`})})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.strong,{children:`Body Text`})}),_jsx(_components.td,{children:_jsx(_components.em,{children:`Get in touch with our team and mention the above unique Cart ID`})})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.strong,{children:`Button Text`})}),_jsx(_components.td,{children:_jsx(_components.em,{children:`Submit Your Cart to Support`})})]})]})]})})]}),`\n`,_jsxs(_components.p,{children:[`When you save a custom design it’s `,_jsx(_components.strong,{children:`selected and published straight away`}),`. It then appears under `,_jsx(_components.strong,{children:`✨ Your Custom Designs`}),`, where you can switch back to it at any time.`]}),`\n`,_jsx(Tip,{children:_jsxs(_components.p,{children:[`Write the body text from the shopper’s point of view and mention the Cart ID — for example `,_jsx(_components.em,{children:`“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.`]})}),`\n`,_jsx(Heading,{level:`3`,id:`delete-a-custom-design`,children:`Delete a custom design`}),`\n`,_jsxs(_components.p,{children:[`Hover over the design in `,_jsx(_components.strong,{children:`Your Custom Designs`}),` and click the delete icon. If you delete the design that’s currently live, your widget switches back to `,_jsx(_components.strong,{children:`Classic Elegance`}),` automatically.`]}),`\n`,_jsx(Heading,{level:`2`,id:`where-the-widget-appears`,children:`Where the widget appears`}),`\n`,_jsxs(_components.p,{children:[`The template controls how the widget looks. `,_jsx(_components.em,{children:`Where`}),` and `,_jsx(_components.em,{children:`to whom`}),` it appears is set in `,_jsx(_components.a,{href:`/storefront/visibility`,children:`Widget visibility`}),`, and the popup version is covered in `,_jsx(_components.a,{href:`/storefront/popup-and-exit-intent`,children:`Popup \u0026 exit-intent`}),`.`]})]})}function MDXContent(props={}){const{wrapper:MDXLayout}={..._provideComponents(),...props.components};return MDXLayout?_jsx(MDXLayout,{...props,children:_jsx(_createMdxContent,{...props})}):_createMdxContent(props)}return{WidgetPreview,default:MDXContent};function _missingMdxReference(id,component){throw new Error(`Expected `+(component?`component`:`object`)+\" `\"+id+\"` to be defined: you likely forgot to import, pass, or provide it.\")}","frontmatter":{},"scope":{"config":{},"pageMetadata":{"title":"Widget templates","description":"Choose one of nine ready-made designs for the cart widget, or build your own to match your brand.","icon":"palette","href":"/storefront/widget-templates"}}},"mdxSourceWithNoJs":null,"noJsSplices":[[149,5254,")=>null;function _cr"]]},"mdxExtracts":{"tableOfContents":[{"title":"Ready-to-use templates","slug":"ready-to-use-templates","depth":2,"children":[{"title":"Apply a template","slug":"apply-a-template","depth":3,"children":[]}]},{"title":"Create a custom design","slug":"create-a-custom-design","depth":2,"children":[{"title":"Delete a custom design","slug":"delete-a-custom-design","depth":3,"children":[]}]},{"title":"Where the widget appears","slug":"where-the-widget-appears","depth":2,"children":[]}],"codeExamples":{}},"jsLinks":[],"subdomain":"codebeans-customer-cart-manager","siteName":"CB Customer Cart Manager","title":"Widget templates - CB Customer Cart Manager","navMaps":{"firstHrefInVersion":{},"firstHrefInLanguage":{}},"lastModified":"2026-10-15T08:04:57.161Z","originalFileLocation":"storefront/widget-templates.mdx"},"headHtml":"\u003cscript data-mint-head>(function(){var d=document.documentElement,p=null;if(!p){try{p=localStorage.getItem(\"isDarkMode\")}catch(e){}if(p==='true')p='dark';else if(p==='false')p='light';if(p!=='light'\u0026\u0026p!=='dark'\u0026\u0026p!=='system')p=\"system\"}var r=p==='system'?(matchMedia(\"(prefers-color-scheme: dark)\").matches?'dark':'light'):p;d.classList.remove(r==='dark'?'light':'dark');d.classList.add(r);d.setAttribute(\"data-theme-preference\",p)})();\u003c/script>\u003cmeta data-mint-head name=\"description\" content=\"Choose one of nine ready-made designs for the cart widget, or build your own to match your brand.\">\u003cmeta data-mint-head name=\"application-name\" content=\"CB Customer Cart Manager\">\u003cmeta data-mint-head name=\"generator\" content=\"Mintlify\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/codebeans-customer-cart-manager/tKcfPh1L0GFJQCDN/_generated/favicon/android-chrome-192x192.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"apple-touch-icon\" type=\"image/png\" sizes=\"180x180\" href=\"/mintlify-assets/_mintlify/favicons/codebeans-customer-cart-manager/tKcfPh1L0GFJQCDN/_generated/favicon/apple-touch-icon.png\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/codebeans-customer-cart-manager/tKcfPh1L0GFJQCDN/_generated/favicon/favicon-16x16.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/codebeans-customer-cart-manager/tKcfPh1L0GFJQCDN/_generated/favicon/favicon-32x32.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/codebeans-customer-cart-manager/tKcfPh1L0GFJQCDN/_generated/favicon/favicon.ico\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/codebeans-customer-cart-manager/tKcfPh1L0GFJQCDN/_generated/favicon-dark/android-chrome-192x192.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/codebeans-customer-cart-manager/tKcfPh1L0GFJQCDN/_generated/favicon-dark/favicon-16x16.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/codebeans-customer-cart-manager/tKcfPh1L0GFJQCDN/_generated/favicon-dark/favicon-32x32.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/codebeans-customer-cart-manager/tKcfPh1L0GFJQCDN/_generated/favicon-dark/favicon.ico\" media=\"(prefers-color-scheme: dark)\">\u003cmeta data-mint-head property=\"og:title\" content=\"Widget templates - CB Customer Cart Manager\">\u003cmeta data-mint-head property=\"og:description\" content=\"Choose one of nine ready-made designs for the cart widget, or build your own to match your brand.\">\u003cmeta data-mint-head property=\"og:site_name\" content=\"CB Customer Cart Manager\">\u003cmeta data-mint-head property=\"og:url\" content=\"https://codebeans-customer-cart-manager.mintlify.app/storefront/widget-templates\">\u003cmeta data-mint-head property=\"og:type\" content=\"website\">\u003cmeta data-mint-head property=\"og:image\" content=\"https://codebeans-customer-cart-manager.mintlify.app/_mintlify/api/og/v2?division=Storefront+widget\u0026amp;title=Widget+templates\u0026amp;description=Choose+one+of+nine+ready-made+designs+for+the+cart+widget%2C+or+build+your+own+to+match+your+brand.\u0026amp;theme=c0423093b6661d926194fdba\u0026amp;signature=93450a8951c38920ac09849513bb9ceecb87486c9a517b8a3af8e39040bf5d72\">\u003cmeta data-mint-head property=\"og:image:width\" content=\"1200\">\u003cmeta data-mint-head property=\"og:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"twitter:card\" content=\"summary_large_image\">\u003cmeta data-mint-head name=\"twitter:title\" content=\"Widget templates - CB Customer Cart Manager\">\u003cmeta data-mint-head name=\"twitter:description\" content=\"Choose one of nine ready-made designs for the cart widget, or build your own to match your brand.\">\u003cmeta data-mint-head name=\"twitter:image\" content=\"https://codebeans-customer-cart-manager.mintlify.app/_mintlify/api/og/v2?division=Storefront+widget\u0026amp;title=Widget+templates\u0026amp;description=Choose+one+of+nine+ready-made+designs+for+the+cart+widget%2C+or+build+your+own+to+match+your+brand.\u0026amp;theme=c0423093b6661d926194fdba\u0026amp;signature=93450a8951c38920ac09849513bb9ceecb87486c9a517b8a3af8e39040bf5d72\">\u003cmeta data-mint-head name=\"twitter:image:width\" content=\"1200\">\u003cmeta data-mint-head name=\"twitter:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"msapplication-config\" content=\"/mintlify-assets/_mintlify/favicons/codebeans-customer-cart-manager/tKcfPh1L0GFJQCDN/_generated/favicon/browserconfig.xml\">\u003cmeta data-mint-head name=\"apple-mobile-web-app-title\" content=\"CB Customer Cart Manager\">\u003cmeta data-mint-head name=\"msapplication-TileColor\" content=\"#13806F\">\u003clink data-mint-head rel=\"canonical\" href=\"https://codebeans-customer-cart-manager.mintlify.app/storefront/widget-templates\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/storefront/widget-templates.md\">\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https://codebeans-customer-cart-manager.mintlify.app/#organization\",\"name\":\"CB Customer Cart Manager\",\"url\":\"https://codebeans-customer-cart-manager.mintlify.app\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://mintcdn.com/codebeans-customer-cart-manager/---vfl2MNOtZ2pPR/logo/light.svg?fit=max\u0026auto=format\u0026n=---vfl2MNOtZ2pPR\u0026q=85\u0026s=c41b5a1cd3f85a42931f96aad6da89d0\"}},{\"@type\":\"WebSite\",\"@id\":\"https://codebeans-customer-cart-manager.mintlify.app#website\",\"name\":\"CB Customer Cart Manager\",\"url\":\"https://codebeans-customer-cart-manager.mintlify.app\",\"publisher\":{\"@id\":\"https://codebeans-customer-cart-manager.mintlify.app/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https://codebeans-customer-cart-manager.mintlify.app/storefront/widget-templates#webpage\",\"url\":\"https://codebeans-customer-cart-manager.mintlify.app/storefront/widget-templates\",\"name\":\"Widget templates\",\"description\":\"Choose one of nine ready-made designs for the cart widget, or build your own to match your brand.\",\"dateModified\":\"2026-10-15T08:04:57.161Z\",\"isPartOf\":{\"@id\":\"https://codebeans-customer-cart-manager.mintlify.app#website\"},\"breadcrumb\":{\"@id\":\"https://codebeans-customer-cart-manager.mintlify.app/storefront/widget-templates#breadcrumb\"}},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://codebeans-customer-cart-manager.mintlify.app/storefront/widget-templates#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Storefront widget\",\"item\":\"https://codebeans-customer-cart-manager.mintlify.app/storefront/app-embed\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Widget templates\",\"item\":\"https://codebeans-customer-cart-manager.mintlify.app/storefront/widget-templates\"}]},{\"@type\":[\"Article\",\"TechArticle\"],\"@id\":\"https://codebeans-customer-cart-manager.mintlify.app/storefront/widget-templates#article\",\"headline\":\"Widget templates\",\"name\":\"Widget templates\",\"description\":\"Choose one of nine ready-made designs for the cart widget, or build your own to match your brand.\",\"url\":\"https://codebeans-customer-cart-manager.mintlify.app/storefront/widget-templates\",\"mainEntityOfPage\":{\"@id\":\"https://codebeans-customer-cart-manager.mintlify.app/storefront/widget-templates#webpage\"},\"dateModified\":\"2026-10-15T08:04:57.161Z\",\"publisher\":{\"@id\":\"https://codebeans-customer-cart-manager.mintlify.app/#organization\"},\"isPartOf\":{\"@id\":\"https://codebeans-customer-cart-manager.mintlify.app#website\"}}]}\u003c/script>\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@type\":\"WebSite\",\"name\":\"CB Customer Cart Manager\",\"creator\":{\"@type\":\"Organization\",\"name\":\"Mintlify\",\"url\":\"https://mintlify.com\"}}\u003c/script>","siteName":"CB Customer Cart Manager","nav":{"global":null,"groups":[{"group":"Get started","pages":[{"title":"CB Customer Cart Manager","sidebarTitle":"Introduction","icon":"house","mode":"wide","href":"/index"},{"title":"Quickstart","icon":"rocket","href":"/quickstart"},{"title":"How it works","icon":"workflow","href":"/how-it-works"}]},{"group":"Storefront widget","pages":[{"title":"Turn on the app embed","description":"Switch on the Cb Customer Cart Widget in your theme so the widget and Cart IDs appear on your storefront.","icon":"toggle-right","href":"/storefront/app-embed"},{"title":"Widget templates","icon":"palette","href":"/storefront/widget-templates"},{"title":"Widget visibility","description":"Control who sees the cart widget and on which storefront pages.","icon":"eye","href":"/storefront/visibility"},{"title":"Popup \u0026 exit-intent","icon":"app-window","href":"/storefront/popup-and-exit-intent"},{"title":"Support form","icon":"message-square","href":"/storefront/support-form"},{"title":"Theme compatibility","icon":"brush","href":"/storefront/theme-compatibility"}]},{"group":"Managing carts","pages":[{"title":"Home page","icon":"house","href":"/carts/home"},{"title":"Cart dashboard","icon":"layout-dashboard","href":"/carts/dashboard"},{"title":"Cart details","icon":"shopping-cart","href":"/carts/cart-details"},{"title":"Activity history","icon":"history","href":"/carts/activity-history"},{"title":"Contacts \u0026 support tickets","icon":"phone","href":"/carts/contacts-and-tickets"},{"title":"Cart IDs","icon":"hash","href":"/carts/cart-ids"}]},{"group":"Draft orders","pages":[{"title":"Draft orders","icon":"receipt","href":"/draft-orders/overview"},{"title":"Draft order builder","icon":"square-pen","href":"/draft-orders/builder"}]},{"group":"Fees \u0026 surcharges","pages":[{"title":"Fees \u0026 surcharges","icon":"receipt","href":"/fees/overview"},{"title":"Create a fee","icon":"circle-plus","href":"/fees/create-a-fee"},{"title":"Fees on your storefront","icon":"shopping-bag","href":"/fees/storefront"},{"title":"Fee revenue \u0026 profit","icon":"chart-column","href":"/fees/reporting"},{"title":"Fee limits \u0026 FAQ","icon":"circle-help","href":"/fees/limits-and-faq"}]},{"group":"Insights","pages":[{"title":"Analytics","icon":"trending-up","href":"/analytics"}]},{"group":"Email notifications","pages":[{"title":"Email notifications","icon":"mail","href":"/notifications/overview"},{"title":"SMTP setup","icon":"server","href":"/notifications/smtp"},{"title":"Email templates","icon":"file-code","href":"/notifications/email-templates"}]},{"group":"Settings \u0026 plans","pages":[{"title":"Settings","icon":"settings","href":"/settings"},{"title":"Plans \u0026 billing","icon":"credit-card","mode":"wide","href":"/plans-and-billing"}]},{"group":"AI integration (MCP)","pages":[{"title":"MCP integration","icon":"bot","href":"/ai/mcp-integration"},{"title":"MCP tool reference","icon":"wrench","href":"/ai/mcp-tools"}]},{"group":"Help","pages":[{"title":"Troubleshooting","icon":"life-buoy","href":"/help/troubleshooting"},{"title":"Frequently asked questions","sidebarTitle":"FAQ","icon":"messages-square","href":"/help/faq"},{"title":"Privacy \u0026 data","icon":"shield-check","href":"/help/privacy-and-data"},{"title":"Get help","icon":"message-circle","href":"/help/support"}]}]},"title":"Widget templates - CB Customer Cart Manager","buildId":"dpl_2xiSHD9XEvLsPGPcfoMtkLTB3dy9","deploymentId":"dpl_2xiSHD9XEvLsPGPcfoMtkLTB3dy9","dynamics":[],"chunks":[]}