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?
The Point Calculator is your secret weapon for turning every purchase into an exciting rewards journey. It's like a digital scoreboard that shows customers exactly how many points they'll earn, transforming shopping from a transaction into a rewarding experience.
In today’s competitive e-commerce market, driving repeat purchases and customer loyalty is essential. The Point Calculator feature in our Joy Loyalty App does more than just track rewards—it motivates customers to make purchases by showing how many points they can earn with each order. This encourages immediate buying and helps build long-term loyalty, making it a crucial tool for boosting repeat sales and engagement.
Open Point calculator setting
On the left menu of Joy, go to Branding > Point calculator > Setup.
There are three sections: Choose positions, Point calculator settings, 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.
Set the position of the Point calculator in the theme settings
Click on "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.
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.
First of all, you will need to enable the Point Calculator App embeds to make sure that the SDK is running on every page of your store, unlike the App block, which runs on the product page and cart page only.
With the cart drawer, we cannot directly use the Asset API to edit your theme code, so if you want to implement it, you have to do it manually via the theme code editor. If you are not sure of how to do it, feel free to reach out to our support team.
You can go to your theme code editor, find the snippets/cart-drawer.liquid or snippets/mini-cart.liquid , the name depends on your theme code structure. Then, place this snippet in your cart drawer: <div class="joy-points-calculator__block"></div>
You should be seeing the point calculator for the order showing in the cart drawer. This calculator will reflect on the change of the cart quantity and items.
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.
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!
