In our previous article on how to change where the size chart shows on the product page using the Sizing Injection Selector, we explained how to utilize classes or IDs of specific elements in your store to position the Kiwi injection selector. This allows you to place your sizing link, sizing button, or inline sizing table on product pages effectively.
Understanding the Default Position of the Kiwi Chart
It's essential to note that some themes require you to set up the Sizing Injection Selector before the Kiwi chart and/or Recommender appear on your pages. The app sometimes struggles to locate its default position, typically around size spans, below the price, or before the add-to-cart button.
What If There Are Multiple Instances of the Same Element?
If you have numerous identical elements in your store without a unique class or ID, you may face challenges.
For instance, you might identify the perfect class, such as .product-variant__labelfor placing the Kiwi chart. However, upon setting the injection, you refresh the page and find the chart positioned around a different instance of that class. This can be quite frustrating.
For reference, this store has three instances of a class called .product-variant__label:
Using Data Selectors to Pinpoint Locations
If your theme has custom data selectors attached to elements and forms, you can use them in the Kiwi app to specify the exact location for your sizing chart.
What Are Data Selectors?
Data selectors are custom data attributes (data-*) in HTML elements that store additional information, which may not fit standard attributes like class or ID. These attributes allow you to attach arbitrary data to HTML elements for various purposes, including JavaScript manipulation or data retrieval from databases.
Let's take a look into this element:
<fieldset class="variant-input-wrap" name="Size" data-index="option2" data-handle="size" id="ProductSelect-template--20758563193157__main-8827488010565-option-1">
<!-- Various content goes here -->
</fieldset>
We already mentioned above that we can have multiple class elements such as variant-input-wrap in this case. But, we can also see now that this element has two data selectors that we can use, and are unique only to it.
data-index=”option2” - this usually represents the order number of the same class looking from top to the bottom of the page. This means that option2 is dedicated to the sizing fieldset, and option1 can be dedicated to the color selector, and also if available option3 to the variant selector. More choices, more selectors, but each element is unique.
data-handle=”size” - indicating some sort of identifier or handle associated with the element, likely related to its purpose or functionality, in this case, the sizing selector fieldset.
You can use either of these data selectors for your raw CSS injection:
It’s important to note that the element must be surrounded with angle brackets [] because it’s the proper way to select it. Without brackets, this injection won’t take effect.
The same can be applied to all other unique elements. Let’s take a look into this example where a customer asked our support team to place an injection beside the "Size" word.
The setting:
Result:
We can see that customers could even use the option-picker-name=”Color” if they wanted to place it at the end of the Color span.
Question: Can I use class as a parent selector and data-* as child selector using the same method?
Answer: Absolutely. In the example above, if you wish to narrow the CSS selector, there is a parent lass product-variant-picker__list with two option-picker-name elements as child elements. The proper Kiwi selector would be in Kiwi, for this case:
Inject at the end of | raw css selector |
.product-variant-picker__list[option-picker-name="Size"]
Feel free to reach out to us if you need assistance!