Points Slider at Checkout

Overview

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 Enterprise plan is required for this feature.

Requirements

This feature is currently available only to Shopify Plus, Bigcommerce and Woocommerce 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:

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' %}

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! 🎉

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.