Is your sizing chart disappearing after selecting a new variant when using Swatch King? The combination of Swatch King with Kiwi Size Chart & Recommender can present some challenges. Below, we outline the potential issues and solutions to help set proper expectations.
Potential Issues
Variant Section Overwrite:
The Variant Swatch King app rewrites your theme's default variant section each time the page is reloaded. This results in new classes and IDs being assigned to the page elements, such as changing
legend.form_labelto#swatch-option2.As a result, the layout may change unexpectedly after initial loading.
After Swatch King rewrites the section:
Loading Order Conflicts:
Kiwi is cached in the browser, which means it may load after your page's DOM. This is particularly true if the store uses a sizing script with a defer or async tag.
When the selected injection position is not yet present, Kiwi finds its default placement, usually above the Add to Cart (ATC) button or around the price, leading to potential sizing chart display issues.
Solution
To address this issue, try loading the snippet so that Kiwi's injection won't depend on the loading of Variant Swatch King. This adjustment should resolve the problem. However, keep in mind that each store may have its unique issues and might require further advice from our tech team.
Additional Recommendations
Positioning the Size Chart: We understand you want the size chart to remain visible next to the "Size" variant. However, due to Swatch King's limitations, consider the following:
Swatch King Limitations: The app prevents the Kiwi size chart from being injected into its block. Even if it initially works, the chart will disappear when a variant is changed.
Reloading Issue: When a color variant is selected, the entire container holding the size chart reloads. Since the Kiwi size chart only loads once when the page initially loads, it cannot reload within this container.
To avoid this issue, we recommend positioning the size chart outside of the container that Swatch King reloads, such as below the size variants.