A widget that looks like part of your store gets noticed and trusted. All Cart Whisper widget settings live in the Cart Whisper Widgets app embed in your theme editor.
<h2>Open the widget settings</h2>
<ol>
<li>In Cart Whisper, go to Settings → Cart Widget and click Modify Cart Widget. (You can also click Cart Widget Settings on the Cart Whisper home page.)</li>
<li>Your theme editor opens. Open the Cart Whisper Widgets embed settings.</li>
<li>After making changes, click Save in the theme editor.</li>
</ol>
<h2>Style and content</h2>
<ul>
<li>Cart widget style:: Simple Widget, Modern Widget, Modern Widget with Form, or Hide Widget. See the <a href="https://help.cartwhisper.com/articles/widget-style-guide-f4ee30-176a9">Widget Style Guide</a>.</li>
<li>Card ID display option: Cart ID Only for a compact widget, or Cart ID with custom text to show your message as well.</li>
</ul>
<h2>Position</h2>
<ul>
<li>Widget placement:: Above or Under. The widget is placed above or under the location set for your theme.</li>
<li>Widget alignment:: Left, Center or Right (default Right).</li>
<li>Expand to full width: makes the widget fill the width of its container instead of a fixed width.</li>
<li>Vertical spacing and Horizontal spacing: sliders from 0 to 50 px (default 20 px) that add space around the widget.</li>
<li>Text alignment: alignment of the text inside the widget.</li>
</ul>
<h2>Colours</h2>
<ul>
<li>Header &amp; button background color (default black)</li>
<li>Header &amp; button text color (default white)</li>
</ul>
On the Simple Widget, the background colour is used for the border.
<h2>Wording</h2>
<ul>
<li>Header text: default Your Cart ID:</li>
<li>Support button text: default Submit Your Cart to Support (Modern Widget with Form only)</li>
<li>Form header text: default Contact Support</li>
<li>Form button text: default Send Message</li>
<li>Custom text for cart widget: a rich-text message. The default is a heading Need Assistance with Your Cart? with a line asking shoppers to mention their Cart ID.</li>
<li>Show Powered by Cart Whisper: optional. It's off by default.</li>
</ul>
<h2>Where the widget appears</h2>
The widget can show on your cart page, in your theme's slide-out cart drawer, and in the pop-up cart notification some themes show after "Add to cart". Show popup cart widget controls the pop-up notification. The locations come from Select your original theme name. Advanced users can override them with the location fields (Cart page widget location:, Sliding cart widget location:, Popup cart widget location:, Sliding cart inner details:), which take CSS selectors.
<h2>Troubleshooting</h2>
<ul>
<li>The widget is in the wrong spot. Try switching Widget placement: between Above and Under first. If that doesn't help, check your theme selection.</li>
<li>My changes don't show. Make sure you saved in the theme editor, and that you're editing your published theme. Then refresh your cart page.</li>
<li>The text is hard to read. Check that your header text colour contrasts with the background colour.</li>
<li>You need it placed somewhere specific. Email support@cartwhisper.com and we'll advise you.</li>
</ul>
<h2>Related guides</h2>
<ul>
<li><a href="https://help.cartwhisper.com/articles/widget-style-guide-f4ee30-176a9">Widget Style Guide: Simple, Modern, Modern with Form, or hidden</a></li>
<li><a href="https://help.cartwhisper.com/articles/implementing-the-exit-intent-popup-f4ee30-250fd">Implementing the exit-intent popup</a></li>
</ul>

Match the Cart Whisper widget to your brand: position, alignment, spacing, colours and wording, all from the Cart Whisper Widgets app embed.

A widget that looks like part of your store gets noticed and trusted. All Cart Whisper widget settings live in the **Cart Whisper Widgets** app embed in your theme editor.

## Open the widget settings

1. In Cart Whisper, go to **Settings → Cart Widget** and click **Modify Cart Widget**. (You can also click **Cart Widget Settings** on the Cart Whisper home page.)
2. Your theme editor opens. Open the **Cart Whisper Widgets** embed settings.
3. After making changes, click **Save** in the theme editor.

## Style and content

* **Cart widget style:**: Simple Widget, Modern Widget, Modern Widget with Form, or Hide Widget. See the [Widget Style Guide](https://help.cartwhisper.com/articles/widget-style-guide-f4ee30-176a9).
* **Card ID display option**: **Cart ID Only** for a compact widget, or **Cart ID with custom text** to show your message as well.

## Position

* **Widget placement:**: **Above** or **Under**. The widget is placed above or under the location set for your theme.
* **Widget alignment:**: **Left**, **Center** or **Right** (default Right).
* **Expand to full width**: makes the widget fill the width of its container instead of a fixed width.
* **Vertical spacing** and **Horizontal spacing**: sliders from 0 to 50 px (default 20 px) that add space around the widget.
* **Text alignment**: alignment of the text inside the widget.

## Colours

* **Header & button background color** (default black)
* **Header & button text color** (default white)

On the Simple Widget, the background colour is used for the border.

## Wording

* **Header text**: default *Your Cart ID:*
* **Support button text**: default *Submit Your Cart to Support* (Modern Widget with Form only)
* **Form header text**: default *Contact Support*
* **Form button text**: default *Send Message*
* **Custom text for cart widget**: a rich-text message. The default is a heading *Need Assistance with Your Cart?* with a line asking shoppers to mention their Cart ID.
* **Show Powered by Cart Whisper**: optional. It's off by default.

## Where the widget appears

The widget can show on your cart page, in your theme's slide-out cart drawer, and in the pop-up cart notification some themes show after "Add to cart". **Show popup cart widget** controls the pop-up notification. The locations come from **Select your original theme name**. Advanced users can override them with the location fields (**Cart page widget location:**, **Sliding cart widget location:**, **Popup cart widget location:**, **Sliding cart inner details:**), which take CSS selectors.

## Troubleshooting

* **The widget is in the wrong spot.** Try switching **Widget placement:** between Above and Under first. If that doesn't help, check your theme selection.
* **My changes don't show.** Make sure you saved in the theme editor, and that you're editing your published theme. Then refresh your cart page.
* **The text is hard to read.** Check that your header text colour contrasts with the background colour.
* **You need it placed somewhere specific.** Email support@cartwhisper.com and we'll advise you.

## Related guides

* [Widget Style Guide: Simple, Modern, Modern with Form, or hidden](https://help.cartwhisper.com/articles/widget-style-guide-f4ee30-176a9)
* [Implementing the exit-intent popup](https://help.cartwhisper.com/articles/implementing-the-exit-intent-popup-f4ee30-250fd)

Enhance your Shopify store’s online presence and increase conversion rates by customizing the Cart Whisper widget. Follow these steps directly from your Shopify admin dashboard. <h4 class="PlaygroundEditorTheme__h4" dir="ltr">1. Access Widget Settings</h4><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Step 1: Log in to the Shopify admin dashboard and navigate to the <a href="https://admin.shopify.com/apps/cartassist/settings" rel="noreferrer" class="PlaygroundEditorTheme__link">setting page in the Cart Whisper app</a>.</li><li value="2" class="PlaygroundEditorTheme__listItem">Step 2: Click on "Modify Widget" to access the app embed section of your theme</li></ul><img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f4ee30_image.1716992530339.png?alt=media" alt="image.png" width="inherit" height="inherit"> <h4 class="PlaygroundEditorTheme__h4" dir="ltr">2. Customizing Widget Settings</h4>Choose Cart Widget Type<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Choose the type of widget you would like.</li><li value="2" class="PlaygroundEditorTheme__listItem">Options: Simple, Modern, Interactive</li><li value="3" class="PlaygroundEditorTheme__listItem"><a href="https://help.cartwhisper.com/articles/widget-style-guide-f4ee30-176a9" rel="noreferrer" class="PlaygroundEditorTheme__link">Learn more about the different widget types</a>.</li></ul><img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f4ee30_image.1716992969808.png?alt=media" alt="image.png" width="inherit" height="inherit"> 3. Card ID Display Option Select how the Cart ID should be displayed.<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Option 1: Display only the Cart ID for a minimalistic approach.</li><li value="2" class="PlaygroundEditorTheme__listItem">Option 2: Show the Cart ID along with custom text and additional elements for a more informative widget.</li></ul><img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f4ee30_image.1716993000483.png?alt=media" alt="image.png" width="inherit" height="inherit"> 4. Widget Placement<h4 class="PlaygroundEditorTheme__h4" dir="ltr" style="text-align: left;">Modify Widget Position Options:</h4><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Top of the cart page: Ensure immediate visibility for shoppers.</li><li value="2" class="PlaygroundEditorTheme__listItem">Bottom of the cart page: Capture attention effectively as shoppers review their cart.</li></ul></li></ul><img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f4ee30_image.1716993188105.png?alt=media" alt="image.png" width="inherit" height="inherit"> <h4 class="PlaygroundEditorTheme__h4" dir="ltr" style="text-align: left;">5. Widget Alignment Options:</h4><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Left: Aligns the widget to the left.</li><li value="2" class="PlaygroundEditorTheme__listItem">Center: Centers the widget within its container.</li><li value="3" class="PlaygroundEditorTheme__listItem">Right: Aligns the widget to the right.</li></ul></li></ul><h4 class="PlaygroundEditorTheme__h4" dir="ltr" style="text-align: left;">Expand to Full Width</h4><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Option: Checkbox to expand the widget to the full width of its container.</li></ul> <img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f4ee30_image.1716993324999.png?alt=media" alt="image.png" width="inherit" height="inherit"> 6. Spacing And Alignment<h4 class="PlaygroundEditorTheme__h4" dir="ltr" style="text-align: left;">Vertical Spacing</h4><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Adjustable Slider: Adjust vertical space around the widget (e.g., 10 px).</li><li value="2" class="PlaygroundEditorTheme__listItem">Description: Manage vertical spacing to fit the widget within the design.</li></ul><h4 class="PlaygroundEditorTheme__h4" dir="ltr" style="text-align: left;">Horizontal Spacing</h4><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Adjustable Slider: Adjust horizontal space around the widget (e.g., 10 px).</li><li value="2" class="PlaygroundEditorTheme__listItem">Description: Manage horizontal spacing to ensure the widget fits neatly within the layout.</li></ul><img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f4ee30_image.1716993466625.png?alt=media" alt="image.png" width="inherit" height="inherit"><h4 class="PlaygroundEditorTheme__h4" dir="ltr" style="text-align: left;">7. Widget Text Alignment</h4><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Left: Aligns text within the widget to the left.</li><li value="2" class="PlaygroundEditorTheme__listItem">Center: Centers text within the widget.</li><li value="3" class="PlaygroundEditorTheme__listItem">Right: Aligns text within the widget to the right.</li></ul></li></ul><img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f4ee30_image.1716993538808.png?alt=media" alt="image.png" width="inherit" height="inherit"> 8. Widget Design &amp; Customization<h3 class="PlaygroundEditorTheme__h3" style="text-align: left;"> </h3><h4 class="PlaygroundEditorTheme__h4" dir="ltr" style="text-align: left;">a. Colors and Text Customization</h4><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Header &amp; Button Background Color:</li><li value="2" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Tool: Color Picker</li><li value="2" class="PlaygroundEditorTheme__listItem">Example: #3A2A2F</li></ul></li><li value="2" class="PlaygroundEditorTheme__listItem">Header &amp; Button Text Color:</li><li value="3" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Tool: Color Picker</li><li value="2" class="PlaygroundEditorTheme__listItem">Example: #FFFFFF</li></ul></li></ul> <img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f4ee30_image.1716993740050.png?alt=media" alt="image.png" width="inherit" height="inherit"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Header Text:</li><li value="2" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Input Field: (e.g., “Your Cart ID:”)</li></ul></li><li value="2" class="PlaygroundEditorTheme__listItem">Support Button Text:</li><li value="3" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Input Field: (e.g., “Submit Your Cart to Support”)</li></ul></li><li value="3" class="PlaygroundEditorTheme__listItem">Form Header Text:</li><li value="4" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Input Field: (e.g., “Complete the form below with any inquiries”)</li></ul></li><li value="4" class="PlaygroundEditorTheme__listItem">Form Button Text:</li><li value="5" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Input Field: (e.g., “Send my cart to support”)</li></ul></li><li value="5" class="PlaygroundEditorTheme__listItem">Custom Text for Cart Widget:</li><li value="6" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Rich Text Editor: (e.g., “Need Assistance with Your Cart? Get in touch below!”)</li></ul></li></ul><img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f4ee30_image.1716993877340.png?alt=media" alt="image.png" width="inherit" height="inherit"><h4 class="PlaygroundEditorTheme__h4" dir="ltr" style="text-align: left;">b. Visual Customization</h4><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Text Colors: Adjust text colors to match your brand.</li><li value="2" class="PlaygroundEditorTheme__listItem">Font Sizes: Modify font sizes to make text easily readable.</li><li value="3" class="PlaygroundEditorTheme__listItem">Formatting: Customize formatting to reflect your brand’s identity.</li></ul><img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f4ee30_image.1716993969690.png?alt=media" alt="image.png" width="inherit" height="inherit">

Customizing Your Cart Whisper Widget

Enhance your Shopify store’s online presence and increase conversion rates by customizing the Cart Whisper widget. Follow these steps directly from your Shopify admin dashboard. <h4 class="PlaygroundEditorTheme__h4" dir="ltr">1. Access Widget Settings</h4><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Step 1: Log in to the Shopify admin dashboard and navigate to the <a href="https://admin.shopify.com/apps/cartassist/settings" rel="noreferrer" class="PlaygroundEditorTheme__link">setting page in the Cart Whisper app</a>.</li><li value="2" class="PlaygroundEditorTheme__listItem">Step 2: Click on "Modify Widget" to access the app embed section of your theme</li></ul><img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f4ee30_image.1716992530339.png?alt=media" alt="image.png" width="inherit" height="inherit"> <h4 class="PlaygroundEditorTheme__h4" dir="ltr">2. Customizing Widget Settings</h4>Choose Cart Widget Type<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Choose the type of widget you would like.</li><li value="2" class="PlaygroundEditorTheme__listItem">Options: Simple, Modern, Interactive</li><li value="3" class="PlaygroundEditorTheme__listItem"><a href="https://help.cartwhisper.com/articles/widget-style-guide-f4ee30-176a9" rel="noreferrer" class="PlaygroundEditorTheme__link">Learn more about the different widget types</a>.</li></ul><img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f4ee30_image.1716992969808.png?alt=media" alt="image.png" width="inherit" height="inherit"> 3. Card ID Display Option Select how the Cart ID should be displayed.<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Option 1: Display only the Cart ID for a minimalistic approach.</li><li value="2" class="PlaygroundEditorTheme__listItem">Option 2: Show the Cart ID along with custom text and additional elements for a more informative widget.</li></ul><img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f4ee30_image.1716993000483.png?alt=media" alt="image.png" width="inherit" height="inherit"> 4. Widget Placement<h4 class="PlaygroundEditorTheme__h4" dir="ltr" style="text-align: left;">Modify Widget Position Options:</h4><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Top of the cart page: Ensure immediate visibility for shoppers.</li><li value="2" class="PlaygroundEditorTheme__listItem">Bottom of the cart page: Capture attention effectively as shoppers review their cart.</li></ul></li></ul><img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f4ee30_image.1716993188105.png?alt=media" alt="image.png" width="inherit" height="inherit"> <h4 class="PlaygroundEditorTheme__h4" dir="ltr" style="text-align: left;">5. Widget Alignment Options:</h4><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Left: Aligns the widget to the left.</li><li value="2" class="PlaygroundEditorTheme__listItem">Center: Centers the widget within its container.</li><li value="3" class="PlaygroundEditorTheme__listItem">Right: Aligns the widget to the right.</li></ul></li></ul><h4 class="PlaygroundEditorTheme__h4" dir="ltr" style="text-align: left;">Expand to Full Width</h4><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Option: Checkbox to expand the widget to the full width of its container.</li></ul> <img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f4ee30_image.1716993324999.png?alt=media" alt="image.png" width="inherit" height="inherit"> 6. Spacing And Alignment<h4 class="PlaygroundEditorTheme__h4" dir="ltr" style="text-align: left;">Vertical Spacing</h4><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Adjustable Slider: Adjust vertical space around the widget (e.g., 10 px).</li><li value="2" class="PlaygroundEditorTheme__listItem">Description: Manage vertical spacing to fit the widget within the design.</li></ul><h4 class="PlaygroundEditorTheme__h4" dir="ltr" style="text-align: left;">Horizontal Spacing</h4><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Adjustable Slider: Adjust horizontal space around the widget (e.g., 10 px).</li><li value="2" class="PlaygroundEditorTheme__listItem">Description: Manage horizontal spacing to ensure the widget fits neatly within the layout.</li></ul><img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f4ee30_image.1716993466625.png?alt=media" alt="image.png" width="inherit" height="inherit"><h4 class="PlaygroundEditorTheme__h4" dir="ltr" style="text-align: left;">7. Widget Text Alignment</h4><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Left: Aligns text within the widget to the left.</li><li value="2" class="PlaygroundEditorTheme__listItem">Center: Centers text within the widget.</li><li value="3" class="PlaygroundEditorTheme__listItem">Right: Aligns text within the widget to the right.</li></ul></li></ul><img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f4ee30_image.1716993538808.png?alt=media" alt="image.png" width="inherit" height="inherit"> 8. Widget Design &amp; Customization<h3 class="PlaygroundEditorTheme__h3" style="text-align: left;"> </h3><h4 class="PlaygroundEditorTheme__h4" dir="ltr" style="text-align: left;">a. Colors and Text Customization</h4><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Header &amp; Button Background Color:</li><li value="2" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Tool: Color Picker</li><li value="2" class="PlaygroundEditorTheme__listItem">Example: #3A2A2F</li></ul></li><li value="2" class="PlaygroundEditorTheme__listItem">Header &amp; Button Text Color:</li><li value="3" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Tool: Color Picker</li><li value="2" class="PlaygroundEditorTheme__listItem">Example: #FFFFFF</li></ul></li></ul> <img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f4ee30_image.1716993740050.png?alt=media" alt="image.png" width="inherit" height="inherit"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Header Text:</li><li value="2" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Input Field: (e.g., “Your Cart ID:”)</li></ul></li><li value="2" class="PlaygroundEditorTheme__listItem">Support Button Text:</li><li value="3" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Input Field: (e.g., “Submit Your Cart to Support”)</li></ul></li><li value="3" class="PlaygroundEditorTheme__listItem">Form Header Text:</li><li value="4" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Input Field: (e.g., “Complete the form below with any inquiries”)</li></ul></li><li value="4" class="PlaygroundEditorTheme__listItem">Form Button Text:</li><li value="5" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Input Field: (e.g., “Send my cart to support”)</li></ul></li><li value="5" class="PlaygroundEditorTheme__listItem">Custom Text for Cart Widget:</li><li value="6" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Rich Text Editor: (e.g., “Need Assistance with Your Cart? Get in touch below!”)</li></ul></li></ul><img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f4ee30_image.1716993877340.png?alt=media" alt="image.png" width="inherit" height="inherit"><h4 class="PlaygroundEditorTheme__h4" dir="ltr" style="text-align: left;">b. Visual Customization</h4><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Text Colors: Adjust text colors to match your brand.</li><li value="2" class="PlaygroundEditorTheme__listItem">Font Sizes: Modify font sizes to make text easily readable.</li><li value="3" class="PlaygroundEditorTheme__listItem">Formatting: Customize formatting to reflect your brand’s identity.</li></ul><img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f4ee30_image.1716993969690.png?alt=media" alt="image.png" width="inherit" height="inherit">

Enhance your Shopify store’s online presence and increase conversion rates by customizing the Cart Whisper widget. Follow these steps directly from your Shopify admin dashboard. <h4 class="PlaygroundEditorTheme__h4" dir="ltr">1. Access Widget Settings</h4><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Step 1: Log in to the Shopify admin dashboard and navigate to the <a href="https://admin.shopify.com/apps/cartassist/settings" rel="noreferrer" class="PlaygroundEditorTheme__link">setting page in the Cart Whisper app</a>.</li><li value="2" class="PlaygroundEditorTheme__listItem">Step 2: Click on "Modify Widget" to access the app embed section of your theme</li></ul><img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f4ee30_image.1716992530339.png?alt=media" alt="image.png" width="inherit" height="inherit"> <h4 class="PlaygroundEditorTheme__h4" dir="ltr">2. Customizing Widget Settings</h4>Choose Cart Widget Type<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Choose the type of widget you would like.</li><li value="2" class="PlaygroundEditorTheme__listItem">Options: Simple, Modern, Interactive</li><li value="3" class="PlaygroundEditorTheme__listItem"><a href="https://help.cartwhisper.com/articles/widget-style-guide-f4ee30-176a9" rel="noreferrer" class="PlaygroundEditorTheme__link">Learn more about the different widget types</a>.</li></ul><img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f4ee30_image.1716992969808.png?alt=media" alt="image.png" width="inherit" height="inherit"> 3. Card ID Display Option Select how the Cart ID should be displayed.<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Option 1: Display only the Cart ID for a minimalistic approach.</li><li value="2" class="PlaygroundEditorTheme__listItem">Option 2: Show the Cart ID along with custom text and additional elements for a more informative widget.</li></ul><img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f4ee30_image.1716993000483.png?alt=media" alt="image.png" width="inherit" height="inherit"> 4. Widget Placement<h4 class="PlaygroundEditorTheme__h4" dir="ltr" style="text-align: left;">Modify Widget Position Options:</h4><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Top of the cart page: Ensure immediate visibility for shoppers.</li><li value="2" class="PlaygroundEditorTheme__listItem">Bottom of the cart page: Capture attention effectively as shoppers review their cart.</li></ul></li></ul><img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f4ee30_image.1716993188105.png?alt=media" alt="image.png" width="inherit" height="inherit"> <h4 class="PlaygroundEditorTheme__h4" dir="ltr" style="text-align: left;">5. Widget Alignment Options:</h4><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Left: Aligns the widget to the left.</li><li value="2" class="PlaygroundEditorTheme__listItem">Center: Centers the widget within its container.</li><li value="3" class="PlaygroundEditorTheme__listItem">Right: Aligns the widget to the right.</li></ul></li></ul><h4 class="PlaygroundEditorTheme__h4" dir="ltr" style="text-align: left;">Expand to Full Width</h4><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Option: Checkbox to expand the widget to the full width of its container.</li></ul> <img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f4ee30_image.1716993324999.png?alt=media" alt="image.png" width="inherit" height="inherit"> 6. Spacing And Alignment<h4 class="PlaygroundEditorTheme__h4" dir="ltr" style="text-align: left;">Vertical Spacing</h4><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Adjustable Slider: Adjust vertical space around the widget (e.g., 10 px).</li><li value="2" class="PlaygroundEditorTheme__listItem">Description: Manage vertical spacing to fit the widget within the design.</li></ul><h4 class="PlaygroundEditorTheme__h4" dir="ltr" style="text-align: left;">Horizontal Spacing</h4><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Adjustable Slider: Adjust horizontal space around the widget (e.g., 10 px).</li><li value="2" class="PlaygroundEditorTheme__listItem">Description: Manage horizontal spacing to ensure the widget fits neatly within the layout.</li></ul><img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f4ee30_image.1716993466625.png?alt=media" alt="image.png" width="inherit" height="inherit"><h4 class="PlaygroundEditorTheme__h4" dir="ltr" style="text-align: left;">7. Widget Text Alignment</h4><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Left: Aligns text within the widget to the left.</li><li value="2" class="PlaygroundEditorTheme__listItem">Center: Centers text within the widget.</li><li value="3" class="PlaygroundEditorTheme__listItem">Right: Aligns text within the widget to the right.</li></ul></li></ul><img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f4ee30_image.1716993538808.png?alt=media" alt="image.png" width="inherit" height="inherit"> 8. Widget Design &amp; Customization<h3 class="PlaygroundEditorTheme__h3" style="text-align: left;"> </h3><h4 class="PlaygroundEditorTheme__h4" dir="ltr" style="text-align: left;">a. Colors and Text Customization</h4><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Header &amp; Button Background Color:</li><li value="2" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Tool: Color Picker</li><li value="2" class="PlaygroundEditorTheme__listItem">Example: #3A2A2F</li></ul></li><li value="2" class="PlaygroundEditorTheme__listItem">Header &amp; Button Text Color:</li><li value="3" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Tool: Color Picker</li><li value="2" class="PlaygroundEditorTheme__listItem">Example: #FFFFFF</li></ul></li></ul> <img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f4ee30_image.1716993740050.png?alt=media" alt="image.png" width="inherit" height="inherit"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Header Text:</li><li value="2" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Input Field: (e.g., “Your Cart ID:”)</li></ul></li><li value="2" class="PlaygroundEditorTheme__listItem">Support Button Text:</li><li value="3" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Input Field: (e.g., “Submit Your Cart to Support”)</li></ul></li><li value="3" class="PlaygroundEditorTheme__listItem">Form Header Text:</li><li value="4" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Input Field: (e.g., “Complete the form below with any inquiries”)</li></ul></li><li value="4" class="PlaygroundEditorTheme__listItem">Form Button Text:</li><li value="5" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Input Field: (e.g., “Send my cart to support”)</li></ul></li><li value="5" class="PlaygroundEditorTheme__listItem">Custom Text for Cart Widget:</li><li value="6" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Rich Text Editor: (e.g., “Need Assistance with Your Cart? Get in touch below!”)</li></ul></li></ul><img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f4ee30_image.1716993877340.png?alt=media" alt="image.png" width="inherit" height="inherit"><h4 class="PlaygroundEditorTheme__h4" dir="ltr" style="text-align: left;">b. Visual Customization</h4><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Text Colors: Adjust text colors to match your brand.</li><li value="2" class="PlaygroundEditorTheme__listItem">Font Sizes: Modify font sizes to make text easily readable.</li><li value="3" class="PlaygroundEditorTheme__listItem">Formatting: Customize formatting to reflect your brand’s identity.</li></ul><img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f4ee30_image.1716993969690.png?alt=media" alt="image.png" width="inherit" height="inherit">

Customizing The Cart Widget 

A widget that looks like part of your store gets noticed and trusted. All Cart Whisper widget settings live in the Cart Whisper Widgets app embed in your theme editor.
<h2>Open the widget settings</h2>
<ol>
<li>In Cart Whisper, go to Settings → Cart Widget and click Modify Cart Widget. (You can also click Cart Widget Settings on the Cart Whisper home page.)</li>
<li>Your theme editor opens. Open the Cart Whisper Widgets embed settings.</li>
<li>After making changes, click Save in the theme editor.</li>
</ol>
<h2>Style and content</h2>
<ul>
<li>Cart widget style:: Simple Widget, Modern Widget, Modern Widget with Form, or Hide Widget. See the <a href="https://help.cartwhisper.com/articles/widget-style-guide-f4ee30-176a9">Widget Style Guide</a>.</li>
<li>Card ID display option: Cart ID Only for a compact widget, or Cart ID with custom text to show your message as well.</li>
</ul>
<h2>Position</h2>
<ul>
<li>Widget placement:: Above or Under. The widget is placed above or under the location set for your theme.</li>
<li>Widget alignment:: Left, Center or Right (default Right).</li>
<li>Expand to full width: makes the widget fill the width of its container instead of a fixed width.</li>
<li>Vertical spacing and Horizontal spacing: sliders from 0 to 50 px (default 20 px) that add space around the widget.</li>
<li>Text alignment: alignment of the text inside the widget.</li>
</ul>
<h2>Colours</h2>
<ul>
<li>Header &amp; button background color (default black)</li>
<li>Header &amp; button text color (default white)</li>
</ul>
On the Simple Widget, the background colour is used for the border.
<h2>Wording</h2>
<ul>
<li>Header text: default Your Cart ID:</li>
<li>Support button text: default Submit Your Cart to Support (Modern Widget with Form only)</li>
<li>Form header text: default Contact Support</li>
<li>Form button text: default Send Message</li>
<li>Custom text for cart widget: a rich-text message. The default is a heading Need Assistance with Your Cart? with a line asking shoppers to mention their Cart ID.</li>
<li>Show Powered by Cart Whisper: optional. It's off by default.</li>
</ul>
<h2>Where the widget appears</h2>
The widget can show on your cart page, in your theme's slide-out cart drawer, and in the pop-up cart notification some themes show after "Add to cart". Show popup cart widget controls the pop-up notification. The locations come from Select your original theme name. Advanced users can override them with the location fields (Cart page widget location:, Sliding cart widget location:, Popup cart widget location:, Sliding cart inner details:), which take CSS selectors.
<h2>Troubleshooting</h2>
<ul>
<li>The widget is in the wrong spot. Try switching Widget placement: between Above and Under first. If that doesn't help, check your theme selection.</li>
<li>My changes don't show. Make sure you saved in the theme editor, and that you're editing your published theme. Then refresh your cart page.</li>
<li>The text is hard to read. Check that your header text colour contrasts with the background colour.</li>
<li>You need it placed somewhere specific. Email support@cartwhisper.com and we'll advise you.</li>
</ul>

Customising the Cart Widget

A widget that looks like part of your store gets noticed and trusted. All Cart Whisper widget settings live in the Cart Whisper Widgets app embed in your theme editor.
<h2>Open the widget settings</h2>
<ol>
<li>In Cart Whisper, go to Settings → Cart Widget and click Modify Cart Widget. (You can also click Cart Widget Settings on the Cart Whisper home page.)</li>
<li>Your theme editor opens. Open the Cart Whisper Widgets embed settings.</li>
<li>After making changes, click Save in the theme editor.</li>
</ol>
<h2>Style and content</h2>
<ul>
<li>Cart widget style:: Simple Widget, Modern Widget, Modern Widget with Form, or Hide Widget. See the <a href="https://help.cartwhisper.com/articles/widget-style-guide-f4ee30-176a9">Widget Style Guide</a>.</li>
<li>Card ID display option: Cart ID Only for a compact widget, or Cart ID with custom text to show your message as well.</li>
</ul>
<h2>Position</h2>
<ul>
<li>Widget placement:: Above or Under. The widget is placed above or under the location set for your theme.</li>
<li>Widget alignment:: Left, Center or Right (default Right).</li>
<li>Expand to full width: makes the widget fill the width of its container instead of a fixed width.</li>
<li>Vertical spacing and Horizontal spacing: sliders from 0 to 50 px (default 20 px) that add space around the widget.</li>
<li>Text alignment: alignment of the text inside the widget.</li>
</ul>
<h2>Colours</h2>
<ul>
<li>Header &amp; button background color (default black)</li>
<li>Header &amp; button text color (default white)</li>
</ul>
On the Simple Widget, the background colour is used for the border.
<h2>Wording</h2>
<ul>
<li>Header text: default Your Cart ID:</li>
<li>Support button text: default Submit Your Cart to Support (Modern Widget with Form only)</li>
<li>Form header text: default Contact Support</li>
<li>Form button text: default Send Message</li>
<li>Custom text for cart widget: a rich-text message. The default is a heading Need Assistance with Your Cart? with a line asking shoppers to mention their Cart ID.</li>
<li>Show Powered by Cart Whisper: optional. It's off by default.</li>
</ul>
<h2>Where the widget appears</h2>
The widget can show on your cart page, in your theme's slide-out cart drawer, and in the pop-up cart notification some themes show after "Add to cart". Show popup cart widget controls the pop-up notification. The locations come from Select your original theme name. Advanced users can override them with the location fields (Cart page widget location:, Sliding cart widget location:, Popup cart widget location:, Sliding cart inner details:), which take CSS selectors.
<h2>Troubleshooting</h2>
<ul>
<li>The widget is in the wrong spot. Try switching Widget placement: between Above and Under first. If that doesn't help, check your theme selection.</li>
<li>My changes don't show. Make sure you saved in the theme editor, and that you're editing your published theme. Then refresh your cart page.</li>
<li>The text is hard to read. Check that your header text colour contrasts with the background colour.</li>
<li>You need it placed somewhere specific. Email support@cartwhisper.com and we'll advise you.</li>
</ul>
<h2>Related guides</h2>
<ul>
<li><a href="https://help.cartwhisper.com/articles/widget-style-guide-simple-modern-modern-with-form-or-hidden-f4ee30-176a9">Widget Style Guide: Simple, Modern, Modern with Form, or hidden</a></li>
<li><a href="https://help.cartwhisper.com/articles/implementing-the-exit-intent-popup-f4ee30-250fd">Implementing the exit-intent popup</a></li>
</ul>

Choose your widget style and adjust its design, wording and placement.

Was this article helpful?