This article shows you how to place the Kiwi size chart next to a specific element on your product page, such as the Size options or the Add to cart button, by telling Kiwi which element to target. By the end, the chart will be appearing where you chose, and you will have confirmed it on your live storefront.
Who this is for: merchants who are comfortable opening their browser's developer tools and reading page markup. If you would rather drag the chart into place without touching code, use the app block method instead, which is covered in How to Move the Size Chart on Your Product Page (Beginner-Friendly: App Block Method).
Plan required: none. The Sizing Injection Selector is available on every Kiwi plan, including Free.
Before you start: injection overrides the app block
Kiwi decides where to put the size chart in a fixed order of priority:
Custom injection, when a selector is set
The app block, where you placed it in the theme editor
The default position, near the first Add to cart form
So setting a selector here overrides the app block. If you have already positioned the chart using the app block and you set a selector as well, the selector wins and the block position stops being used. To go back to the app block, clear the Selector value field and save.
For the full picture, see How Size Chart Placement Works in Kiwi (Placement Priority Explained).
Where do I enter the injection selector?
Open the Kiwi Size Chart & Recommender app in your Shopify admin.
Go to Styles & Settings in the left-hand navigation.
Open the General Settings tab, then the Display tab. This is the first page you land on.
Find Sizing Injection Selector under Display Settings.
The Sizing Injection Selector is three fields, not one, and all three matter:
Position decides where the chart goes relative to the element you target. The options are Inject before, Inject after, Inject at the beginning of, Inject at the end of, Hijack an element and Do no inject.
Selector type decides how Kiwi finds that element. See the next section.
Selector value is the element itself, up to 99 characters, for example
product-form__buttons.
If the chart ends up on the wrong side of your target element, the Position dropdown is what to change, not the selector.
Which selector type should I use?
The Selector type dropdown offers four options:
ID, when the element has one. Most specific, and the most likely to break if your theme changes.
Class, the most common choice.
CSS selector, for a plain CSS selector.
Advanced selector, for a more specific CSS selector when your theme needs it.
If you are not sure, class plus pseudo-class selectors are generally the most stable across products.
There is no single correct answer here, because selectors differ from theme to theme. These are examples from one theme, not values to copy:
ID:
#AddToCart-buttonClass:
.product-form__submitAdvanced selector:
.product-form__input:last-of-type > legend.form__label
If we publish an injection guide for your theme, use that instead of working the selector out yourself. Those guides carry the tested selector and any CSS needed for that theme.
How do I find the selector for my own theme?
Open a product page in your store.
Right-click near the element you want to place the chart against, for example the Add to cart button.
Click Inspect.
Click the pointer icon at the top left of the inspector panel, so you can pick elements by hovering.
Hover over the element you want and click it. The inspector highlights the element and shows its tag, id and classes, which is what you copy into the Selector value field.
How do I check it worked?
Paste the selector into the Selector value field, set Position and Selector type to match, and click Save Settings.
Click Preview sizing injection on the same page. Validating against a live product page needs your store password, and the page links to where you can find it.
Open one of your product pages on the storefront. The size chart link should now appear next to the element you targeted.
Check a second product as well, ideally one using a different template. A selector that works on one product may not work on another if the markup differs.
What if the size chart still does not appear?
Work through these in order:
Is the app on? Enable the app must be On, on the same Display Settings page.
Does the element exist on that product? Inspect the product where it is failing and confirm the id or class you entered is actually present.
Is the chart matched to that product? Placement only decides where a chart appears, not whether it appears. If the product does not match any size chart's conditions, nothing will show wherever you point it.
Does the page build itself after loading? If your theme or another app rewrites the product form, the chart can be injected and then removed. Turn on Enable reinject on the same page, which is covered in Fix Size Chart Disappearing After Variant or Swatch Selection.
Is the chart in the wrong spot rather than missing? Change the Position dropdown before changing the selector.
If none of that resolves it, send us your theme name and version and the URL of a product page where the chart is landing in the wrong place. Those two are what a placement review starts from.
Want to learn more?
For more advanced placement guidance, especially around building selectors that stay stable across all your products, read How can I ensure proper display and placement of size charts, including theme updates?