Custom HTML
The Custom HTML Widget is a powerful tool designed to provide maximum flexibility by allowing merchants to embed raw code snippets directly onto their storefront. This is ideal for adding tracking pixels, custom marketing banners, third-party scripts, or unique design elements that fall outside the scope of standard widgets.
Playbook
"Bypass the limitations of your standard theme. The Custom HTML widget gives you a blank canvas to inject trust badges, third-party scripts, or custom promotional banners exactly where you need them—without hiring a developer or touching your store's core code."
The "Why" & The Metrics
Primary Metric Impact: Conversion Rate (CR) and Time on Site.
The Psychological Trigger: Authority & Certainty. By adding custom trust seals or specific shipping information tables, you remove doubt at the point of purchase.
Best Fit Industries: Universal (Essential for stores requiring specific legal notices, custom sizing charts, or unique branding elements).
Strategic Use Cases (The "Plays")
Play #1: The Quick Win (Trust Injection)
The Concept: Manually inserting high-quality payment icons or "Secure Checkout" badges into the Cart drawer.
The Logic: Generic themes often hide payment icons in the footer. Moving them to the cart via HTML visually reassures the customer immediately before checkout.
Configuration Strategy:
Trigger/Condition: Show on Cart.
Key Setting: Paste your SVG icons or image hosted links into the Content > General HTML box.
Copy/Creative Idea: "Guaranteed Safe Checkout."
Play #2: The Profit Maximizer (The "Hard-Coded" Banner)
The Concept: Creating a highly specific, stylized alert banner that standard banner widgets can't achieve (e.g., a blinking text or a specific gradient background).
The Logic: Sometimes standard UI isn't "loud" enough. Custom HTML allows for aggressive styling to ensure critical shipping cut-off times are seen, protecting sales.
Configuration Strategy:
Trigger/Condition: Show on Webpage (Product Pages).
Key Setting: Use the Advanced > Custom CSS section to apply animations to your HTML block.
Copy/Creative Idea: "⚡️ Order within 2 hours for Next Day Delivery."
Play #3: The Brand Builder (Interactive Embeds)
The Concept: Embedding external tools that don't have native Shopify integrations, such as a Typeform survey, a Spotify playlist for brand vibe, or a calendar booking iframe.
The Logic: Keeps the user engaged on your site rather than bouncing them to an external link.
Configuration Strategy:
Trigger/Condition: Show on Webpage (e.g., About Us or Landing Page).
Key Setting: Paste the <iframe> code provided by the third-party tool into the HTML content area6.
Copy/Creative Idea: "Book your consultation directly below."
Pro-Tips & Constraints
Smart Constraint: No Validation. The widget does not validate or debug your code11. If you paste broken HTML/JS, it can break the page layout12. Always test in a preview environment first.
Integration Note: This is the go-to widget for adding Third-Party Scripts (like tracking pixels or chat widgets) that need to fire specifically in the Cart or on a specific Webpage without editing theme.liquid.
Optimization Tip: If using images within your HTML, ensure they are hosted on a fast CDN and optimized for web to prevent performance impact13.
Attribute | Description |
Widget Name | Custom HTML Widget |
Core Purpose | Allows merchants to embed custom code (HTML, inline CSS, or JavaScript) directly within specific zones to display unique content or integrate third-party functionality. |
Where It Works | Webpage (all store pages) and Cart (Dynamatic Cart). |
Main Features | Embed any valid HTML block; supports custom styles or inline JavaScript; excellent for quick, non-permanent customizations. |
Limitations | No built-in validation or debugging; improper scripts may break page layout; user is responsible for ensuring code security and performance. |
Step-by-Step Widget Creation
Click Create Widgets in your Dynamatic dashboard.
On the "Add New Widgets" page, fill in the Widget Title and a brief description.
Select the Custom HTML template option.
Click Next, then click Select on the template preview.
Content Tab: HTML Editor
The Content section provides a direct editor where you paste the code you wish to deploy.
Setting | Functionality | Detail |
General | Custom HTML Editor | This is the primary input field. The user can write or paste any valid HTML, CSS, or JavaScript code here to design content manually or embed external snippets. |
Visibility | Position Control | The widget will display exactly where the associated Placement Zone is located (top, middle, or bottom of a container). |
Advanced Tab (Technical Refinements)
Setting | Functionality | Detail |
Device Setting | Controls visibility across devices. | The user can select the specific devices (Desktop or Mobile) where they want to show the widget. |
Custom CSS | Allows code injection. | The user can write global custom CSS here that will apply specifically to this widget's container, separate from the HTML content itself. |
Final Deployment
Click Save Changes once your code is complete.
The widget must be connected to an active Placement (Zone) via a Campaign/Experience to go live on the 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