How to customize Rewards widget branding in Growave 2.0

The Rewards Branding settings in Growave 2.0 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