Surcharge Widget
The Surcharge Widget is a strategic tool designed to manage operational costs or implement specific fee structures. It enables merchants to add an extra charge to a customer's order during the Cart phase, which is essential for handling fees, service charges, or processing costs.
Playbook
"Protect your margins by recovering operational costs instantly. Whether it's a 'Handling Fee' or a 'Service Charge,' ensure these costs are transparently added to the cart before checkout."
The "Why" & The Metrics
Primary Metric Impact: Profit Margin Protection & Revenue Recovery.
The Psychological Trigger: Transparency. By explicitly labeling fees (e.g., "Eco-Packaging Fee" or "Heavy Item Handling"), you set clear expectations, reducing friction caused by surprise costs later in checkout.
Best Fit Industries: B2B Wholesale, Furniture/Heavy Goods, Custom Manufacturing, Events/Ticketing.
Strategic Use Cases (The "Plays")
Play #1: The Handling Fee (Fixed Cost)
The Concept: Automatically add a flat fee to cover packaging materials for fragile items.
The Logic: Recovers the cost of bubble wrap/boxes without inflating the base product price.
Configuration Strategy:
Charge Type: Fixed3.
Amount: e.g., $5.00.
Title: "Fragile Item Packaging Fee".
Play #2: The Service Charge (Percentage Based)
The Concept: Apply a percentage fee for complex orders or payment processing.
The Logic: Scales the fee relative to the order value, ensuring costs are covered for larger baskets.
Configuration Strategy:
Charge Type: Percentage4.
Amount: e.g., 2.5%.
Title: "Processing Fee".
Pro-Tips & Constraints
Smart Constraint: This widget cannot be applied to Post-Purchase, Thank You, or Order Status pages16. It must be triggered in the Cart or Checkout phase.
Tax Note: Ensure you configure the Tax Settings within the widget to define whether the added surcharge is taxable or non-taxable based on your local laws17.
Visibility: Use the Auto Opt-in feature to ensure the surcharge is applied by default, reducing the chance of customers removing it manually18.
Attribute | Description |
Widget Name | Surcharge Widget |
Core Purpose | Adds an additional monetary charge to the order total to cover costs like processing fees, service charges, or special handling. |
Where It Works | Cart and Checkout. |
Key Features | Dynamic Calculation (Fixed or Percentage); Real-Time Display in the cart; Custom Labeling for transparency; Tax Settings configuration. |
Limitations | Cannot be applied to Post-Purchase, Thank You, or Order Status pages. Advanced conditional logic may be limited depending on the specific template version. |
Step-by-Step Widget Creation
Navigate to the Widgets section in the Dynamatic dashboard.
Click Create Widgets.
Enter a descriptive Widget Title (e.g., "Handling Fee") and a short description.
Select the Surcharge template from the list.
Click Continue to Editor.
Content Tab (Fee Logic and Configuration)
This section allows you to define the mathematical logic of the fee, how it is labeled, and when it applies.
Setting | Functionality | Detail |
General Settings | Labeling and Messaging | Title: Define the name of the fee as it appears to the customer (e.g., "Service Fee"). Subtitle: Add a brief explanation or disclaimer. Image: Option to upload an icon associated with the charge. |
Fee Type | Calculation Logic | Choose between Fixed Amount (e.g., $5.00 flat fee) or Percentage (e.g., 2% of cart subtotal). |
Fee Amount | Value Definition | Input the specific numerical value for the fixed fee or the percentage rate. |
Trigger Conditions | Applicability Rules | Define when the surcharge applies (e.g., based on Cart Subtotal, specific Products, or Shipping Methods). |
Tax Settings | Compliance | Define whether the added surcharge is Taxable or non-taxable. |
Display Method | Visual Implementation | Choose to show the surcharge visually in the widget area or add it strictly as a Cart Line Item (product). |
Style Tab (Visual Customization)
Customize the appearance of the surcharge notification to ensure it matches your brand's theme.
General Options: Adjust the Background Color of the widget container.
Typography: Customize Font Size, Font Weight, and Text Color for the fee label and amount to ensure readability and trust.
Advanced Tab (Technical Refinements)
Device Setting: Control visibility by selecting specific devices (Desktop or Mobile) where the surcharge info should be displayed.
Custom CSS: Enter custom CSS code to refine layout margins, padding, or specific styling elements not covered in the standard Style tab.
Final Deployment
Click Save Changes to secure your configuration.
To activate the surcharge, you must assign this widget to a Placement Zone (typically cart_summary or checkout_main) via a Campaign.
Verification: Visit your storefront, add items to the cart, and verify that the surcharge appears correctly in the totals breakdown.
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