Shipping Bar
The Shipping Bar Widget is an essential conversion and AOV tool. It displays a dynamic, visually engaging progress bar that informs customers how close their current cart total is to qualifying for free shipping. This feature incentivizes customers to add more items to their cart to unlock the savings threshold.
Widget Overview
| Attribute | Description |
| Widget Name | Shipping Bar Widget |
| Core Purpose | Increases Average Order Value (AOV) by motivating customers with a clear, visual goal (free shipping) based on their cart total. |
| Key Features | Dynamic progress updates in real-time; displays motivational messages (e.g., "You're $20 away from Free Shipping"); customizable minimum threshold. |
| Where It Works | Webpage (all store pages), Cart (Slide Cart Draw), and Checkout (Plus merchants). |
| Limitations | Must be synced with your actual shipping discount settings. May require responsive adjustments for small mobile screens. |
Step-by-Step Widget Creation
1. Initial Widget Selection
-
Click Create Widgets in your Dynamatic dashboard.
-
On the "Add New Widgets" page, fill in the Widget Title and a brief description.
-
Search for and select the Shipping Bar Widget from the template list.
-
Click Next.
2. Content Tab: Setting Thresholds and Messaging
The Content section is where you define the free shipping goal, exclusion rules, and all associated messages.
| Setting | Functionality | Detail |
| Minimum Order Value | Sets the required cart total for free shipping qualification. | This value must accurately match your store's active free shipping discount rule. |
| Product Exclusions | Allows you to exclude specific products from contributing to the progress bar total. | Products added to this list will not count toward the minimum order value. |
| Alignment | Controls the positioning of the bar within its placement zone. | Set the bar to align left, center, or right. |
| Custom Messaging | Customize the messages displayed to the customer at each stage: | Free Shipping Pre-label: Message shown before the customer reaches the goal (e.g., "Only $X away!"). Free Shipping Post-label: Message shown after the goal is reached (e.g., "Congratulations! Free Shipping Unlocked!"). |
| Fulfillment Message | An optional message that can accompany the progress bar. | Used for communication regarding fulfillment or shipping rules. |
| Slider Icon | Allows you to upload a custom icon for the progress bar slider. | Personalize the visual element that moves along the bar. |
3. Style Tab: Visual Customization
The Style section allows you to customize the bar's appearance for brand consistency:
-
Color & Typography: Customize the card background color, text color, font size, and font weight for all messages.
-
Bar Design: Adjust the appearance of the progress bar itself (e.g., fill color, empty color).
-
Borders: Control the corner radius, border style, border color, and border width of the bar container.
4. Advanced Tab: Final Refinements
The Advanced tab is for final display control and custom code integration:
-
Device Setting: Select the specific devices (Desktop, Mobile, or both) where the widget should be visible.
-
Custom CSS: Input custom CSS code for advanced styling not covered by the standard options.
Once the widget is configured, click Save Changes. You must then connect the Shipping Bar Widget to a Placement (Zone) via a Campaign/Experience to activate it on your storefront.
Publishing Your Configured Widget Live
This following documentation section provides the final, detailed steps required to publish your fully configured widget and make it visible to customers on your live storefront.
01. How to successfully setup a widget
02. Understanding and Creating Audiences
03. Creating Placements and Zones
05. Displaying Your Widgets on the Storefront