How to add Growave Rewards widgets using placeholders

Growave provides multiple ways to display rewards widgets on your Shopify store. You can use the Onsite Widgets page in Growave admin to place widgets automatically or add them through the Shopify theme customizer.

For more flexibility, you can insert widget placeholders directly into your theme’s code. This allows you to position widgets in custom locations beyond the default setup. Each widget requires a specific class name and may support additional attributes for customization.

This guide outlines the placeholder codes and attributes for each Rewards program widget, helping you integrate them seamlessly into your store.

To insert a Rewards widget, create an empty <div> element with the corresponding class name. Shopify hides empty <div> blocks in embedded mode, so you must add style="display:block" to ensure visibility.

Some Rewards widgets require data attributes to function correctly. These attributes pass essential information, such as customer details or settings. Refer to each widget's details below for the required attributes.

You can add placeholders to your Shopify store in two ways:

This widget displays the customer's points balance as a simple numeric value followed by the word "points". It can be placed anywhere on the page for easy access to the customer's current balance.

For this widget, a <span> element is used instead of a <div> because it is an inline element, meaning it won’t create extra spacing or disrupt the flow of surrounding text. This makes it ideal for displaying the customer's points balance within a sentence or inside other inline content, such as a navigation bar or a button.

The widget will not be displayed if the customer is not logged in or does not qualify for the Rewards program.

This widget displays the potential points a customer will earn when purchasing a specific product. It also includes a link to the Rewards popup, where customers can learn more about the loyalty program.

To activate this widget, enable the Points program and set up the Place order rewardable action.

This widget displays all available ways customers can earn points in the loyalty program. It provides an overview of actions such as placing orders, leaving reviews, subscribing to newsletters, signing up, and celebrating birthdays. Customers can track their progress, and completed actions are visually marked to enhance clarity.

This widget allows customers to redeem their earned points for available rewards directly from the storefront. It displays redemption options such as percentage discounts, fixed-amount discounts, free shipping, free products, and gift cards, along with the points required for each reward. If a customer does not have enough points to redeem a reward, the widget clearly indicates the required balance.

This widget displays all rewards that a customer has redeemed but has not yet used — such as free shipping, free products, discounts, or gift cards. Each reward is shown as a tile, and clicking it opens a popup with the reward’s title, conditions (if any), and either a code or an action button to apply it.

This widget displays the Rewards program information directly on the page instead of as a pop-up. Customers can interact with the widget to earn and redeem points, view available rewards, access referral program details, and check their VIP tier status. Unlike the regular Rewards popup widget, which opens when triggered, this widget remains embedded in the page layout, making loyalty program details continuously visible.

This widget displays frequently asked questions related to your Rewards program. It helps customers understand how to earn and redeem points, the rules for VIP tiers, how the referral program works, and other key details. The FAQ content is managed in the Growave admin and automatically rendered on the storefront when the widget is placed.

To change the text in the Rewards FAQ widget:

This widget provides an overview of the referral process, displaying details about the rewards available for both the referring customer and the referred friend. It includes a unique referral link for each customer and sharing options via social media channels.

This widget is available to both logged-in and guest users. Logged-in customers will see their unique referral link, while guests will be prompted to sign up or log in to access referral features.

This widget allows customers to track their referred friends and their key details, such as names, email addresses, referral statuses (e.g., pending or completed), and referral dates. If multiple referrals exist, customers can navigate through the list using arrow controls.

This widget provides a visual representation of a store’s VIP program, showcasing different tiers and their associated benefits. Each tier highlights key perks, such as points multipliers, exclusive rewards, and special privileges, motivating customers to engage with the loyalty program and advance to higher tiers.

This widget is available to all visitors, but logged-in customers will see their current tier and progress toward the next level.

This widget provides customers with an overview of their progress in the VIP tiers program. It displays their current tier, the date it was achieved, the accumulated points, and the points required to reach the next tier. Customers can also view exclusive benefits such as points multipliers, special perks, and unique rewards associated with each tier.

This widget provides customers with a clear view of their progress within the VIP Tiers program. It displays their current tier, accumulated points, and the remaining points required to reach the next tier. This visual representation helps encourage continued engagement with the loyalty program.

This widget shows customers their progress across multiple VIP tiers. It displays each tier, the points or actions required to reach the next level based on the configured milestones, and the customer’s current progress. This helps motivate customers to engage more and unlock higher-tier benefits.

If you have any questions or need assistance, please don’t hesitate to contact our support team at [email protected] or via the chat icon in the right-bottom corner.