Placing a size chart link prominently on your product page helps customers make informed choices. This guide will show you how to position the size chart link above the variants or beside the word "Size" on a product page.
Step 1: Go to Styles and Settings
First, go to "Styles and Settings" and look for "Sizing Injection Selector." The sizing selector tells the Kiwi app where to display the sizing charts.
Take note that the words need to match exactly. So "SIZE" and "Size" are different. Pay attention to how you wrote "Size" on your site.
Step 2: Use the Inspector Tool
You know when you're on a website and right-click and choose "Inspect" to see the code? It's like looking behind the scenes. Find the code that has the size details. This is the "Parent Selector." Then, find the part inside that code where the size stuff is. This is the "Child Selector."
Step 3: Fill in the Blanks
In the sizing injection selector, fill in the boxes:
Parent Selector: Put the first code you found (the CSS class when you hover the arrow icon on the variants).
Child Selector: Put the part inside that code (the code inside the dropdown).
In this case, the parent selector is “size-buttons-title,” and the child selector is “text-muted”
Step 4: Choose Where to Put the Link
You can choose if the link goes before, after, or at the end of the size info. This is up to you. And in the "Compared Value" box, type "Size."
Step 5: Place this code on the CSS code field by going to Styles and Settings > Advanced > Custom CSS.
.ks-chart-container {
display: inline;
margin-(desired position): 10px;
width: auto;
}To right-align the size chart, you can use the text-align property in your custom CSS. For example:
.ks-chart-container {
text-align: right;
}This aligns the size chart trigger or container to the right-hand side of its container.
Just so you know, how you position the size chart is up to you. You can add space on the left with "margin-left: 10px;" or on the right with "margin-right: 10px;". You can also change the gap size, represented by the "10px".
Additionally, for more precise placement within templates, you could pair text-align adjustments with other CSS settings like padding or margins. This provides flexibility in tailoring the integration specifically to your page design.
Once done, click on Save.
For advanced users, the customization doesn't stop here. You can explore template-specific placement adjustments and targeted selectors for specialized layouts. Troubleshooting tips, such as addressing misaligned elements, can also enhance the user experience.
That's it! You're done. When people visit your store, they'll see the size chart link right where they need it—making shopping easier!
Remember, you can always ask us for help if you need help. We're here to make things smooth for you. Happy selling!