Skip to main content

Swatch King-Specific Compatibility Notes for Kiwi Size Chart

Swatch King-only constraints, expected behavior, and safe placement guidance.

This article covers how to set up and troubleshoot the Kiwi Size Chart when your store uses the Swatch King app. Swatch King dynamically rebuilds variant blocks on selection, which can cause size charts to disappear or move — follow the steps below to get a stable setup.

Recommended setup: configure inside Swatch King

The simplest and most stable way to display your size chart alongside Swatch King swatches is to configure placement directly inside Swatch King's settings — no CSS selectors needed.

  1. Open the Swatch King app in your Shopify admin.

  2. Go to product options settings.

  3. Find the Size Chart setting and click the "Search size options" field — add all your size option names (e.g. Size, Shoe Size).

  4. Under Size Chart Alignment, select "Inline with label".

  5. Select Kiwi as your size chart app.

  6. Save and preview on a product page.

If you want the size chart to appear in a different position (not inline with the swatch label), use Kiwi's injection settings instead — see the section below.

Why size charts can disappear with Swatch King

  • Variant blocks may be rebuilt after selection.

  • IDs/classes can change after interaction.

  • Previously injected elements can disappear or move.

This means any element injected inside a Swatch King-managed wrapper may be removed or repositioned when the customer interacts with the swatches.

Alternative: use Kiwi's injection settings

If you prefer to control placement via Kiwi's injection selector, follow these rules to avoid the chart disappearing after a variant is selected:

  • Use the Kiwi App Block (via the theme editor) where possible — this is the most stable method.

  • Do not inject inside Swatch King-managed option wrappers — these are rebuilt on variant selection.

  • Target a stable parent container outside the dynamic swatch markup (e.g. the product form wrapper, not the variant selector).

  • If you are unsure which selector is stable, switch to modal display as a fallback — the chart opens in a popup rather than inline.

Troubleshooting: size chart still disappearing?

  1. Switch to modal display temporarily to confirm the chart itself is working.

  2. Check that your injection selector points to a container outside Swatch King's option wrapper.

  3. Try using the Kiwi App Block instead of selector injection.

  4. If the chart still disappears after trying the above, contact us with a collaborator link to your store.

When to contact support

  • The chart disappears after following all steps above.

  • You need help identifying a stable CSS selector for your specific theme.

  • Your theme is heavily customised and standard selectors do not work.

When contacting support, please share a collaborator link to your store and let us know which setup method you tried (Swatch King alignment or Kiwi injection).

Did this answer your question?