Introduction
Branding covers all the visual aspects of your program and is split into 3 parts: general appearance, the loyalty page and the customer account module.
💡 As a reminder, the goal is to have a page on your website where your customers can find your loyalty and referral program.
You can customize this page by adjusting titles, descriptions or the display order, so it fully matches your preferences and your brand identity. 🌟
General appearance
You can change the overall appearance of your user spaces.
This section is split into 3 parts:
Typography
Typography lets you change the fonts of your program.
✨ Follow our guide to change the typography.
The login, sign-up & back button
Choose the button text and customize its appearance.
You can:
set the text size and weight,
choose the text and background color,
configure the hover colors,
adjust the corner radius.
For advanced customization, use a custom CSS file. All the steps are in our guide.
The loyalty page
The page is the heart of your branding, offering a clear and attractive showcase of the missions and programs you offer. With full customization of titles, descriptions, images and colors, this page becomes a faithful reflection of your brand identity.
💡 The page is added in one click from the Communication - Distribution tab. Follow our guide to reference your page!
You can choose to hide modules or reorder the sections however you like.
The banner
Select the text layout on the banner according to your preferences. Choose a specific image, suited to desktop or mobile display. You are also free to fully customize the banner texts.
1. Layout
Define the overall layout of the section.
2. Section appearance
Image – Desktop
Drag and drop an image or upload one. (Recommended size: 1440 × 500 px)
Image – Mobile
Drag and drop an image or upload one. (Recommended size: 1440 × 500 px)
Section color
Choose the background color of the section.
3. Texts
Title
Title
Text
Choose the title text and set its display parameters.
You can:
align the text
choose the text color and size
set the text size
choose the font weight
Description
Description
Text
Choose the description text and set its display parameters.
You can:
align the text
choose the text color and size
choose the font weight
The profile
Customize the user profile section by changing the text, color and size as you wish. Also adjust the size of the social media buttons for better integration with the rest of the interface.
Section appearance – Social media
Section appearance – Social media
Choose the button text and customize its appearance.
You can:
align the text
choose the text color and size
set the font weight
select the section background color.
Social media buttons
Social media buttons
Customize your social media buttons
You can:
set the text size and weight
choose the text and background color,
configure the hover text and background colors
adjust the corner radius.
The steps
Make changes to the steps section, for both logged-in and logged-out users. You can change the texts and reformat how they are presented to suit your needs.
Section appearance
Section appearance
Section color
Customize the background color of the section.
Logged-out mode
Logged-out mode
Number
Customize the step number.
You can:
set the text color and size
choose the font weight
Title
Customize the main title of the section.
You can:
set the text color and size
choose the font weight
Description
Customize the section description to guide the user.
You can:
set the text color and size
choose the font weight
Step 1 / Step 2 / Step 3
You can:
customize the step number
add or edit the step title
add or edit the step description
Logged-in mode
Logged-in mode
Title
Customize the main title shown to the logged-in user.
You can:
edit the text,
choose the text color and size
choose the font weight
Subtitle
Customize the subtitle showing the user's points balance.
You can:
edit the text,
choose the text color and size
choose the font weight
“My rewards” button
Customize the button used to access rewards.
You can:
edit the text
adjust the text size and weight
choose the text and background color
configure the hover text and background color
adjust the corner radius to round the button.
“My recent activity” button
Customize the button used to access the user's recent activity.
You can:
edit the text
adjust the text size and weight
choose the text and background color
configure the hover text and background color
adjust the corner radius.
The loyalty page sections
Rearrange the sections dedicated to referral, missions, rewards, VIP tiers, product testing and the loyalty card so they match the look and functionality of your program.
Missions, rewards and product tests
Layout
Layout
Organize the structure of the section and adjust the overall appearance
Section appearance
Section appearance
Text
Customize the text of this section to explain to users how to earn points.
You can:
align the text
choose the text color
adjust the text size and weight
set the section background color
“Mission” card
“Mission” card
Customize the appearance of the mission card.
You can:
set the background color
configure the hover color
adjust the corner radius
choose the border color
Number of points
You can customize how the number of points is displayed.
You can:
choose the text color
set the hover text color
adjust the text size and font weight
Mission name
You can customize how the mission name is displayed.
You can:
choose the text color
set the hover text color
adjust the text size
set the font weight.
Button
Button
Customize the appearance of the button.
You can:
adjust the text size
choose the font weight
choose the text color
select the background color
configure the hover text color
configure the hover background color
adjust the corner radius.
Referral
1. Referral section (customer)
Section layout
Organize the structure of the section
Section appearance
Section appearance
Customize the overall appearance of the section.
You can:
add a Desktop image (recommended size: 1920 × 960 px) by dragging or uploading it,
add a Mobile image (recommended size: 960 × 1920 px) by dragging or uploading it,
choose the section color.
Card appearance
Card appearance
You can customize the overall appearance, the title and the description of the card.
You can:
align the text
set the background color
configure the hover color
adjust the corner radius
choose the border color.
Share icons
Share icons
Drag an image or upload it for the icon.
Link
Email
SMS
WhatsApp
Messenger
X
Button
Button
Customize the appearance of the button.
You can:
set the text size
choose the font weight
set the text and background color
set the hover text and background color
choose the corner radius.
“Logged out” card / “Share” card / “Congratulations” card
“Logged out” card / “Share” card / “Congratulations” card
Customize the content of the card.
You can:
set the card title
set the description text
set the button text
3. Section: Referral modal (friend)
The configuration steps are the same as for the other sections, including:
“Verification” modal
“Success” modal
“Error” modal
Section appearance
Section appearance
Customize the overall appearance of the modal.
You can:
add a Desktop image by dragging or uploading it,
add a Mobile image by dragging or uploading it,
choose the section color.
💡 Good to know: the referral modal (friend) — the one that opens when a referred friend clicks a referral link — does accept an image. Add it from Branding → Referral → Referral modal (friend) → Section appearance, with a Desktop image field and a Mobile image field, separate from those of the referral (customer) section.
Customize the content of the card.
You can:
set the card title
set the description text
set the button text
Loyalty card
Section layout
Section layout
Organize the structure of the section
Section appearance
Section appearance
You can define the overall appearance of the section:
use a dynamic image,
add a custom image,
choose the section color.
“Loyalty Card” texts
“Loyalty Card” texts
Title
Customize the title and the description of the section.
You can:
align the text
set the text color
set the text size and weight
Description
align the text
set the text color
set the text size and weight
The customer account
Integrating the customer account module above or below the customer's orders matters for several reasons. It lets your customers see their points balance and access the program quickly. Increased visibility of loyalty points encourages customers to make the most of them by claiming rewards.
You can change the appearance of the section by choosing a desktop or mobile image and editing all the texts.
Navigation & appearance
Section background
Section background
Customize the background of the section
You can:
add an image for the desktop version (540 × 150)
add an image for the mobile version (360 × 290)
set the block color
choose the navigation color
select the section color
adjust the corner radius.
Section
Section
Text
Customize the content of the section
You can:
set the section title
align the texts
customize the text color, size and weight.
Points
Customize how points are displayed
You can:
customize the points naming
customize the text color, size and weight.
Menu
Menu
Title
Customize the content of the section
You can:
set the menu titles (Loyalty, Rewards, Referral)
add an image for each entry
Active menu
Customize the active menu
You can:
set the text size and weight
select the text and background color
configure the hover text and background colors
adjust the corner radius.
Inactive menu
Customize the inactive menu
You can:
set the text size and weight
select the text and background color
configure the hover text and background colors
adjust the corner radius.
Loyalty
Card format
Card format
Customize the card format
You can:
choose the Points card format
select the banner display
adapt the presentation of the points card.
Loyalty block
Loyalty block
Section title
Customize the section title
You can:
customize the main text
align the texts
choose the text color, size and weight.
VIP tiers
Customize the VIP tiers
You can:
set the VIP tier text
align the texts
customize the text color, size and weight.
Description
Customize the description
You can:
set the description text
align the texts
customize the text color, size and weight.
Button
Button
Customize the button
You can:
set the button text
choose the text size and weight
select the text and background color
configure the hover text and background colors
adjust the corner radius.
Card style
Card style
Customize the card style
You can:
choose the card style
select the display style (Simple / VIP tier / Upcoming reward)
Card customization
Card customization
Customize the loyalty card
You can:
set the card color
adjust the corner radius.
Number of points
Customize how the number of points is displayed
You can:
choose the text color
set the text size
select the text weight.
Points naming
Customize the points naming
You can:
choose the text color
set the text size
select the text weight.
VIP tier
Customize the VIP tier
You can:
set the text color
choose the background color
configure the progress color
select the dot color.
Rewards
Section title
Section title
Customize the section title
You can:
set the section title
align the texts
choose the text color, size and weight.
Customize the description
You can:
set the description text
align the texts
choose the text color, size and weight.
“Reward” card
“Reward” card
Customize the “Reward” cards
You can:
set the card background color
choose the hover color
adjust the corner radius
select the border color.
Customize the reward name
You can:
align the texts
choose the text color
configure the hover text color
set the text size and weight.
Customize how the number of points is displayed
You can:
align the texts
choose the text color
configure the hover text color
set the text size and weight.
“Reward” button
“Reward” button
Customize the button
You can:
set the button text
choose the text size and weight
select the text and background color
configure the hover text and background colors
adjust the corner radius.
Referral
Referral block
Referral block
Customize the referral block
You can:
set the section text
align the texts
choose the text color, size and weight.
Customize the referral title
You can:
set the title text
align the texts
choose the text color, size and weight.
Customize the description
You can:
set the description text
align the texts
choose the text color, size and weight.
Customize the referral button
You can:
set the button text
choose the text size and weight
select the text and background color
configure the hover text and background colors
adjust the corner radius.
“Share” icon
“Share” icon
Customize the share icons
You can:
add an icon for the link
add an icon for email
add an icon for SMS
add an icon for WhatsApp
add an icon for Messenger
add an icon for X.
“Congratulations” block
“Congratulations” block
Customize the “Congratulations” block
You can:
set the block title
align the texts
choose the text color, size and weight.
Customize the description
You can:
set the description text
align the texts
choose the text color, size and weight.
Customize the button
You can:
set the button text
choose the text size and weight
select the text and background color
configure the hover text and background colors
adjust the corner radius.
Loyalty card
Section appearance
Section appearance
Customize the appearance of the section
You can:
add a custom image (320 × 230);
Texts
Texts
Customize the texts
You can:
set the title
align the texts
choose the text color, size and weight.
Customize the description
You can:
set the description text
align the texts
choose the text color, size and weight.
Well done, your branding is set up: your users will now enjoy a unique experience. 🌟
💡 You can preview the different modules in desktop or mobile format by clicking the icons in the top right.