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 Advanced plan is required for this feature.
Requirements
This feature is currently available only to Shopify Plus, Bigcommerce, and Magento 2 users.
A variable amount discount needs to be configured for the slider to properly work.
Shopify Plus users
The points redemption slider at checkout is only available for Shopify Plus users due to limitations in customizing the checkout page.
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
The points slider is a checkout block, no code needed.
Follow Point Redemption Widgets at Checkout and add the Variable points block.
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 redemption slider at checkout in Magento 2
To add the point redemption slider on Magento 2 checkout page, follow these 2 steps:
Grab the code for the slider from here
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.