Variant apps like Swatch King, Bold Options, or custom variant scripts can change how Shopify product pages behave. When these apps dynamically rebuild variant sections, they can affect where - and how - the Kiwi size chart appears.
This guide explains why issues happen and how to place Kiwi correctly.
Why Variant Apps Cause Issues
Most variant apps work by re-rendering part (or all) of the product form when a customer selects a variant.
When this happens:
Elements are removed from the page
New DOM elements are created
Previously injected content may be destroyed
If the Kiwi size chart is injected inside one of those dynamic areas, it can:
Disappear after variant change
Duplicate
Trigger JavaScript errors
Jump positions unexpectedly
⚠️ These are theme or app behavior issues, not selector mistakes.
Known Variant-App Behaviors (What to Expect)
With apps like Swatch King, you may see:
Full replacement of variant HTML
Variant inputs generated dynamically
Event-driven DOM destruction and recreation
Multiple variant blocks sharing the same classes
Because of this, inline placement next to variant inputs is fragile.
Required Placement Rules (Very Important)
When using variant apps:
✅ DO
Place the size chart outside the variant-rendering container
Use the Kiwi App Block whenever possible
Place the chart:
Below the full variant section, or
Above the Add to Cart button
Use modal display as a fallback when inline placement is unstable
❌ DO NOT
Inject inside:
Radio button markup
Swatch containers
<form>elements that reload on variant change
Inject directly into app-generated markup
Rely on selectors that target dynamic IDs
Special Selector Handling (If You Must Use Injection)
If injection is required:
Target a static parent container
Avoid elements created by the variant app
Prefer selectors that:
Exist on initial page load
Do not change after variant selection
Combine:
A stable class
With
:last-of-typeor:nth-of-type()only if necessary
⚠️ If the chart disappears after a variant change, the selector is pointing at a dynamic container.
Still Running Into Issues?
If you’re still seeing problems after following the steps above:
Double-check that the size chart is placed outside variant-reloading containers
Try switching to modal display as a stability test
Review the browser console for JavaScript errors
If things still aren’t working as expected, please get in touch with our support team - we’re happy to help.
To speed things up, include:
Your theme name
A product page URL
The variant app you’re using (e.g. Swatch King)
How the size chart is placed (app block or injection selector)
Any console errors you’re seeing
We’ll take a look and help you get everything working smoothly.