This guide applies to Shopify’s most common free OS 2.0 themes that share the same variant picker structure: Dawn, Sense, Refresh, Origin, Ride, Taste
If your store uses any of these themes, the selector and CSS in this article will work out of the box. If you're using a different theme or a customized version, feel free to reach out and we’ll help you find the exact selector for your setup.
Update These Settings Inside the Kiwi App
Go to:
Kiwi → Styles & Settings → General Settings → Display → Sizing Injection Selector
Then update:
1. Selector Type
Set this dropdown to:
CSS Selector
2. CSS Selector (Parent Selector)
Paste this exact Dawn selector:
.variant-picker__option:last-of-type > .variant-picker__option-info
3. Injection Position
Set:
Inject at the end of
This tells Kiwi to place the size chart link inside the Size label’s container, at the very end, which is what places it at the end of “Size” text.
Add This CSS for Proper Side-by-Side Placement
Go to:
Kiwi → Styles & Settings → Advanced → Custom CSS
Paste:
.ks-chart-container { display: inline; margin-left: 10px; width: auto; }This makes sure the size chart link stays on the same line as the Size label and has a little spacing so it doesn’t look crowded.
Important Notes
If your size charts do not appear or behave as intended, ensure that the Kiwi Sizing app snippet is correctly added to your theme and product templates. Verify that the size chart is assigned to both the target product(s) and the template within the Kiwi app's settings. Misconfigured setup or selectors can frequently lead to missing or improperly placed charts.
If your product page uses a different variant style (buttons vs. dropdown), the selector may need a small tweak
The CSS is required for inline placement - without it, the link may appear below the label- Ensure that the snippet or block for the Kiwi Sizing app is included in your theme for proper rendering.
Confirm that all size charts are assigned correctly to products and templates within the Kiwi app settings.
Review the placement selector, as an incorrect or invisible target element may prevent the chart from displaying.
Additional Resources
Take a look at these articles if you want to move the size chart modal to a different position or better understand how selector-based placement works:
Additionally, maintaining label and configuration consistency when naming product options like "Size" ensures continued correct placement of size charts. Update selectors and label configurations as needed to reflect changes in your templates.
If It Still Doesn’t Show Where You Want
If the size charts still don’t perform correctly, confirm that you’ve addressed common root causes like selector targeting and theme or chart assignments as outlined under "Important Notes."
No problem - every store theme is a little different.
If the size chart:
appears under the “Size” label
pushes onto a new line
doesn’t appear at all
…just send us your product page URL.
We’ll check your theme’s code and provide the exact selector you need - no guessing. We’re always happy to help!