Point calculator
Learn how to add a point calculator to your Shopify store, displaying potential reward points on product pages to encourage customer purchases and boost engagement.
Last updated
Was this helpful?
Learn how to add a point calculator to your Shopify store, displaying potential reward points on product pages to encourage customer purchases and boost engagement.
Last updated
Was this helpful?
In today’s competitive e-commerce world, keeping customers loyal by encouraging repeat purchases is more important than ever. Our Joy Loyalty App does more than just help customers earn and redeem points—it also motivates them to return by showing how many points they can earn with each purchase.
This feature encourages customers to buy now and save on future orders, helping to build long-term loyalty. In this guide, we’ll walk you through setting up the Point Calculator so you can maximize its benefits. Let’s get started!
With this feature implemented, you will see:
When a customer views a product page, a block widget will appear on the product page displaying the number of potential points the customer will receive if they purchase the product.
This number of points is automatically displayed based on the product's price according to the matching earning points that are applied.
On the left menu of Joy, go to Branding > Point calculator > Setup.
You will need to turn on the Point calculator toggle, with this setting on, it will allow you to see the Joy Points Calculator blocks in the Theme Editor.
In the settings of the Point calculator, there are three sections: Choose positions, Point calculator settingsand Advanced settings.
More specifically:
Position of the Point calculator: Choose the location of the Point Calculator on the product information page.
Design Settings of the Point calculator: Customize the appearance of the point calculator:
Font: Choose a text font that matches your brand style.
Size: Adjust the text size for optimal readability.
Icon: Select an icon that complements the design.
Icon Color: Define the color of the icon to align with your theme.
Text Color: Set the text color to ensure clear visibility.
Advanced settings: Customize the point calculator according to your preferences.
To set up the point calculator, customize the design to fit your preferences, then choose the position for the point calculator. We will guide you through with an example shown in the image below.
First, I customize the design of the point calculator with the following settings: Text font: Inherit; Text size: 14; Icon: 🎉; Icon Color: Black #000000; Text Color: Black #000000.
After choosing a design that suits the store, save the design and click "Go to theme" to select the position where the point calculator will appear.
> Go to theme: you will be directed to the Shopify theme settings page.
At this point, select any product > open its product details page. In the image, I have chosen "3 Decorative Glass Vases Set."
On the left sidebar, in the template settings, Add block > Apps > Joy: Point calculator.
After completing the setup, the Point calculator will be displayed as shown in the image below. If you are satisfied with the design and position, click Save. You have successfully added the Point calculator to your store.
Set up Point calculation display on the Cart page
In addition to the default display on the product detail page, the point calculator block can also be shown on the cart page. To enable this feature, activate "Also use on Cart Page" and then go to the theme settings to add the Point Calculator to the cart page. Adding the Point calculator to the cart page is similar to adding this feature to the product detail page.
We have also prepared an animation for you to view and follow. We hope this GIF will be helpful. If you have any issues, please do not hesitate to contact us for support.
Each theme has different ways to identify the variant selector on the product page. Most of the time, they seem to have a similar pattern that we can cover in our code. But in some scenarios, we will require some manual work to fill the product variant selector in the Advanced settings.
For example, some themes may have the selector identifier to be .product-form__input select. Once you fill in the selector, on the change of the variant, our widget will recalculate the points.
Adding a Point calculator to your store is a way to engage customers by showing them the value they can gain from their purchases. By following the steps outlined in this guide, you can easily set up and customize the Point Calculator to match your store's aesthetic and position it where it will be most effective.
Need help? Check out Frequently Asked Questions.👇
This not only enhances the shopping experience but also encourages repeat purchases, helping to build long-term customer loyalty. Start implementing the Point calculator today and see the positive impact it has on your store's performance! If you have any questions, feel free to contact our support team on live chat or email us at Happy supporting!
