When setting up the injection of the Kiwi Size Chart & Recommender on your pages, sometimes you might want to use an element that already exists in the theme or a predefined place for the sizing chart. In such cases, the Hijack method of injecting Kiwi can be quite handy.
Essentially, this method allows you to "hijack" an existing clickable element, like a button, and turn it into a Kiwi container that will launch the Kiwi chart.
Note that using this method won't change the design of the element or apply Kiwi icons to it.
How to Use the Hijack Method
1. Browse the page to find the element you want to replace with the Kiwi sizing chart. Remember, this method won’t alter the element's design or apply Kiwi icons.
2. Open your browser's inspector tool (right-click on the page and select Inspect) to find the element's ID, class, or custom element.
For example, let’s say a customer requested to deploy a Kiwi chart from a specific element on their theme. You would open the inspector tool and locate the element ID or class.
3. Choose your Hijack method. There are two possible options to hijack this element:
Using Class: Set the injection to
.kiwi-inject-class.
If the kiwi-inject-class element is a child of multiple classes, as shown below:
elm text-edit gf-elm-left gf_gs-text-paragraph-1 gf-elm-left-md gf-elm-left-sm gf-elm-left-xs gf-elm-left-lg kiwi-inject-class
Using Custom Data Selectors: Instead of the class method, you can use custom data selectors. (Learn more about using data selectors here)
4. Copy the complete selector, such as data-exc="kiwi-inject-class".
5.Paste the selector into the injection selector inside the Kiwi app within angle brackets []. The element must be inserted between the brackets.
Once this is done, the link will open the Kiwi chart instead of the default theme chart.
Important Note
Avoid using this selector on Add-To-Cart/Buy buttons, as it can override the main function of those buttons.
FAQs
Q: Do I need to have the same element across all product pages to use Hijack?
A: Yes, at least on the pages where you have the Kiwi Sizing Chart. The app cannot fall back to a link or button if no specified element is present on the page, causing the size chart not to display.
Q: Will this slow down my store?
A: No, the Kiwi chart loads after all your page elements, so it doesn’t hinder page loading speed.
If you have any further questions or need assistance, feel free to reach out to us!