Points slider checkout redemption
Success team avatar
Written by Success team
Updated over a week ago

This article explains how to use our Redeem points at checkout feature and answers to some common questions. To see which plan this feature is available on please visit our plans and pricing page.

In this article:

Point slider

As a Shopify Plus merchant, you can enable points redemption directly in the checkout! Your customers don't need to claim the rewards in the loyalty panel, and then paste them in the checkout anymore.

The checkout redemption dynamically creates a discount code and applies it to the checkout. Thanks to this, your customers can decide the specific discount amount and save time, by redeeming it directly at the checkout. 



Redeem at checkout for mobile

The view for the point slider on mobile is a little bit different, so it may be an idea to add some instruction for your customers on how they can redeem their points.

Customers will need to select "Show order summary" at the checkout screen on mobile to see the slider appear. It will appear as a drop-down menu rather than a slider.

In this short video, you can see how your customers can claim and redeem their rewards on mobile devices:


Adding checkout redemption to your store

1. Make sure you're using Shopify Plus and your checkout.liquidis enabled.

2. Login to your LoyaltyLion account
3. Click on the tab Manage

4. On the left find Rewards and click on Create new reward

4. Find Redeem points at checkout.

5. Configure the minimum and maximum discount that can be redeemed.

  • Cost per $1 - you can find your Cost per $1 in the Point calculator your onboarding manager shared with you. If you do not have access to your Point calculator, please reach out to your onboarding manager.

  • Minimum discount - Here you can decide what will be the lowest discount your customers can claim. You can allow your customers to claim $1 - this way they'll be able to claim smaller discounts more often. You can also set this to the cost of your first reward - this way your customers would need to gather enough points to claim a reward before they claim it. We usually suggest your customers get enough points for the first reward after creating an account in the store and making their first purchase.

  • Maximum discount - you can decide to limit the discount your customers get each time they redeem their points. Please note, that your customers receive points for engaging with your store, referring their friends and making purchases, so you might want to set the Maximum discount to a really high number, so your customers don't have any limits when using the point slider.

6. Once you've created the reward, the slider will be live on your checkout page.


Collection Restriction 

You can optionally restrict the checkout redemption discount to products within a set collection.

Collection ID: You can find the collection ID number at the end of the URL when viewing a collection in your Shopify admin

Explanation: A short sentence to explain the collection restriction to shoppers, e.g. "Points can only be redeemed against health products"


Adding the slider to a new theme

Of course, if you're a Shopify merchant, you're going to be making theme changes. However, this can cause the slider to disappear from the checkout.

If you make any changes to your checkout.liquid file, please make sure that the following code exists before the closing </head> tag in your checkout.liquid file:

{% include "loyaltylion" %}
<script>lion.configure({ checkout: true })</script>

Please also be aware that the LoyaltyLion Checkout Redemption slider requires this section of the page to be present in order to function:


FAQ

Q. Can a customer use other discount codes and redeem their points at the same time?

Not currently. The checkout redemption dynamically creates a discount code and applies it to the checkout. If a customer adds a discount code themselves after redeeming points, we'll refund their points instead. However, a customer can use a gift card at the same time as redeeming their points.

Q. Can a customer pay for their whole order with points?

 Yes! However, please keep in mind that if your customer makes a partial refund of an order that was paid in full with points, they will not receive a partial points refund. The voucher created by points slider is treated as a whole, and it does not allow partial refunds. However, you can manually give points to your customer as a partial refund. Learn how to do it.

If you'd like to know more about refunds, please see our refunds and returns article

Q. What happens if a customer abandons their checkout?

 After one hour, their voucher will be invalidated and the customer's points will be refunded to their account so they can be used again.

Q. Why isn't my Shopify discount section appearing?

The LoyaltyLion Checkout Redemption slider requires this section of the page to be present in order to function.

There are a variety of reasons why Shopify may not render the discount section. We have seen the following cases:

  • Customers have no discount codes available to them (because there are no codes in the store at all, because all codes are restricted from the customer’s group, etc)” 

  • Orders were created with Shopify Draft Orders API

But these may not be exhaustive and it's best to reach out to your Shopify support manager to ascertain the exact reason why that section is not appearing.

If the discount section is present, and the slider is still not rendering, please reach out to LoyaltyLion Support support@loyaltylion.com.

Q: Can the cost per $ redeemed be changed according to tiers?

Currently, the point slider redemption values are applied across all tiers and should be changed in the reward settings.

Q. Can I customise colours of the point slider?

You can customise the button that works with the points slider in the Shopify's Theme settings (Online Store > Theme > Customize > Theme Settings > Checkout)

click image to make it bigger

The colour of the slider itself is hard-coded, however, you might be able to play with colours by adding `mix-blend-mode: difference` to the input element style:

Did this answer your question?