Kiwi offers flexibility in setting up injections or placing the chart via snippets. One of these flexibilities is using raw CSS selectors to determine where the Kiwi Sizing Chart will be injected on your Shopify product pages.
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, it's not necessary to set up the injection of the Kiwi Sizing Chart.
How Can I Use It?
Using raw CSS selectors is simpler than it may seem. You need to follow these steps:
Go to the product page.
Copy the selector from the browser console.
Paste the copied selector into the raw CSS selector label inside the Kiwi display settings.
Here are the detailed steps:
Navigate to one of your product pages and find the location where you want to inject the Kiwi chart sizing link, sizing button, or inline table. For simplicity, this article will explain selector injection around the “Add to Cart” (ATC) 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. Note that this might look different in browsers such as Mozilla 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 demonstration, the full CSS selector looks like this:
#product-form-template--15975857586346__main > div > button
Typically, these paths are relatively longer because live stores have more parent and child elements. Don’t 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:
The Kiwi container is now placed before the ATC button with this setting. Let’s try the same selector, but this time we will place it after the ATC button.
Change the position to inject after in Kiwi settings.
The result is visible after refresh:
You can use the same method if you wish to inject the recommender button/link in a different position. The recommender by default follows the chart.
To inject the recommender after the ATC button while keeping the sizing button before it, simply copy the selector from the sizing injection that you already set. Then go to Styles and Settings > Recommender > Display.
In this section, use the raw CSS selector as well, but place the injection after the ATC button:
The result:
Should you require assistance, don’t hesitate to reach out to our support team!