Note: This approach requires you to understand Shopify Liquid layout and basic syntax. If you have any doubts, reach out to the Kiwi Sizing Support Team.
Kiwi can pragmatically accept and render Shopify product properties such as {{product.title}}, {{product.type}}, and {{product.vendor}} in the pop-up modal header text and sub-text to dynamically display these properties in its modal.
However, this is not the case with the button/link text as it only accepts raw text. Some merchants might want to dynamically pass in the product title here, for example, “Jacket Size Chart” or “Click here to view T-shirt Size Chart.” While some product names can be relatively long, for most products, this will work flawlessly.
Before continuing, we warmly suggest you take a look at this article to get an idea about Kiwi snippets as you will need to load one to the theme to get this working.
To begin with this customization:
- Go to Home > Online Store.
- From the Themes section, click more options or three dots(⋮) on the theme you want to edit and click on Edit theme code.
- In the theme code editor, navigate to the main-product.liquid file.
Here, you will need to find the place where you want to deploy the Kiwi code snippet. Note that this customization requires deploying the snippet instead of UI injection because we need to pass a Shopify variable into Kiwi’s snippet property data-link-text, which is not available for editing when using regular injection via the app’s UI.
In this example, we will deploy the Kiwi Sizing button using a snippet right above the Add-To-Cart (ATC) button, but you can place the link instead and anywhere you wish. To keep it simple, we will place it above the ATC button.
In the main-product.liquid file, find the ATC button code. Above it, place the following snippet:
<div id="KiwiSizingChart"></div>
This snippet will load what you set in the Kiwi settings display mode (link, button, or inline-table). The snippet can also use properties to override this setting.
Now, we will place the snippet above the ATC code in main-product.liquid:
For this example, we have set the Kiwi display setting to button modal:
Hence this snippet will render that button on the product page:
Next, we want to pass this product name into button text. There are two things that need to be done here:
- Add data-link-text property to the snippet
- Define the Shopify Liquid variable to pass the product name {{product.title}} to data-link text
Adding property to the snippet:
For now, in the snippet code opening the div tag add just data-link-text=" ". The snippet should look like this:
<div id="KiwiSizingChart" data-link-text=””></div>
Do not save this change yet, as it will override existing text to empty space and you will have something like this:
Define Shopify Liquid variable:
Here we want to define a variable that will take Shopify product property {{product.title}} and store it inside, and then we will be able to render it in our data-link-text property from the Kiwi snippet. There are numerous ways of doing this and appending the text to Kiwi, but in this example, we will keep it as simple as possible.
So to do this, insert the following code right above Kiwi Snippet:
{% assign link_text = "Size chart for " | append: product.title %}
Now you will see this warning that you have assigned the variable but that variable is not used (for now). It will be used once we pass it into the Kiwi snippet.
Here is the breakdown of the syntax used:
- {% - opening Liquid tag
- assign - assigns a variable name, you can name the variable with whatever makes sense to you
- link_text - a variable name that stores the name of the product
- “Size chart for “ - This a text we are passing to Kiwi snippet, you can write anything
- append: product.title - Here we append the product name from Shopify
- | - denote
- %} - closing Liquid tag
The next thing we are going to do is to pass in the previously defined variable link_text to the Kiwi snippet.
We will do this by inserting the {{link_text}} between quotation marks in Kiwi’s snippet property data-link-text=”” so now Kiwi snippet will look like this:
<div id="KiwiSizingChart" data-link-text="{{ link_text }}"></div>
Final result:
While these steps might look complicated in order to provide detailed information about this customization in this article, the code consists of two lines only:
{% assign link_text = "Size chart for " | append: product.title %}
<div id="KiwiSizingChart" data-link-text="{{ link_text }}"></div>
That’s it! We will show a few variations of the code and results:
{% assign link_text = product.title | append: " Size Chart" %}
<div id="KiwiSizingChart" data-link-text="{{ link_text }}"></div>
Here we assign the product name to the link_text variable and append the text “Size Chart.”
Result:
One more example would be:
{% assign link_text = "Click here for " | append: product.title | append: " Size Chart" %}
<div id="KiwiSizingChart" data-link-text="{{ link_text }}"></div>
Here we assign Text + Product Title + Text to the variable link_text.
Result:
Should you need assistance with this, don't hesitate to get in touch with our support team and we will be happy to assist you!