All Collections
Points Redemption Slider at Checkout
Points Redemption Slider at Checkout

Learn how to add an easy to use point slider to your checkout for fast redemptions.

Ryan avatar
Written by Ryan
Updated over a week ago


Allowing customers to redeem points at checkout is a great way to promote points spending and increase engagement with your reward program. Adding the slider just takes a few minutes.

Note: The Advanced plan is required for this feature.


This feature is currently available only to Shopify Plus, Bigcommerce, Woocommerce and Magento 2 users.

A variable amount discount needs to be configured for the slider to properly work.

Shopify Plus users

Adding a points slider at checkout in Shopify requires editing the checkout.liquid template file, which is a feature currently only available to Shopify Plus merchants.‌

For non-Shopify Plus merchants, this feature is not possible to add.

Bigcommerce users

To add the point slider at feature in Bigcommerce you will need to edit the cart.html template file, since the checkout page is not allowed to be edited.

Scroll down to check how to deploy the point redemption slider on each platform.

Implementation of point slider in Shopify Plus

1. Login to your Shopify Admin

Select Online Store in the left side menu, and then from the Actions button on the right, choose Edit HTML/CSS:

point slider shopify plus

2. Create a new snippet in Shopify

Create a new file under "Snippets" and call it "lootly-points-slider.liquid"

3. Paste our slider script code into the new snippet

Copy the code from here and add it to the new "lootly-points-slider.liquid" snippet from Step 2, then click Save.

4. Add code into checkout.liquid

Next you’ll need to click on Layout from the left editor menu, than open the “checkout.liquid" file.

Search for the following code line “content_for_order_summary” and add the following 2 lines above it.

{% include 'lootly-launcher' %}

{% include 'lootly-points-slider' %}

points slider checkout

You’re all done! 🎉

To see how the slider works on your store, add an item to your cart than select to view the cart / checkout.

You should now see the slider:

Implementation of point slider in Bigcommerce

1. Login to your Bigcommerce Admin

Once logged in, click into Storefront > My Themes > Edit Theme.

2. Find your cart page template

Typically this will be /pages/cart.html

Once inside the file, the next step will be pasting in the code.

3. Add code to Cart Page

Copy the entire code from here and add to the cart page html, above the total line.

You can add the code anywhere on the cart page, but we recommend to add it above total so it’s more clear to customers.

You’re all done! 🎉

Implementation of point slider in Woocommerce

Step 1: Login into your Woocommerce admin

Once logged in, click to open and edit your theme.

Step 2 : Find your cart page template

Once inside the file, copy the entire code from here and paste it in the file.

Step 3: Update 2 code selectors depending on your theme

The 2 code selectors provided here are dependent on your theme. So you need to find them in the script you added on the cart template and update the portion after “ = “, to match your own theme.

The code selectors are:

window.cartSubtotal = '<?php echo WC()->cart->get_cart_contents_total(); ?>'; // Customer's cart subtotal ex: $100.00

window.couponInputSelector = '[name="couponcode"]'; // coupon input field CSS selector

That's it, you're all set! 🎉

Implementation of point redemption slider at checkout in Magento 2

To add the point redemption slider on Magento 2 checkout page, follow these 2 steps:

  1. Grab the code for the slider from here

  2. Inject the points slider code at the end of Magento_Checkout/templates/onepage.phtml file

    • The location depends on the theme being utilized but typically it can be found from: app/design/frontend/PACKAGE/THEME/Magento_Checkout/templates/onepage.phtml

    Once the code is added, the slider will display above the discount code field.

Note: To customize the text and colors associated with the slider you will need basic knowledge of HTML / CSS to edit the script. If you’re not sure, please contact our support team for assistance.

Did this answer your question?