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.

#### 1\. Access Widget Settings

* ****Step 1:****Log in to the Shopify admin dashboard and navigate to the[setting page in the Cart Whisper app](https://admin.shopify.com/apps/cartassist/settings).
* ****Step 2:****Click on "Modify Widget" to access the app embed section of your theme

![image.png](https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f4ee30_image.1716992530339.png?alt=media)

#### ****2\. Customizing Widget Settings****

Choose Cart Widget Type

* Choose the type of widget you would like.
* ****Options****: Simple, Modern, Interactive
* [Learn more about the different widget types](https://help.cartwhisper.com/articles/widget-style-guide-f4ee30-176a9).

![image.png](https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f4ee30_image.1716992969808.png?alt=media)

****3\. Card ID Display Option****  
Select how the Cart ID should be displayed.

* ****Option 1****: Display only the Cart ID for a minimalistic approach.
* ****Option 2****: Show the Cart ID along with custom text and additional elements for a more informative widget.

![image.png](https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f4ee30_image.1716993000483.png?alt=media)

****4\. Widget Placement****

#### Modify Widget Position Options:

* * ****Top of the cart page****: Ensure immediate visibility for shoppers.
  * ****Bottom of the cart page****: Capture attention effectively as shoppers review their cart.

![image.png](https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f4ee30_image.1716993188105.png?alt=media)

#### ****5\. Widget Alignment Options****:

* * ****Left****: Aligns the widget to the left.
  * ****Center****: Centers the widget within its container.
  * ****Right****: Aligns the widget to the right.

#### ****Expand to Full Width****

* ****Option****: Checkbox to expand the widget to the full width of its container.

![image.png](https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f4ee30_image.1716993324999.png?alt=media)

****6. Spacing And Alignment****

#### Vertical Spacing

* ****Adjustable Slider****: Adjust vertical space around the widget (e.g., 10 px).
* ****Description****: Manage vertical spacing to fit the widget within the design.

#### Horizontal Spacing

* ****Adjustable Slider****: Adjust horizontal space around the widget (e.g., 10 px).
* ****Description****: Manage horizontal spacing to ensure the widget fits neatly within the layout.

![image.png](https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f4ee30_image.1716993466625.png?alt=media)

#### ****7\. Widget Text Alignment****

* * ****Left****: Aligns text within the widget to the left.
  * ****Center****: Centers text within the widget.
  * ****Right****: Aligns text within the widget to the right.

![image.png](https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f4ee30_image.1716993538808.png?alt=media)

****8\. Widget Design & Customization****

#### a. Colors and Text Customization

* ****Header & Button Background Color****:
* * ****Tool****: Color Picker
  * ****Example****:#3A2A2F
* ****Header & Button Text Color****:
* * ****Tool****: Color Picker
  * ****Example****:#FFFFFF

![image.png](https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f4ee30_image.1716993740050.png?alt=media)

* Header Text:
* * Input Field: (e.g., “Your Cart ID:”)
* Support Button Text:
* * Input Field: (e.g., “Submit Your Cart to Support”)
* Form Header Text:
* * Input Field: (e.g., “Complete the form below with any inquiries”)
* Form Button Text:
* * Input Field: (e.g., “Send my cart to support”)
* Custom Text for Cart Widget:
* * Rich Text Editor: (e.g., “Need Assistance with Your Cart? Get in touch below!”)

![image.png](https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f4ee30_image.1716993877340.png?alt=media)

#### b. Visual Customization

* ****Text Colors****: Adjust text colors to match your brand.
* ****Font Sizes****: Modify font sizes to make text easily readable.
* ****Formatting****: Customize formatting to reflect your brand’s identity.

![image.png](https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f4ee30_image.1716993969690.png?alt=media)

<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: left;">Customizing Your Cart Whisper Widget</h2>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. <h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: left;">1. Access Widget Settings</h3><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Step: Log in to your Shopify admin dashboard.</li><li value="2" class="PlaygroundEditorTheme__listItem">Step: Navigate to the Cart Whisper app to access the widget settings.</li></ul> <h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: left;">3. Widget Display Settings</h3><h4 class="PlaygroundEditorTheme__h4" dir="ltr" style="text-align: left;">a. Modify Widget Position</h4><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Position Options:</li><li value="2" 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><h4 class="PlaygroundEditorTheme__h4" dir="ltr" style="text-align: left;">b. Customize Widget Appearance</h4><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Background Color: Select a background color that complements your brand’s palette.</li><li value="2" class="PlaygroundEditorTheme__listItem">Border Color: Use the color picker to find a border color that aligns with your brand’s style.</li></ul> <h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: left;">4. Widget Type and Placement</h3><h4 class="PlaygroundEditorTheme__h4" dir="ltr" style="text-align: left;">a. Card Widget Type</h4><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Options: Modern, Interactive</li><li value="2" class="PlaygroundEditorTheme__listItem">Description: Choose the type of widget that best fits your store’s needs.</li></ul> <h4 class="PlaygroundEditorTheme__h4" dir="ltr" style="text-align: left;">b. Widget Placement</h4><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Options:</li><li value="2" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Above: Place the widget above the selected location.</li><li value="2" class="PlaygroundEditorTheme__listItem">Under: Place the widget under the selected location.</li></ul></li></ul><h4 class="PlaygroundEditorTheme__h4" dir="ltr" style="text-align: left;">c. Widget Alignment</h4><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Options:</li><li value="2" 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;">d. 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> <h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: left;">5. Spacing and Alignment</h3><h4 class="PlaygroundEditorTheme__h4" dir="ltr" style="text-align: left;">a. 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;">b. 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><h4 class="PlaygroundEditorTheme__h4" dir="ltr" style="text-align: left;">c. Text Alignment</h4><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Options:</li><li value="2" 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> <h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: left;">6. Set Widget Preferences</h3><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Minimalistic Approach: Display only the Cart ID for a simple look.</li><li value="2" class="PlaygroundEditorTheme__listItem">Informative Widget: Display Cart ID with custom text and additional elements for more information.</li></ul> <h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: left;">7. Widget Design and Customization</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><li value="3" class="PlaygroundEditorTheme__listItem">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., “Your Cart ID:”)</li></ul></li><li value="4" class="PlaygroundEditorTheme__listItem">Support 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., “Submit Your Cart to Support”)</li></ul></li><li value="5" class="PlaygroundEditorTheme__listItem">Form Header Text:</li><li value="6" 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="6" class="PlaygroundEditorTheme__listItem">Form Button Text:</li><li value="7" 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="7" class="PlaygroundEditorTheme__listItem">Custom Text for Cart Widget:</li><li value="8" 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><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>

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">

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 

Guides on configuring the cart widget settings and customize it to match your brands tone

The following articles will guide you through configuring the app and tailoring both the cart and exit popup widget to align with your brand’s identity and communication style. This customization will improve support on the cart page and help reduce cart abandonment, ultimately leading to increased sales.

Was this article helpful?