In this tutorial, we'll walk you through the step-by-step process of displaying a Product Slider on the checkout page using the SupaElements application by Nextools.

Let's see how to configure it! 

Click on "create element" or the "create" button in the highlighted part.

A pop-up window will appear. From there, select “Dynamic Element” and choose “Product Slider”, click on “Use Resources” within the Product Slider option to proceed.  Also, you can see the preview of the slider of how it will look on the checkout page.

Start Creating the Element Configuration

Now we'll begin setting up the element configuration for the product slider. Once you enter the configuration page, it looks like this.

Add a Title: The first step is to enter a title for the rule. This title is for internal reference only and does not impact your live store directly. However, choosing an appropriate title is important, as it will also be used later in the App Block. I will explain again later in the article where and how to use the title.

Set Element Activation Rules

After naming your SupaElements rule, you'll configure the Element Activation Rules.
You can choose between AND and OR logic based on your requirements.
Each rule can contain up to five conditions, and you can also create sub-conditions for more detailed targeting.

We've included multiple options to give merchants greater flexibility in how they present the add-on banner at checkout. 

Use AND logic when you want multiple conditions to be true at the same time.
For example, if the cart total is greater than 0 and the total cart quantity is greater than 5, then the product offer will be shown to the customer. Otherwise, it will not be displayed. 

Use OR logic when you want any one of the conditions to be true.
In this case, the same conditions apply to cart total greater than 0, or cart quantity greater than 5, but they are evaluated independently. The rule will fire if either of the conditions is met.

Each rule can contain up to five conditions, and you can also create sub-conditions for more detailed targeting.

We've included multiple options to give merchants greater flexibility in how they present the product slider at checkout and to choose the condition. Simply click on the drop-down and choose as per your need.

For this tutorial, we'll use the condition: Cart total greater than 1000. And a single condition.

Configure Static Products Content

Next, we'll set up the most important part of this customisation, Static Products Content. Here, you'll provide the static content that displays as part of the element. 

You can fully customise the Heading and CTA (Call-to-Action) label to fit your offer. There's no fixed format for this, but we recommend keeping the CTA short and clear to ensure it's easy for customers to understand and act on. Like in this example, we have used the Heading "ONLY NOW" and for the CTA Label "SALE". Moreover, you can translate the heading and CTA label into any language, depending on which language you want to display to your customers.

Then, you can set the layout to either horizontal or vertical, depending on your preference.

Select the Upsell Product

Now, it's time to choose the upsell product you want to offer as an exclusive deal.
In this example, we'll use a specific product or variant, but you can also select from other options like collections, tags, related products, or complementary products, depending on your needs.

To select the product, click on “Choose Targets” to pick the product you want to display at the top of the checkout page as a product offer.

Configure Sorting and Display Options

Once you've selected your product, you can organise how it appears using various sort options such as Created Date, Price, or Title.

You can also choose the direction, ascending or descending.

Additionally, you can define how variants are shown, including options like Most Expensive, Cheapest, or All Variants.

You can also configure a quantity selector or variant selector. Based on your use case, simply tick the relevant options to customise the rule as needed.

Set the start and end dates, along with the time, to control when the offer appears. This is perfect for managing seasonal promotions, holiday campaigns, or limited-time flash sales.

Finally, review the summary, activate the rule, and save it. Your upsell offer will now be live at the checkout using the SupaElement application by Nextools.

After saving and activating the rule, the final step is to choose where to display your offer. To do this, go to your store's checkout page customisation section and add the SupaElements app block (if it's not already added). 

Then, 

Then, go to the corresponding page to continue the setup. In our case, we placed the element at the top of the checkout page. However, you can drag and drop the element to position it anywhere you'd like the product offered to appear.

Next, open the element, and add the name of the elements you have created in the “Element Name” field.

You have three options on how you can get the correct name:
- Copy it from the configuration page,
- Copy it from the dashboard
- Manually type the name.

OR from Dashboard

Enter the title of the newly created element, which exactly matches the name used in the configuration, then save the page.

After entering all the information in the above step, you will see the final result displayed on your checkout page, like this.

With SupaElements, you can create custom cart and checkout offers in just a few clicks, boosting upsells and making the shopping experience smoother for your customers.

Want to know how to get SupaElements for free or discount? Check out our FAQ!

If you need further assistance, feel free to contact us via support email or connect with us directly through HelpCrunch.