The default behaviour described in this article requires no code, it works automatically. The optional JavaScript snippet (for hiding your existing chart on products where the Size Hub is active) requires a developer or agency.
How it works by default
Measmerize only injects the Size Hub script on product pages where a Size Hub has been explicitly assigned in the app.
If no guide is linked to a product, Measmerize doesn't load at all on that page. Your existing size chart continues to display exactly as before, without any interference.
This behaviour is automatic. No configuration needed.
Going further: hide your existing chart only when Size Hub is active
If you want your existing size chart to be hidden on products where Size Hub is running, but still visible everywhere else, you can implement a simple conditional using the measmerize.widget.ready JavaScript event.
This is the recommended approach if you want a clean, conflict-free experience across your full catalogue, whether or not a product has a Measmerize Size Hub yet.
How it works
When Size Hub is active on a page, it injects a script element with the ID measmerize-script. You can listen for the measmerize.widget.ready event on that element to know when the widget has fully loaded.
If a product has no Size Hub assigned, that script element won't exist, so the listener never fires and your existing chart remains visible automatically.
Code snippet
Ask your developer or theme agency to add the following to your theme's JavaScript:
const measmerizeScript = document.getElementById("measmerize-script");if (measmerizeScript) {
measmerizeScript.addEventListener("measmerize.widget.ready", function () {
// Size Hub is active: hide your existing size chart here
// Replace the selector below with the one that targets your chart element
document.querySelector(".your-size-chart-selector").style.display = "none";
});
}
What this does, step by step:
It checks whether the Measmerize script is present on the current page.
If it is (Size Hub is active on this product), it waits for the widget to finish loading, then hides your existing size chart.
If it isn't (no Size Hub assigned to this product), the block is skipped entirely. Your existing chart stays visible, untouched.
Note for developers: Replace .your-size-chart-selector with the actual CSS selector for your size chart element. This will vary depending on the app or theme section you're using.
Summary
Product situation | What happens |
Size Hub assigned in Measmerize | Size Hub loads on the page. Use the event above to hide your existing chart if needed. |
No Size Hub assigned | Measmerize script does not load. Your existing chart displays as normal. |
Frequently asked questions
Will Measmerize override or break my existing size chart?
No. On any product page where no Size Hub is assigned, our script is never loaded. Your existing setup is completely unaffected.
Do I need a developer to set this up?
The default behaviour (existing chart stays visible on non-covered products) works out of the box. The optional JavaScript snippet (for hiding your chart on pages where Size Hub is active) does require a developer or theme agency to implement.
What if I assign a Size Hub to a product later?
As soon as a guide is assigned in the app, Size Hub will activate on that product page. If you've implemented the conditional code above, your existing chart will automatically be hidden on that page from that point on.