Kiwi offers a lot of flexibility in setting up the injection or placing the chart via snippet. One of these flexibilities also reflected in using raw CSS selector to set up the injection on the product page.
But, what is a raw CSS selector?
Generally speaking, CSS selectors are patterns used to select the elements you want to style or manipulate. In this context, they are used to determine where the Kiwi Sizing Chart will be injected on your Shopify product pages.
This guide will walk you through how to find and use these CSS selectors effectively.
Does it require development knowledge?
While having basic knowledge about HTML and CSS is beneficial because you know what’s happening “under the hood”, it is not necessary to have this knowledge to set up the injection of Kiwi Sizing Chart.
Great! How can I use it?
It’s quite easier than it looks! Basically, you need to do three things:
- Go to the product page
- Copy the selector from the browser console.
- Paste the copied selector to the raw CSS selector label inside the Kiwi display settings.
Navigate to one of your product pages and find the place you wish to inject the Kiwi chart sizing link, sizing button, or even inline table. To keep this article simple, we will explain selector injection around the ATC (Add-to-Cart) button.
Once you open the product page, right-click on the page, and from the dropdown menu click “Inspect”:
Next, on the far left side of the console, click on the selection arrow. This might be different on browsers such as Mozzila Firefox and Safari:
You will now see that the browser is highlighting certain sections on the page once you hover over them. Now, go to the Add to Cart button.
You can see that the code of the button is highlighted in the console and the tooltip over the button tells you which class or id is currently selected. Now, right-click on the highlighted part in the console and navigate to Copy > Copy Selector:
Now go back to Kiwi and navigate to Styles and Settings > General Settings > Display and paste the selector in raw CSS label:
In this demo case, the full CSS selector looks like this:
#product-form-template--15975857586346__main > div > button
Usually, these paths are relatively longer because live and real stores have more parent and child elements, so do not worry if you see a lot of text here.
Click on the Save button in the top right corner and refresh the product page. Since we used the position “Inject before”, the selector should appear before the ATC button looking from top to bottom.
Result:
We can see now that the Kiwi container is placed before ATC with this setting. Let’s try the same selector, but now we will place it after the ATC button.
So we will change the position to inject after in Kiwi settings:
The result is visible after refresh:
That’s it!
The same can be used if you wish to inject the recommender button/link on some other position separately since the recommender by default follows the chart.
So let’s inject the recommender after the ATC button while keeping the sizing button before it. We can simply copy the selector from the sizing injection that we already set and go to the Styles and Settings > Recommender > Display.
Here we will use the raw CSS selector as well, but we will place the injection after the ATC button:
The result:
Should you require assistance, don’t hesitate to reach out to our support team!