How do I test a checkout upsell on a draft theme?
This feature was sunset. Shopify moved to Checkout Extensibility. Checkout.liquid is no longer around. To learn how to do this on the new checkout, go here: https://help.upsellplus.com/en/article/how-to-enable-checkout-upsells-using-the-checkout-editor-1ga86th/
You can use a copy of your live theme to preview the checkout upsells
1) Create an upsell offer and save it. No need to publish just yet.
2) Copy your live theme by going to Online Store > Themes > Actions > Duplicate
3) Go to your live theme > Actions > Edit code > Navigate to the checkout.liquid file
There, search (CTRL + F) ‘upsellplus’. You’ll find two code snippets you can remove for now to avoid showing the upsells on the live them once you enable them. The code snippets start and end with a comment: 'Upsellplus 1 of 2' and 'UpsellPlus 2 of 2'.
4) Select the new duplicated theme > Actions > Edit code
Go to the checkout.liquid file. Add the code snippet you just removed from the live theme:
Snippet 1: Add the snippet between breadcrumb and alternative_payment_methods
Snippet 2: scroll down until you see </body> and add the code below right above it
Save your theme updates.
5) Enable your upsells in the UpsellPlus app
You’ll see them appear in the preview checkout of your dev theme and they won’t show on your live theme.
To add the upsells to your live store, you can
- Publish the draft theme as your live theme
- Go to the UpsellPlus app > Settings tab > Checkout.liquid offer position > Choose a position. This will add the code automatically to the live theme.
You can use a copy of your live theme to preview the checkout upsells
1) Create an upsell offer and save it. No need to publish just yet.
2) Copy your live theme by going to Online Store > Themes > Actions > Duplicate
3) Go to your live theme > Actions > Edit code > Navigate to the checkout.liquid file
There, search (CTRL + F) ‘upsellplus’. You’ll find two code snippets you can remove for now to avoid showing the upsells on the live them once you enable them. The code snippets start and end with a comment: 'Upsellplus 1 of 2' and 'UpsellPlus 2 of 2'.
4) Select the new duplicated theme > Actions > Edit code
Go to the checkout.liquid file. Add the code snippet you just removed from the live theme:
Snippet 1: Add the snippet between breadcrumb and alternative_payment_methods
{% comment %} UpsellPlus 1 of 2 {% endcomment %}
<div id="upsellplus"></div>
{% comment %} END UpsellPlus 1 of 2 {% endcomment %}Snippet 2: scroll down until you see </body> and add the code below right above it
{% comment %} UpsellPlus 2 of 2 {% endcomment %}
<script src="https://app.upsellplus.com/script/upsellplus_widget.js"></script>
<script id="upsellplus_data">Shopify.customer_tags_upsell = {{ checkout.customer.tags | json }};Shopify.customer_address_upsell = {{ checkout.customer.default_address | json }}</script>
{% comment %}END UpsellPlus 2 of 2 {% endcomment %}Save your theme updates.
5) Enable your upsells in the UpsellPlus app
You’ll see them appear in the preview checkout of your dev theme and they won’t show on your live theme.
To add the upsells to your live store, you can
- Publish the draft theme as your live theme
- Go to the UpsellPlus app > Settings tab > Checkout.liquid offer position > Choose a position. This will add the code automatically to the live theme.
Updated on: 02/04/2025
Thank you!