Loyalty & Rewards: Display Widgets

  • Updated

Showcase the Stamped Loyalty & Rewards program in your store with the list of display widgets available. This guide will showcase examples of each widget.

You can preview them in the dashboard under Display Widgets in your Settings: https://go.stamped.io/v3/#/settings/widgets/display/

There are examples from our demo site for each display widget for your reference here: https://stamped-demo.com/pages/rewards

  • Note: The relevant program needs to be enabled for the display widget to be visible
    • Points - Page Earnings, Page Spendings, Checkout redemption, Points Indicator
    • Referral - Page Referral, Page Modal
    • VIP - VIP Tiers

In this guide

Page Summary

A summary page widget where the customer is able to  sign in to redeem points and check reward history or sign up for the loyalty & rewards program.



Logged-in Customer:


Page How it works

A widget to display how the loyalty & rewards program works. LR

Page Earnings

A widget that displays how to earn points in your loyalty & rewards program.


Page Spendings

A widget that displays the rewards your members can redeem using their accumulated points.


Page Referral

A widget for the Referral Program that displays the rewards your member and their friends would get if your member referred them. There are also various options for customers to refer their friends, as well as the display of the unique referral link for each customer account.


A pop-up modal that displays after an order for the Referral Program. L_R_Widget7.png

Checkout Redemption (Shopify Plus only)

There are three types of widgets available: slider, drop-down box, and variable points all of which allow your Loyalty customers to redeem points at the checkout page.

Note: Starting August 2024, Shopify will discontinue support for the Checkout Slider widget due to compatibility issues; we recommend implementing the Variable Points Redemption widget to ensure you can still offer your customers the option to redeem points at checkout. 

Slider Widget:


Drop-Down Box Widget:


Variable Points:


Installation instructions: Redeeming Points on Checkout

Points/Value/VIP tier Indicator

  • A simple points indicator which includes the branding of the points, recommended to be placed in a rewards information page/customer account page/header


Here's the code to be installed:

<div id="stamped-rewards-points-placeholder"></div> 

Another version of the indicator will display the monetary value of the points accumulated:

Here's the code:

<div id="stamped-rewards-points-placeholder" data-type="points-price" data-ratio="100" data-symbol="$"></div>
  • data-ratio: This attribute will determine the ratio of points to the dollar (eg. a ratio of 100 will convert 200 points to $2)
  • data-symbol: This attribute will determine the currency shown on the indicator
  • For the VIP tier indicator, you can install the following code:
<div id="stamped-rewards-viptier-placeholder"></div>

Rewards Activities

A widget that displays both the earning & spending histories of the customer's account


VIP Tiers

A widget that displays the overview of the VIP program, with the benefits and perks of each tier listed


Display of the perks & rewards for each tier is according to the Tier perks settings for individual VIP tiers over in the program:




Was this article helpful?

2 out of 3 found this helpful

Have more questions? Submit a request