Tiered Bar

The Tiered Bar Widget is a powerful Average Order Value (AOV) booster. It encourages customers to spend more by providing a clear, visual representation of their progress toward defined reward milestones.

Attribute	Description
Widget Name	Tiered Bar
Purpose	Motivates customers to increase cart size by showing real-time progress toward escalating rewards (e.g., Free Shipping, Free Gift, Discounts).
Where It Works	Cart, Checkout (Plus merchants), and any Webpage (e.g., Product Page).
Key Features	Visually displays reward levels; offers custom messaging (e.g., “Only $20 away from Free Gift”); allows for custom styling of each tier.
Configuration	Set specific tier amounts and rewards; customize messages and icons; match design to store theme.
Limitations	Logic must be synced with existing discount or gift rules. Not available for Post-Purchase or Thank You pages.

Step-by-Step Widget Creation

Follow these steps to set up and deploy your Tiered Bar Widget:

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 Tiered Bar widget from the list of available templates.
Click Next.

2. Template Choice

You will be presented with several pre-designed templates. Select the one that best suits your store's aesthetic and click Select.

3. Content Configuration

The main customization page will open with three tabs: Content, Style, and Advanced. Start in the Content section:

Define Milestones: This is where you create your reward levels. Click to add new milestones.
- Set Amount: Define the cart threshold required for the reward (e.g., $50).
- Set Reward: Specify the reward type (e.g., Free Shipping, Free Gift).
- Customization: Change icons and set the motivational messages displayed to the customer.
Exclusions: Define any products or product tags that should not count toward the Tiered Bar total.

After defining all your tiers (e.g., a Free Shipping milestone and a Free Gift milestone), click Save Changes.

4. Style Customization

Navigate to the Style tab to align the widget's design with your store’s brand:

Customize design elements such as the widget's background color, font size, and the appearance of the milestone background and product cards (if applicable).
Adjust the colors of the progress bar itself to ensure maximum visibility and theme consistency.

5. Advanced Refinements

Use the Advanced tab for final control over display:

Device Setting: Specify whether the widget should display on desktop, mobile, or both.
Custom CSS: Apply custom CSS for granular design control beyond the standard styling options.

Once the configuration is complete, your Tiered Bar Widget is ready. You must now connect it to a Placement (Zone) via a Campaign/Experience to make it live on your store. Congratulations!

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

04. Campaigns

05. Displaying Your Widgets on the Storefront