Kiwi Size Chart & Recommender is designed to work across many Shopify themes - but how it behaves on your product page depends on how your theme loads, updates, and re-renders content.
Many placement issues come down to how the page changes over time, not whether Kiwi is “working” or not.
This article explains:
What happens when a product page loads
What changes when a variant is selected
Why charts sometimes move, disappear, or reappear
How the app block and injection selector interact with your theme
Once you understand this lifecycle, most placement behavior will make sense.
The Product Page Lifecycle (Simplified)
Think of your product page as going through three phases:
Initial page load
Variant change
Theme re-render
Kiwi reacts differently at each step depending on where the size chart is placed.
1. Initial Page Load: Where Kiwi Starts
When a product page loads:
Shopify renders the product template
Theme JavaScript initializes
The Kiwi app block (if added) loads Kiwi on the page
Kiwi evaluates your display rules:
Modal vs inline
App block placement
Injection selector (if used)
At this point, everything usually looks correct.
👉 This is why charts often appear “correct at first.”
2. Variant Change: What Actually Happens
When a customer selects a variant (size, color, material):
Your theme decides what to update.
Depending on the theme, this may include:
Updating prices
Updating images
Re-rendering variant inputs
Rebuilding entire sections of the product page
⚠️ Some themes replace HTML instead of updating it.
When that happens:
Any elements inside the replaced container are destroyed
Kiwi cannot “hold onto” elements that no longer exist
This is the most common reason charts disappear or move.
3. Re-rendering: Why Charts Move or Reset
If your size chart is placed inside a container that reloads, the theme removes it.
Common symptoms:
Chart disappears after variant change
Chart jumps to a new position
Chart briefly appears, then vanishes
Duplicate charts appear
This is not a Kiwi bug — it’s the theme re-rendering content.
Kiwi cannot override or prevent theme JavaScript from rebuilding the page.
How Placement Methods Behave
Understanding the difference between placement methods explains most behavior.
Using the Kiwi App Block (Recommended)
The app block’s job is to:
Load and initialize Kiwi on the product template
Anchor Kiwi to a stable part of the page
Allow display rules to run reliably
Key thing to understand:
The location of the app block itself does not control where the chart appears.
Placement is controlled by:
Display settings
Injection selectors (if used)
Because the app block lives at the template level, it is less affected by variant re-renders, making it the most stable setup.
Using a Custom Injection Selector
Injection selectors tell Kiwi:
“Insert the chart relative to this element.”
This works only if the target element is stable.
Injection works best when:
The selector points to a static container
The container does not reload on variant change
Pseudo-classes are used to target the correct variant block
Injection becomes unstable when:
The selector targets inputs, swatches, or variant markup
The element is rebuilt on variant change
Variant apps generate dynamic HTML
Why Charts Sometimes “Still Show” or “Won’t Hide”
Common causes:
The chart is injected into a container that reloads
The selector matches multiple elements
The chart is re-inserted after a theme script runs
A variant app rebuilds markup after Kiwi injects
This creates the feeling that the chart is:
Ignoring settings
“Stuck”
Behaving inconsistently
In reality, Kiwi is responding correctly — the page is changing underneath it.
Why Inline Placement Is More Fragile Than Modal
Modal charts:
Live outside most dynamic containers
Are less affected by variant logic
Rarely disappear
Inline charts:
Live inside the page layout
Are affected by re-rendering
Require careful placement
This is why modal display is often recommended as a first step.
Variant Apps and Theme Scripts
Variant apps (like Swatch King) often:
Replace variant HTML
Inject their own JavaScript
Control variant behavior entirely
When this happens:
Inline placement inside variant markup is unsafe
Charts must be placed outside variant-controlled containers
App block usage is strongly recommended
Still Seeing Issues?
If things still don’t behave as expected:
Watch our placement walkthrough video
Double-check selector targets
Make sure the chart is outside variant-reloading containers
If you need help, contact our support team with:
Your theme name
A product page URL
Whether you’re using:
App block
Injection selector
Variant apps
We’re happy to help you find a stable setup.