Creating Upsell components

In this guide you will learn how to create and add an Upsell Component to your Shopify Plus checkout.

Step 1: Component creation

You can make many types of Upsell components with Checkout Components. In this guide, we will be focussing on manual and automatic upsells.

To create an Checkout Upsell component, you will need to navigate to the components list and click on the button on the top right that says "Create component".

You will be taken to the below screen which allows you to choose the type of component that you wish to create. Checkout Upsell and Post Checkout Upsell components are identical in setup and configuration. Click on the Checkout Upsell component you wish create. In this guide, we'll be using the Checkout Upsell component.

Once you click on either Checkout Upsell or Post Checkout Upsell you will be taken to the below form. The form has multiple inputs, and depending on your subscription you will be able to do different things. In this tutorial we will be making a manual Checkout Upsell. Which means that the products that appear on checkout will be products that you select.

Let's learn more about the different fields that you see on this form:

Component name

Component name is purely for internal use and customers do not see this in checkout. It exists for you as a merchant or developer to give the component a simple name that is displayed on the component list page for to be able to identify which component is which on that list quickly, and it is used as a reference in checkout settings for other component types, such as Content Components and Input Components.

Component title

Customers see this title above the rendered products in checkout. You can set this to "You may also like", leave it blank or whatever you like!

Component subtitle

Customers see this subtitle below the title. This is generally used for any additional information that people should know about the products that have been added as an upsell in checkout. For example, it could be "Clearance items that must go!". You can also leave this blank if you choose to.

Button text

Button text is the actual text that renders on the add to cart buttons on the upsells. This defaults to "Add" but you can set this to whatever value you like, such as "buy now", "claim" or anything else you can imagine.

Product selection

Product selections can be either manual, automatic or integration powered. If you are on the Pro plan and have setup an integration that supports product recommendations - you'll see it here as an option. As this guide is focussing on manual Checkout Upsell components, we'll select the products that should render. To do so, click on the "Add products" button highlighted in the below image.

Step 2: Product Selection

Clicking on the "Add products" button will open a modal that contains your entire product catalogue in Shopify. Search and select as many products as you wish to be apart of the Checkout Upsell component, and click the "Add" button on the bottom right of the modal to confirm.

Note: it is generally recommended that you do not add more than 5 products to the component, as more than 5 products makes a large list in the checkout.

Step 2: Save & Publish

One you've selected your products the form should like similar to the below image. The next step is to save the component, in either a published or draft state.

Published state: This means that the component will be "active" and you can use it in the Shopify checkout editor.

Draft state: This means that the component will be "draft" state. Draft state is when the component is saved for later and can be referenced in the Shopify admin app, but it wont be discoverable or useable in the Shopify Checkout editor.

We want to use this Checkout Upsell component straight away, so we will click on the "Save & Publish" button highlighted in the below screenshot.

Step 3: Shopify Checkout Editor

Now you component has been created, the last step is adding it to your checkout. To do so, click on the "Add to checkout" button highlighted in the below image.

Clicking on the "Add to checkout" button will open up the Shopify checkout editor in a new tab. To add you component click on the "Add app block" on the bottom left of the screen, which is highlighted in the below image.

Here you will see all the possible App Blocks that can be added to your checkout, a number of them being from Checkout Components. This tutorial is focussing on the Checkout Upsell component and if you're following on, your new component that you just created can be added to checkout by clicking on the Upsell Component App Block, which is highlighted in the below screenshot.

Once you click on the Upsell Component App Block, it will immediately render at the top of the checkout page you are currently viewing. You can also move where this App Block renders in your checkout by click and dragging the small icon to the right of the Block name.

Tutorial Complete

That's it! You have successfully created a Checkout Upsell Component using Checkout Components. We this guide was useful for you and if you have any issues using our app or with this tutorial, please reach out to use via live chat on our Shopify app, or email us at support@appsbyanvil.com