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

Was this article helpful?