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

The Shopify Plus platform is required; adding a points slider at checkout 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.

Implementation

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:

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.