How can I add and customize the position of the size chart on my product pages?
Understanding how to add and adjust the size chart placement on your product pages can help provide a clearer shopping experience for your customers. Below, you'll find step-by-step guidance on managing size chart placement and information on when to seek additional support.
How to Add and Position the Size Chart
Displaying the Size Chart Below the Product Description
To display the size chart below your product description, you can use custom CSS or theme-specific adjustments. For example, identify the CSS selector for the size chart placement and inject the size chart block below the product description. Alternatively, edit the product page's template to insert the size chart block directly under the description section. If you encounter difficulties or prefer assistance, you can contact support with the following details:
Your Shopify domain
A screenshot highlighting the desired position
The product link
Information about any third-party swatch or variant apps, such as Swatch King or Rio Options, that you may be using
Alternatively, you can configure placement using app settings like Swatch King or Kiwi. For Swatch King, navigate to the Size Chart Settings and set the alignment to "Inline with label." For Kiwi, use an advanced injector selector to position the size chart link.
Moving the Size Chart Between the Size Selector and Price Section
If you wish to move the size chart to appear below the size buttons (variant selector) and above the price on the product page, this can be achieved by repositioning the size chart block in your product page template. Place the block immediately after the variant/size selector and before the price block to achieve the desired layout. This adjustment involves understanding the structure of your store's product page template, which can include sections and blocks within the theme editor or custom Liquid code updates. For precise control, you can also use custom CSS. For example, target the size option label with a selector like:
.variant-wrapper[data-type="button"]:last-of-type > .variant__label
and inject the size chart block accordingly. This method is ideal for users comfortable with coding.
Next Steps and Support Options
For users who prefer guided assistance or have complex scenarios:
Reach out to support via the Kiwi Sizing help center.
Provide key details such as your shop's setup, the exact position for the size chart, and other influences like third-party apps.
Leverage custom solutions if your theme is incompatible with generic templates or requires specialized adjustments.
Troubleshoot common issues such as ensuring the correct selector matches your theme’s structure and previewing changes to confirm proper placement.
By following these steps or seeking expert help, you can ensure your size chart is strategically placed to enhance the user experience on your product pages. For more advanced tutorials and troubleshooting tips, visit the Kiwi SIzings knowledge base. Advanced users can also explore methods like using custom CSS or app-specific settings (e.g., Swatch King, Kiwi) to achieve precise placement of the size chart.