Question 1

How to enable Shopify Plus checkout.liquid customizations

Accepted Answer

Requirements If you want to customize your checkout, you’ll need two things:

Be on a Shopify Plus plan
Enable access to your checkout.liquid theme file

‍The second step is an important one. Without enabling access to checkout.liquid, you can't customize it.

||| The app will show an error when you try to choose a position for the checkout upsells, as your theme file isn't accessible.

‍To check if you have access, go to your Online Store > Themes > Actions > Edit code > Layout > confirm you can see the checkout.liquid file. ‍ checkout.liquid in your theme files

If you don’t see the checkout.liquid file, click ‘Add a new layout’ > select ‘Checkout’ and give it a name > Create layout.

If you click ‘Add a new layout’ and don't see an option to add 'Checkout', this means you don't have access yet.

‍Requesting access

| Reach out to your Shopify Account Manager or Shopify support (support@shopify.com). Send them a quick email that says: ‘I want the checkout customizations enabled.’

Shopify usually does this within 36h.

‍Once the customization is enabled, you can go to the Settings tab in the app and choose 'Checkout.liquid offer position'. Choose a position and click 'Save'. Now the upsell will appear in your checkout.

Go ahead and check it in incognito mode to see the result!

Question 2

Getting started guide

Accepted Answer

Let's get started with UpsellPlus!

Open the app and create your first offer

You can create upsells on the cart page, checkout page and post-purchase page.

| If you're on a Shopify Plus plan you will have access to cart, checkout and post-purchase upsells. Shopify only allows Plus merchants to modify their checkout. | If you're on a Shopify Basic, Standard or Professional Plan, you will have access to cart and post-purchase upsells.

Choose where you want to create your upsell.

Configure your upsell

Cart: How to get started: cart upsells

Checkout: How to get started: checkout upsells

Post-Purchase: How to get started: post-purchase upsells

Check your live website to see if everything works as desired

Go to your cart, checkout or post-purchase page to verify if everything works as you want it to.

If there are any issues during this step, check out our documentation about common issues:

My upsell isn’t showing in my checkout, how do I get it to show? [What to do when your Post-Purchase offer isn't showing](/en/article/what-to-do-when-your-post-purchase-offer-isnt-showing-nn0qe

Question 3

Intro to discounts

Accepted Answer

To add a discount to upsells, you need to add a script to the Shopify Script Editor app. This app is free and can be installed here.

We've built these templates you can use by copying and pasting them into the Script Editor:

More helpful resources:

Using the offer ID to target a specific upsell offer with a discount
How to customize discount codes
[Remove discounts to an upsell product when the conditions for getting the upsell are no longer met](https://help.upsellplus.com/en/article/how-to-remove-upsell-products-from-cart-when-the-conditions

Question 4

My upsell isn’t showing in my checkout, how do I get it to show?

Accepted Answer

There are three main reasons that usually cause this. Let’s have a look at each of them.

1) The code for the upsell widget isn’t in your checkout yet

Q: How to enable Shopify Plus checkout.liquid customizations

Requirements If you want to customize your checkout, you’ll need two things: <ol> <li>Be on a Shopify Plus plan</li> <li>Enable access to your checkout.liquid theme file</li> </ol> The second step is an important one. Without enabling access to checkout.liquid, you can't customize it. ||| The app will show an error when you try to choose a position for the checkout upsells, as your theme file isn't accessible. To check if you have access, go to your Online Store &gt; Themes &gt; Actions &gt; Edit code &gt; Layout &gt; confirm you can see the checkout.liquid file. <img src="https://storage.crisp.chat/users/helpdesk/website/abfa0cd47f75e80/checkoutliquid_d51yau.png" alt="checkout.liquid in your theme files" /> If you don’t see the checkout.liquid file, click ‘Add a new layout’ &gt; select ‘Checkout’ and give it a name &gt; Create layout. If you click ‘Add a new layout’ and don't see an option to add 'Checkout', this means you don't have access yet. Requesting access | Reach out to your Shopify Account Manager or Shopify support (support@shopify.com). Send them a quick email that says: ‘I want the checkout customizations enabled.’ Shopify usually does this within 36h. Once the customization is enabled, you can go to the Settings tab in the app and choose 'Checkout.liquid offer position'. Choose a position and click 'Save'. Now the upsell will appear in your checkout. Go ahead and check it in incognito mode to see the result!

| Solution: re-select the position for the upsell offer in your checkout

Go to the UpsellPlus app > Settings tab > Checkout.liquid offer position > Select a position > Save.

This will check for the code in checkout and add it if it can’t be found. If you get an error from the app that means your checkout isn’t accessible yet.

To fix this, email support@shopify.com and ask: ‘Can you enable checkout customizations for my store’. Shopify usually does this within 36h. Once Shopify confirms, you can go back to the offer position setting and click ‘Save’ again. That should do it.

2) Your browser stored your old checkout in cache

| Solution: visit your store in an incognito window.

Add something to cart and navigate to the checkout page. Do you see the upsell now?

3) A smart rule is preventing from showing the offer

| Solution: remove all smart rules to verify the offer can show in your checkout.

Go to the upsell you just created > scroll down to smart rules > remove the smart rules by clicking the red trashcan > Save the offer

Question 5

How to get started: cart upsells > cart drawer

Accepted Answer

||| Note: this is a technical document that will require some understanding of Shopify theme code. If you don't understand it or are unsure, please reach out to your developer or us to set this up.

Click 'Create offer', choose Cart Page. Select 'Cart Drawer Upsell'

Configure the details for your cart drawer upsell. Click 'Save & publish'

| To add cart drawer upsells, we need to find the theme file that controls the cart drawer. Then we'll add some code to it and a 'listener' to know when to update the cart drawer once an upsell product is added. Follow the five steps below to do this.

Download your theme code structure

Download your current theme in your Shopify Admin > Online Store > Live theme > … > ‘Download theme file’

Identify your cart drawer theme file

Go to your live website. Right click > Inspect. This will pull up the developer tools. While this is open, open up your cart drawer. Hover over the screen to find an html id or class that controls the cart drawer.

Once you found the html id or class that all elements in the cart drawer seem to have, search for that id/class in the theme file you just downloaded. The theme file will have folders, you can just go to the main folder and search for the id/class there.

Example here:

Question 6

How do I apply a discount to a checkout upsell?‍

Accepted Answer

To achieve this, we'll add a Shopify Script in 3 steps. No need for an engineer!

| Step 1: Go to the official Shopify Script Editor App (https://apps.shopify.com/script-editor)‍ Click ‘Create Script’ > Choose the type of script you’re adding. For this example we'll choose between a percentage (%) off a product or amount ($) off a product discount. Select one and click ‘Create Script’. Name your Script.‍

| Step 2: Add the script Now we’ll add a small code snippet.

For a % off discount (10% in this example):

Input.cart.line_items.each do |line_item|
if line_item.properties.has_key?("__upsell_id") and line_item.properties["__upsell_id"].include? "e766cbff-060d-4ed7-9797-ccb9d2bdcf1a"
line_item.change_line_price(line_item.line_price * 0.90, message: "Upsell Discount")
end
end
Output.cart = Input.cart

For a $ amount off discount ($5 in this example):

Input.cart.line_items.each do |line_item|
if line_item.properties.has_key?("__upsell_id") and line_item.properties["__upsell_id"].include? "e766cbff-060d-4ed7-9797-ccb9d2bdcf1a"
line_item.change_line_price(line_item.line_price - Money.derived_from_presentment(customer_cents: 500), message: "Upsell Discount")
end
end
Output.cart = Input.cart

If you’re not familiar with code, this will do the following: ‍

IF the item added to the cart has “upsell_id” as a property THEN apply a discount and display the message ‘Upsell Discount’‍ for the discount code when this product is added to cart

The “upsell_id” is ad

Featured & Frequently Read Articles

Browse All Categories