All Collections
Glow Settings & Configuration
How can I add the total points earned to my product page?
How can I add the total points earned to my product page?

Add a custom bar to your product pages to display the points a customer can earn by making the purchase

Brandon Swift avatar
Written by Brandon Swift
Updated over a week ago

If you want to show customers how many points they'll earn by purchasing a product, you can add a bit of code to your product.liquid or product-template.liquid file. 

Here is the basic code: 

<div style="color:#fff; font-weight:bold; padding:10px; background:#9c72c7; border-radius:10px;margin-bottom:20px;">
                 
{% if product.price_varies %}
                 
★ Earn between {{ product.price_min | money_without_currency | times:[points_per_dollar] | round: 0 }} - {{ product.price_max | money_without_currency | times:[points_per_dollar] | round: 0 }} points with this purchase!

{% else %}

★ Earn {{ product.price | money_without_currency | times:[points_per_dollar] | round: 0 }} points with this purchase!
{% endif %}</div>

Note: Make sure to replace [points_per_dollar] with the number of points they earn per dollar/euro/etc. when making a purchase.

Here is how it would look if your customers earn 20 points per dollar spent.

<div style="color:#fff; font-weight:bold; padding:10px; background:#9c72c7; border-radius:10px;margin-bottom:20px;">
                 
{% if product.price_varies %}
                 
★ Earn between {{ product.price_min | money_without_currency | times:20 | round: 0 }} - {{ product.price_max | money_without_currency | times:20 | round: 0 }} points with this purchase!

{% else %}

★ Earn {{ product.price | money_without_currency | times:20 | round: 0 }} points with this purchase!
{% endif %}</div>


To add it to your theme, you'll want to go to Online Store > Themes in Shopify

  • Click Actions > Edit Code

  • Then you'll want to find a file called Sections > product-template.liquid

Keep in mind there are some variations depending on your theme. Your exact file name might be slightly different. 

If your theme offers it, you may want to use Snippets > product-form.liquid. This is the part of the page with the actual add to cart buttons so that you can display the points right next to the buttons. 

  • Once you have opened up the theme file, try searching for the 'add to cart' section. Paste the code above the button, if you want the points to show above it. 

You can also paste the code below the button if you want it to show underneath. 

  • Every theme is slightly different, but this should get you most of the way there. The end result will look something like this:

Related Articles:

Please let us know if you have any questions. 

Sincerely,
The Glow Team 

Did this answer your question?