Simple components are available on our Advanced and Plus plans at LoyaltyLion. For more information on what is available to each plan, see our pricing page.
In this article:
- Installing a simple point component
- Installing the points for product component
- Installing the points for cart component
What are Simple components?
Simple components are an effective way to enhance on-site engagement in a non-intrusive way. They consist of short snippets of code that, when added to your Shopify theme, can display a customer's point balance, how many points would be earned for individual products, the entire cart, or encourage customer referrals.
Including simple components throughout your website will help increase customer's awareness and engagement of your loyalty program, as they will come across references to your loyalty program, multiple times, whilst shopping.
These are best when coupled with easy-to-claim rewards added into your cart or through our (Shopify exclusive) seamless options like in cart rewards or Redeem points at checkout.
Which Simple components are available?
You can find all of our available simple components in our SDK documentation. These are:
Total points
Approved points
Pending points
Spent points
Lifetime points
Examples of our most popular Simple Components
Here is an example of our Customer approved points simple component. We see best results when using this component when it's placed by or near your account icon.
Here are some examples of brands who have used our Points for Product simple component:
Here are some examples of how brands have used the Points For Cart simple component:
There are many more examples of how other brands have used simple components on our Pinterest board.
Installing simple components
To install all simple components, you need a degree of technical knowledge, and it requires coding and accessing your theme or page code. Making changes to certain parts of your theme can have ramifications throughout your site, so please make sure you are comfortable accessing these parts of your site before you follow the next steps.
It is also worth noting that all of the examples listed below are taken from default Shopify themes. If you are on another platform or use a custom Shopify theme, you must find examples that are equivalent to this.
LoyaltyLion gives you the option to add these simple components, but we are not able to help when it comes to installation, styling, or testing these components.
Need help customizing your program? Hire an expert here!
Installing a simple point component
All of our points components can be found in our developer documentation. We have simple components available for:
Approved points
Pending points
Total points
Spent points
Lifetime points
For this example, we will be using approved points, and adding them to our main account page, so that customers can see their points balance in the account.
Go to the area of your site that holds the code for your account page.
For this example, the page code is held in the theme, under sections/main-account.liquid.Go to the developer documentation and get the Approved Points simple component.
Find where you want the points to show on the page, and locate where that is on your theme code.
For this example, the approved points should be added between the 'Log out' and 'Order history'.
So looking at the available code below, I want to add this to line 26.
You'll need to add some accompanying code to make sure the simple component is properly spaced. This will be unique for your site, but the code being used is as follows:
<div>
<div class="loyalty_points_section">
<span>You currently have <span data-lion-points="approved"></span> points available to use.</span>
</div>
The whole component has been given a class so it is easier to target later on if you wanted to apply CSS to it.This will now show on the account page like so:
You can then add further CSS to improve how the block looks. This can be added to the same sheet or elsewhere in your theme code:
Installing the Points for Product simple component
This component is a two-part process, and requires access to both your product page code, as well as your pricing code.
The pricing code is used in the points formula to figure out how many points the product on page should be worth.
The product page code is the one that will be displaying the result of that formula.
If you offer different levels of pricing, such as subscription pricing, you will need to add additional code to this example to make sure that the right amount of points is used in the calculation. Due to this added complexity, it is recommended to use Points for Product when you have a stable pricing variable.
Go to the area of your site that holds the code for your pricing.
For this example, the page code is held in the theme, under snippets/price.liquid.Go to the developer documentation and get the first simple component for the pricing page.
You will want to attach the first code to the variable that will display the price of the page.
In this example, I am going to wrap my price for product component around the {{ money.price }} variable found on line 89:
So that it now looks like:
Go to the area of your site that holds the code for your product pages.
For this example, the page code is held in the theme, under sections/main-product.liquid.I want to add the points for product line underneath the highlight 'Taxes included' text.
In my code, that means adding the simple component to line 136.
Add the second code from the developer documentation to your product page code.
The code will now be added to your page:
This will appear on all product pages:
If you have variants of products with different prices, you'll need to make sure the
data-lion-price-for-product-idelement's value is updated when the variant changes and then call loyaltylion.ui.refresh() in order to show the correct point value for each variant. You can learn more about live updating in our developer documentation.
Installing the points for cart component
This component allows you to show the amount of points a customer would earn based on the subtotal of their cart.
The points shown by this component only includes points awarded for the purchase rule.
It does not factor in collection exclusions, point modifiers, or bonus points.
The total price value should be in cents/pennies, as the component divides the amount by 100 before applying the purchase rule multiplier.
The component is not currency aware.
If you are using a currency that does not have subunits, please multiply the amounts by 100.
It is worth knowing that the total price in the cart on Shopify, is set on the initial load of the page. If you have a custom or ajax cart that automatically updates, you will need to read this additional document on live updating.
Go to your cart page code.
For this example, the cart page code is held in the theme, under a couple of different sections. I want my code to be near the bottom, so I am going to opt for the sections/main-cart-footer.liquid file.Go to the developer documentation for the points for cart simple component.
I want my points text to appear between the 'Estimated total' and the 'Taxes included' section:
Finding this in the theme file, it would be on line 65:
Enter the code as well as some supporting text to complete the sentence. As mentioned in the points simple component, you can also wrap this component in a <div> so you can apply CSS better. In this example, the code opted for was:
<div class="loyalty_points_cart">
<span>You will earn <span data-lion-points-for="{{ cart.total_price }}"></span> points for this order.</span>
</div>
Which looks like:
You can then tidy this up with some CSS:
Frequently asked questions
Q: Will the points for product component show the correct amount of points for my customers' tiers?
Yes, the points for product component shows the relevant number of points depending on the tier of a logged-in customer.
For example: an item in your store costs $10.
Customer A is in tier 1, meaning they earn 5 points per $
Customer B is in tier 2, meaning they earn 10 points per $.
On the page, Customer A will see that they will get 50 points when purchasing the item, whilst Customer B will see that they will receive 100 points.
Q: Will customers who aren't logged in see these components? What about guests?
Yes, both points for product and points for cart components will appear to customers when they're not logged in, and also for guest customers. However, these components will show the number of points that can be earned, based on your lowest tier.
Q: Which ecommerce platforms support Simple components?
Our simple components can be used on all ecommerce platforms we support (Shopify, Magento, BigCommerce)