Shopify - Yook Tech Guide
Get started with Yook and follow this step-by-step guide covering everything from installation and testing to going live. All configuration steps of the Shopify app will take about 15-30 minutes.
Yook in Shopify App Store
To install Yook, you can simply visit the Shopify App Store: https://apps.shopify.com/yook.
The installation is done in four steps:
To allow your customers to contribute, the application must create a product in your catalog. We try not to make this product visible in your store.
To solve this problem, you can visit : Remove climate contribution from products
2- Installation in your theme
Depending on the type of your theme (OS2.0 or older), you will be guided by our installer to add Yook to your Customer Journey.
3- Configuration of Yook
You can now connect the app to the Yook API and select your individual climate contribution option.
Enter API keys
Under 'Yook Environments' you can enter both API keys for the LIVE and TEST environment. As long as you are in test mode, please select TEST in the 'Current environment' dropdown and click 'Save'. Once you decide to go live, select 'LIVE' and save your changes.
If you didn't receive the API keys yet, please contact us at [email protected].
Select climate contribution option
We offer three options for the climate contribution, which you can select for your shop in the field Offset option.
Option 1 | Option 2 | Option 3 |
Merchant only | Shopper only | Merchant and Shopper |
The merchant pays a climate contribution with every order on a fixed price basis. | The shopper can choose to pay a climate contribution for their order. | The merchant pays a climate contribution with every order, and the shopper can choose to pay a climate contribution for their order. |
Pick climate contribution calculation method
For calculating the climate contribution amount that your shoppers have to pay for their order, you can pick one of these two methods:
Fixed price (gross)
Independently of what the customer purchases, the value of the climate contribution will always remain the same. The expected price should include the VAT.
Set the climate contribution type to "FIXED" and the value of the climate contribution in the "Customer Offset Amount" field.
Percentage based
The percentage will be used to calculate the value of the climate contribution based on the total value of the basket.
Set the climate contribution type to "PERCENTAGE" and the percentage value in the "Customer Offset Amount" field.
Our recommendation:
Start with the fixed price option and set the climate contribution to 1 € or less. When there is not a big difference between your customers' shopping cart values, you can also choose a percentage of 1% of the shopping cart.
In principle, customers are more likely to opt for a climate contribution if the online shop also contributes with an own amount.
Please make sure you save all your changes.
4- Activation of Yook
This last step allows you to make Yook visible (or hide it) to your users.
Awesome! You have now successfully installed the Yook app and connected it to the Yook backend!
Theme integration details
To integrate Yook into your store theme, you need to integrate the Yook widget into your shopping cart page. You have two options to do this:
A: OS 2.0 theme
B: Use the Yook Wizard
C: Manually integrate a code snippet into your theme (Liquid template)
If you are using a normal shopping cart page, you probably only need to follow the instructions under B. If you use a "drawer" for your shopping cart, follow the instructions under C.
A - OS 2.0 Theme
The new Shopify OS 2.0 themes make integrating external application blocks very easy.
Follow our instructions :
B - Wizard for theme integration
For themes prior to OS2.0, you can use our wysiwyg (What You See Is What You Get) wizard, which allows you to select the location of our widget and then see how it will look. Just click on "Install" to do so:
Follow the instruction at the bottom of the newly opened tab (basket preview)
Select the area where you want to integrate the Yook widget.
You will now see a preview of the Yook widget. Validate (or cancel) your choice via the green (or red) circle on the top right of the widget.
Lastly, save your changes and ...
Voilà! The Yook widget is now fully active in your selected theme!
C - Manual theme integration
If you don't use the standard basket, you can use our custom integration.
This integration requires manipulation of the code of your theme. If you don't feel comfortable with it or need assistance, contact us at [email protected].
You first need to follow the same first steps as for B- Wizard for theme integration:
Just click on "Install" to do so:
Follow the instruction at the bottom of the newly opened tab (basket preview)
At this stage, simply close the Wizard by clicking the cross on the bottom right.
You then need to edit your theme and figure out where you want to add your snippet. Once you figured out which file of your theme to edit, add the following code snippet to wherever you would like to see the widget appearing.
You can extend the CSS class of the future widget by writing the following:
Remove climate contribution from products
The Yook app for Shopify uses regular products to manage the climate contributions. Those products (and their variants) are created when you install the Yook app for the first time. This can lead to the Yook climate contributions appearing in your product listings.
An easy fix is to remove all Yook products from your Shopify product catalogue (called 'Collections'). First, go to 'Products' and there click on 'Collections'.
Then choose the collection you want to modify and under 'Conditions' add a rule to exclude Yook products like so: 'Product vendor' is not equal to 'Yook'. Then save your changes.
Disable discounts on climate contributions
We recommend to disable discounts on the Yook climate contributions. For that, you can either use the previously created collection (that already excludes Yook products) or create a specific one.
Customize the communication
If you decide (after an exchange with our support team [email protected]) to customize the communication within the Yook widget, you can make those changes via the 'Translation' tab.
First, choose the language(s) for which you wish to make the changes.
Then select which text snippets you wish to change.
You can then edit the text and also use HTML tags for additional styling. You can use the {offset} placeholder to display the amount of the climate contribution in the local currency.
Save your changes and repeat the process until you're happy with the result.
Congratulations! You completed the full setup of the Yook app in your Shopify shop and have now climate action at your fingertips 🎉
Last updated
