Points slider at checkout

Points at checkout requires modifying checkout.liquid which is only available to Shopify Plus merchants.

Skip the discount code by letting customers spend points at checkout.

Redeeming 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 page makes spending points super easy and actually kind of fun!

Implementation

Step 1: Navigate to your theme editor

From the Shopify admin, select "Online Store" in the left sidebar. Then go to Actions -> Edit HTML/CSS.

Step 2: Create the snippet

Create a new snippet called "smile-points-slider".

Step 3: Paste our code sample into the snippet

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

This code sample uses jQuery. If your theme does not already use it, you will need to uncomment the jQuery script at the top of the code sample to load it on your checkout page.

Step 4: Add the points product ID to your code

In the Smile Admin, navigate to your points program.

Go to your rewards and select the one that you want to power your points slider. Once you do that, you will see the ID of the points product in your address bar.

Make sure that you use a variable points product to power the slider. You can verify that your reward is variable by looking at its "exchange type" field.

In your new code snippet, update the pointsProductId variable with the ID you just selected. Save the file.

Step 5: Add the snippet to checkout.liquid

In your theme editor, add the following snippet to the bottom of the checkout.liquid file right before the </body> tag.

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

The smile-initializer snippet already exists. It was created when you installed the Smile app.

Step 6: Test it out

Visit your store's checkout page to confirm your changes. If everything is working as expected, you're done! 🎉

Tips for the best customer experience

Certain points products 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 points products. As a result, customers may accidentally spend their points on a points product 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 points products apply to your cart. By doing so, your customers are assured to have a great experience at checkout!