Skip to main content

How to add inline points to your product pages

Show customers how many points they will earn when they buy a product.

Written by Aleksandra Velkova

Overview

The inline points feature allows you to tell your customers how many points they can earn by purchasing each specific product in your store.

It is a great way to engage your customers and to make sure they interact with your program each time they browse your product catalogue.

Follow this guide to learn how to add the inline points feature and what you need to know about how it works.


Add inline points to your product pages

  • Navigate to Display -> Inline points from the main menu in Lootly;

  • There are 2 options you can choose from: product points and customer point balance.

The product points feature is a line of text that tells people on your website how many points they can earn if they buy the specific product.

The customer point balance feature allows you to display the total available point balance of a customer. This is usually added in the My account section of your e-store.

  • Click Edit on Product Points. You’ll notice an option to choose your platform in the Product Points Code section. Choose your platform and copy the provided line of code.

  • Once you have the inline points code, you need to go to your product pages template and add the code in that template’s html. Make sure you customize the {price} value to match what you already have in your template.

  • You can customize the text in the above box and you can also style it. Please note that this requires HTML knowledge and proficiency.

Some points to consider about the inline points feature:

  • The inline points feature won't show to website visitors, only to logged - in customers who participate in your loyalty program.

  • The points shown are dynamic. They take into account your base earning rate, the customer's VIP tier multiplier, any customer restrictions, and any bonus point campaign that is currently running.


What the values in the code mean

The code contains three values:

  • data-product-price — the price of the product being viewed. This is required.

  • data-product-id — the product's ID in your store.

  • data-categories-ids — a comma separated list of the IDs of the categories or collections the product belongs to.


Platform limitations to consider

BigCommerce — category IDs are not readily available in the product page template, so campaigns limited to specific categories will not be reflected in the points shown. The base rate and VIP multiplier still are.


Neto by Maropost — categories are not available, so use campaigns limited by SKU rather than by category if you want the points shown to be accurate.


Add customer point balance to My account area

  • In the same way, simply copy the provided code from Lootly and paste it in the html of your My account page to display the customer's total point balance.

  • You don’t need to choose a platform for this code, as this will be the same for all platforms.


You're all set!

Did this answer your question?