Points slider at checkout

Allowing customers to redeem points at checkout is a great way to promote points spending and boost engagement with your reward program. Adding a points slider to your checkout makes spending points quick, easy, and seamless.

Shopify Plus required

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

This guide requires the Javascript SDK setting in Smile Admin be enabled.

Implementation

1. Navigate to your theme editor in Shopify

Select Online Store in the left sidebar, and then from the Actions button, choose Edit HTML/CSS.‌

2. Create a new snippet in Shopify

‌Create a new snippet in Shopify called smile-points-slider.​

3. Paste our code sample code into the new snippet

Copy the contents of our smile-points-slider.liquid code sample into the new snippet you just created.

The code sample uses jQuery. If your site does not already include or use jQuery, you should uncomment the jQuery script at the top of the sample.‌

4. Find the PointsProduct ID you'd like to use with your slider

Find the ID of the PointsProduct you wish to use with the points slider. You can do this by navigating to the reward in question within Smile Admin, and then looking at the ID specified in the last part of the URL. The ID will always be a number.​

To use a points slider, the PointsProduct that it references must be a variable reward (one that supports rewarding in increments). To learn more about fixed vs. variable rewards, click here.‌

5. Update your snippet to use the correct PointsProduct ID

Update the pointsProductId variable with the ID you found in the previous step and save the file.​

6. Optional - Update your snippet's language

The variables that start with "translate" (i.e. "translateRedeemLabel") are in English by default. Any "translate" variable with the note "Optional translation:" above it can be edited and translated into the language you've set in your language settings.

Each phrase has a description, instructions, and an example above it. Follow the instructions to edit these phrases as needed.

7. Add new snippet to checkout.liquid‌

Add the following snippet at the bottom of checkout.liquid right before the </body> tag. The smile-initializer snippet already exists. It was created when you installed the Smile.io app.

{% include 'smile-initializer' %}
{% include 'smile-points-slider' %}

Can't find checkout.liquid file?

If you cannot find the checkout.liquid file, it's likely because you are not a Shopify Plus merchant. Shopify Plus is required to be able to add a points dropdown to the checkout page.‌

8. You're done! 🎉

Visit your store's checkout page to confirm the dropdown works as expected.​

Tips for the best customer experience

Certain PointsProducts apply discounts to the cart in different ways. For example, gift cards can apply discounts to the total value of the cart whereas coupon codes may only apply discounts to the cart subtotal. There are other factors, including your region and cart setup, that prevent us from providing a single code sample that works flawlessly out of the box for every merchant.‌

Our sample code is meant to get you up and running with giving your customers the option to spend their points at checkout. It allows customers to use as many points as they want to purchase PointsProducts. As a result, customers may accidentally spend their points on a PointsProduct that has a greater value than what can actually be discounted from the cart.‌

You may want to tweak the maximum value of the points slider based on how your PointsProducts apply to your cart. By doing so, your customers are assured to have a great experience at checkout!