Setup
Branding has six modules: Colors, Font, Banner & Logo, Messaging, Dash Positioning, and The Widget. Every module shares the same preview and save controls.
In the rediem app, go to Branding.
Select the module to edit.
Update the settings in the left panel. The preview on the right reflects each change.
Click Guest or Member to see how the widget looks to logged-out visitors and logged-in customers.
Click Preview on Live Site to check the changes on the storefront, then click Save.
💡 Pro tip: Check both Guest and Member before saving, since many settings appear in only one view.
Colors
Go to Branding → Colors and enter a hex code or pick a color for each setting. Member colors stay consistent across the Home, Earn, Redeem, Community, Leaderboard, Profile, and Activity pages.
Primary Color sets the color:
For guests:
The loyalty program name in the widget header
The first avatar under the Become a Member! section
For members:
The loyalty program name in the widget header
The customer’s name
The avatar
Earn, Redeem, or Community tab (color will be visible if the tab is selected)
The default subscription icon
The subscription reward description
The subscription reward title for a cycle
The All Time, Weekly, and Monthly Leaderboard filters (color will be visible if the tab is selected)
The basic action icons and names
The terms and conditions link in each action and reward
The custom action name and points
The View Terms of Service link in both Earn and Redeem Sections
The customer names & header in community post
Emojis
Secondary Color sets the color:
For Guests:
The first avatar under the Become a Member! section
For members:
Duration and points shown after a member opens a utility card.
The background of "Your profile isn't complete yet. >"
Value selection in order discount card
Body Text Color sets the color:
For guests:
The Introduction text
The Member count
The Description text
For members:
The welcome text
The View Profile link
Customer names and points on the Leaderboard
Activity descriptions under view profile
Earn, Redeem, and Community tabs (color will be visible if the tab is unselected)
Primary Button Color sets
For guests:
Join Now button
For members:
Action completion buttons
Reward redemption and confirm buttons
Primary Button Text Color sets the text on those same buttons in both guest and member views.
Secondary Button Color sets the Sign Up button, which only guests see.
Secondary Button Text Color sets the text on the Sign Up button.
Header Bar Color sets the background of the widget header, behind the loyalty program name, in both views.
Main Background sets the background of the entire widget in both views.
Card Background sets the background of:
For guests:
Impact cards
For members:
The tier
Earn actions
Rewards
Community post cards
The point balance card inside the profile
Impact cards
Card Primary Color sets the color of:
For guests:
The impact numbers
For members:
The points label and value
The impact numbers
The tier icon and name
Basic action names, Custom action names & its points
Order Discount title and slider
Basic Reward icons and names
Custom reward title and points
Customer / Brand name & avatar in community posts
Header of community posts
Card Body Text Color sets the color of:
For guests:
The descriptive text on the impact card
For members:
Description of points in points card
The impact type name
The tier description
Basic action points
Custom action description
Order discount description and range of values
The community post body
Border Color sets card outlines and section dividers in both views, including impact, tier, action, community, and leaderboard cards.
Header Color sets the color of:
For guests:
The loyalty program name
Our Impact
Become a Member!
Earn & Redeem
For members:
Your Impact
The featured actions header
The actions header
The rewards header
Utility Cards Background sets the background of the points block, Leaderboard, and subscription reward cards. Guests do not see utility cards.
Font
Go to Branding → Font to choose the widget's two fonts and the header case.
Primary Text sets the header text, the program name in the join section, the customer's name, numeric values such as points and impact, and action names on the Earn, Redeem, and Community tabs.
Secondary Text sets body text, buttons, tabs, section headings such as Our Impact and Become a Member, View Profile details, Leaderboard content, nudges, and post titles and bodies.
Case sets the header text to Uppercase, Lowercase, or Title Case. It does not change any other text.
Add a Custom Font
Under Add a Font, click Upload a font.
Enter a name in Font Name.
Next to each Font Weight needed (400 or 700), click Choose File and select the font file.
Click Upload Font.
The new font then appears in the Primary Text and Secondary Text dropdowns.
📋 Note: Upload TTF, OTF, EOT, or WOFF files for maximum browser support.
Banner & Logo
Go to Branding → Banner & Logo and click Upload Image under each image to replace it.
Banner appears under the join section for guests and behind the points card for members. Recommended size is 600 × 300 pixels, with a 2 MB maximum. Add a description in Image Alt Text for accessibility.
Logo is the logo or logotype for the icon. Recommended size is 100 × 100 pixels, with a 1 MB maximum. It appears before the loyalty program name in the widget header.
Subscription Icon appears next to the subscription card in Earn section and is visible only to members. Recommended size is 140 × 140 pixels, with a 2 MB maximum. Add a description in Icon Alt Text for accessibility.
Default Profile Picture appears in the Become a Member section for guests. For members, it is the default profile picture and community posts until the customer uploads their own. Recommended size is 140 × 140 pixels, with a 2 MB maximum.
Messaging
Go to Branding → Messaging to edit the text in the widget. Settings are grouped under Program Description, Advanced, and Additional CSS.
Program Description
These fields control the guest join screen and the shared header.
Loyalty Program Name appears in the widget header in both views, up to 25 characters. Leave Hide from header turned off to keep it visible.
Call to Action appears above the program name for guests, such as "Join The." Add
{{loyalty_program_name}}to insert the program name.Default User Name replaces the customer's name for members whose Shopify name is empty.
Header 1, Introduction, Header 2, and Description appear only in the guest view. Introduction, Header 2, and Description allow up to 250 characters each.
Text Alignment sets text to Left or Center in both views.
Advanced
These fields appear only in the member view.
Welcome Message sets the greeting above the customer's name.
Action Title and Rewards Title set the headings above earn actions and custom rewards.
Subscription Prompt sets the text on the subscription card.
Subscription Header and Subscription Subheader set the text in the subscription section. Add
{{point_name}}to insert the brand defined points name like bananas, clementines, etc.,Action completed header text and Action completed subheader text set the message shown before customer submits an action. Add
{{name}}to insert the customer's name. Add{{action_name}}to insert the action's name.Post login banner sets an image which members see after logging in. Recommended size is 600 × 300 pixels, with a 2 MB maximum.
Point emoji sets the emoji shown with points. Click Change to replace it or click X above the icon to remove it.
Hide Banner hides the banner image, and Hide Impact hides the Your Impact section.
Display Name sets how the customer’s name appears. First shows only the first name, Last shows only the last name, First+Last initial shows the first name with the initial of the last name, and Both shows the full first and last name. The default is Both.
Additional CSS
Enter custom CSS in the text box to override the widget's default styles.
⚠️ Important: Check custom CSS with Preview on Live Site before saving, since it can override other Branding settings.
Dash Positioning
Go to Branding → Dash Positioning to control where the loyalty dash opens on the storefront.
The Dash sets the layout to Pop Up which is a floating panel, or Side Menu which is a panel along the edge of the screen.
Placing sets the dash to the Left or Right side of the screen.
Side Spacing sets the gap between the dash and the side of the screen, in pixels.
Bottom Spacing sets the gap between the dash and the bottom of the screen, in pixels.
Corner Radius sets how rounded the dash corners are, in pixels.
📋 Note: Corner Radius does not apply when Side Menu is selected.
The Widget
Go to Branding → The Widget to set up the widget button that opens the dash, and the link that opens it from anywhere.
Add the Embed Link value, such as
#rediem, to the end of the store URL to open the dash from an email or external site. For best results, add the dash link to the store navigation or link to it from a separate rewards page.Add Widget turns the floating widget button on or off.
Upload Image adds a custom widget icon. Recommended size is 50 × 50 pixels, with a 1 MB maximum.
Color sets the widget button and preset icons to the Primary or Secondary color.
Preset Icons offers built-in icons.
Appearance shows the widget as Icon with Text, Icon Only, or Text Only.
Icon Placing positions the icon at Top Left, Top Right, Bottom Left, or Bottom Right of the widget.
Corner Radius sets how rounded the widget corners are, in pixels.
zIndex sets whether the widget sits above or below other storefront elements. A higher number places it on top.
Widget Text sets the widget label separately for Loyalty Member and Guest.
Enable close button lets customers close the widget.
Show/Hide on Pages controls which storefront pages display the widget.
Shown On
Branding applies to the rediem widget on the storefront, on every page set in Show/Hide on Pages. Logged-out visitors see the guest view, and logged-in customers see the member view.
Why Use It
Match the loyalty widget to the store's look, voice, and layout so it feels like part of the storefront. A consistent experience builds trust and makes it easier for customers to join, earn, and redeem.