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:
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:
Optional: to make the upsell show in the best position on mobile and desktop, add this snippet just above the main script you added in step 2
Note, to make this work, we also need to enable this setting in our backend. Reach out to us in the chat to ask to enable that.
This will move the upsell outside the order summary on mobile, so shoppers see it. The order summary is collapsed on mobile by default. Once done, reach out to us in the chat, so we can toggle the optimized position setting on our end for your store.
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 %}Optional: to make the upsell show in the best position on mobile and desktop, add this snippet just above the main script you added in step 2
{{ breadcrumb }}\n<div id="upsellplus"></div>Note, to make this work, we also need to enable this setting in our backend. Reach out to us in the chat to ask to enable that.
This will move the upsell outside the order summary on mobile, so shoppers see it. The order summary is collapsed on mobile by default. Once done, reach out to us in the chat, so we can toggle the optimized position setting on our end for your store.
Updated on: 20/05/2024
Thank you!