How to customize Rewards widget branding in Growave version 2

The Rewards Branding settings in Growave version 2 allow you to customize the appearance of your Rewards launcher and popup widget to match your store’s theme. The interface consists of two tabs: General and Popup & Launcher.

Growave - Branding - Rewards

General tab

Use the General tab to set the following color options for your Rewards widget:

Theme

  • Configure two main colors: Primary and Secondary. These two colors in HEX format define the overall widget theme and will be used in other General and Popup & Launcher tab settings.

Buttons

  • Set button background and border color (Primary or Secondary). Default: Primary. This applies to the background and border of "primary" buttons, such as those in Nudges and "Join now" button for not logged-in users. Only the border color changes for the "secondary" buttons (the default background is transparent).
  • Set button font color (White or Black). Default: White. Applies to text color for "primary" buttons. The "Secondary" button text color is set to black.

Content

  • Customize icon color (Primary or Secondary). Default: Primary. Does not affect icons in specific components, such as the launcher button.
  • Customize link color (Primary or Secondary). Default: Primary.

Growave - Rewards widget Branding General

Popup & Launcher tab

The Popup & Launcher tab provides six sections for further customization:

Widget banner

  • Set banner background color (Primary or Secondary). Default: Primary.
  • Set banner font color (White or Black). Default: White. This also applies to banner icons, such as the QR code for Shopify POS (if this setting is active), History, and Rewards program FAQ.
  • Add a program name to display when users are not logged in.
  • Upload a banner image (JPG or PNG) to cover the header area.

Growave - Rewards widget banner

Default widget view

Choose the initial view customers see: Home, Ways to Earn, Ways to Spend, or VIP Tiers (Default: Home).

Growave - Rewards widget branding home screen

Disabled options:

  • If the Points program is off, Ways to Earn and Ways to Spend views are unavailable.
  • If the VIP Tiers program is off, the VIP Tiers view option is unavailable.
  • If Ways to Earn, Ways to Spend, or VIP Tiers views had been selected and then the respective program was switched off, the widget automatically displays the Home view.

Launcher

  • Set launcher background color (Primary or Secondary). Default: Primary.
  • Set launcher font color (White or Black). Default: White.

Choose a display style:

  • Icon with Text (Default). On mobile devices, this option displays Icon Only by default.
  • Text Only, or
  • Icon Only

Growave - Rewards launcher style

Launcher icon

  • Select from five predefined icons (Default: Trophy).
  • Set icon color (White or Black). Default: White.
  • If Text Only is selected, this section becomes inactive.

Growave - Rewards launcher icon

Launcher position

Adjust launcher position and screen edge spacing for desktop and mobile:

  • Positions: Bottom Right (Default) or Bottom Left.
  • Spacing:
    • Desktop: Lateral offset (default: 45px) and bottom offset (default: 10px). For screens 768px or wider.
    • Mobile: Lateral offset (default: 45px) and bottom offset (default: 10px). For screens narrower than 768px.

Growave - Rewards launcher position

Device visibility settings

Control launcher visibility:

  • Show on All Devices (Default).
  • Show Only on Desktop (for screens 1024px or wider).
  • Hide on All Devices.

Growave - Rewards launcher visibility

If you have questions or need assistance, contact us at support@growave.io or use the chat icon in the bottom-right corner. We’re here to help! 🤗

Related Articles