How to manually install the checkout widget to the checkout.liquid theme file

UpsellPlus will automatically add the code to render the checkout widget to your checkout.liquid file upon selecting an offer position during setup. If you want to do this manually, follow the three steps below.

Enable your checkout customization

To enable UpsellPlus Checkout Upsells for your Shopify Plus store, you must have the checkout.liquid template file unlocked in your theme.
More about that here: https://help.upsellplus.com/en/article/how-to-enable-shopify-plus-checkoutliquid-customizations-r7goxl/

Add the code snippet to checkout.liquid
‍
The snippet to render the widget:‍
‍

{% comment %} UpsellPlus 1 of 2 {% endcomment %}            
<div id="upsellplus"></div>
{% comment %} END UpsellPlus 1 of 2 {% endcomment %}

Add the snippet between breadcrumb and alternative_payment_methods for typical, unmodified checkout.liquid template files.


‍
The widget will appear here:



‍‍
Add the magic UpsellPlus code to connect the widget to the app
‍
To enable the checkout magic, 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 %}

Updated on: 24/01/2023