Introduction
Branding involves modifying the different visual aspects of your program and is divided into three parts: the overall 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, and even the display order, allowing full adaptation to your preferences and your brand identity. 🌟
General appearance
You can modify the global appearance of your user spaces.
This section is divided into three parts:
Typography
Typography allows you to change the fonts used in your program.
✨ Follow our guide to modify typography.
Login, sign-up & back button
Choose the button text and customize its appearance.
You can:
define text size and font weight,
choose text and background colors,
configure hover colors,
adjust border radius.
For advanced customization, use a custom CSS file. Find all the steps in our guide.
For advanced customization, use a custom CSS file.
Find all the steps in our guide.
Loyalty page
The loyalty 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 true reflection of your brand identity.
💡 The page can be added in one click from the Communication – Distribution tab. Follow our guide to reference your page!
You can choose to hide modules or rearrange sections in the order you prefer.
Banner
Select the layout of the texts on the banner according to your preferences. Choose a specific image optimized for desktop or mobile display. You can also fully customize the banner text.
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
Choose the title text and define its display settings.
You can:
align the text
choose text color and size
define text size
choose font weight.
Description
Description
Choose the description text and define its display settings.
You can:
align the text,
choose text color and size,
choose font weight.
Profile
Customize the user profile section by modifying the text, color, and size as you wish. You can also adjust the size of social media buttons for better integration with the rest of the interface.
Section appearance – Social networks
Section appearance – Social networks
Choose the button text and customize its appearance.
You can:
align the text
choose text color and size
define font weight
select the section background color.
Social media buttons
Social media buttons
Customize your social media buttons.
You can:
define text size and font weight
choose text and background colors
configure hover text and background colors
adjust border radius.
Steps
Edit the steps section for both logged-in and logged-out users. You can change the texts and reformat their presentation as needed.
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:
define text color and size,
choose font weight.
Title
Customize the main title of the section.
You can:
define text color and size,
choose font weight.
Description
Customize the section description to guide the user.
You can:
define text color and size,
choose 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 displayed to logged-in users.
You can:
modify the text,
choose text color and size,
choose font weight.
Subtitle
Customize the subtitle to display the user’s number of points.
You can:
modify the text,
choose text color and size,
choose font weight.
“My rewards” button
Customize the button used to access rewards.
You can:
modify the text,
adjust text size and font weight,
choose text and background colors,
configure hover text and background colors,
adjust border radius.
“My recent activities” button
You can:
modify the text,
adjust text size and font weight,
choose text and background colors,
configure hover text and background colors,
adjust border radius.
Loyalty page sections
Rearrange the referral, missions, rewards, VIP tiers, product tests, and loyalty card sections to align with the aesthetics and functionality of your program.
Missions, rewards, and product tests
Layout
Layout
Organize the section structure and adjust its general appearance.
Section appearance
Section appearance
Text
Customize the text to explain how users can earn points.
You can:
align the text,
choose text color,
adjust text size and font weight,
define the section background color.
“Mission” card
“Mission” card
Customize the appearance of the mission card.
You can:
define background color,
configure hover color,
adjust border radius,
choose border color.
Points amount
You can:
choose text color,
define hover text color,
adjust text size and font weight.
Mission name
You can:
choose text color,
define hover text color,
adjust text size,
define font weight.
Button
Button
Customize the button appearance.
You can:
adjust text size,
choose font weight,
choose text color,
select background color,
configure hover text color,
configure hover background color,
adjust border radius.
Referral program
1. Referral section (customer)
Section layout
Organize the section structure.
Section appearance
Section appearance
You can:
add a Desktop image (recommended size: 1920 × 960 px),
add a Mobile image (recommended size: 960 × 1920 px),
choose the section color.
Card appearance
Card appearance
Customize the general appearance, title, and description of the card.
You can:
align text,
define background color,
configure hover color,
adjust border radius,
choose border color.
Share icons
Share icons
Upload or drag and drop an image for each icon:
Link
Email
SMS
WhatsApp
Messenger
X
Button
Button
Customize the button appearance.
You can:
define text size,
choose font weight,
define text and background colors,
define hover text and background colors,
choose border radius.
“Logged out” / “Share” / “Congratulations” cards
“Logged out” / “Share” / “Congratulations” cards
You can:
define the card title
define the description text
define the button text.
3. Section: Referral modal (friend)
Configuration steps are the same as for other sections, including:
“Verification” modal
“Success” modal
“Error” modal
Customize the card content.
You can:
define the card title,
define the description text,
define the button text.
Loyalty card
Section layout
Section layout
Organize the section structure.
Section appearance
Section appearance
You can:
use a dynamic image
add a custom image
choose the section color.
“Loyalty Card” texts
“Loyalty Card” texts
Title
Customize the title and description.
You can:
align text
define text color
define text size and font weight.
Description
You can:
align text
define text color
define text size and font weight.
Customer account
Integrating the customer account module above or below customer orders is important for several reasons. It allows customers to see their point balance and quickly access the program. Increased visibility of loyalty points encourages customers to use them by claiming rewards.
You can customize the section’s appearance by choosing a desktop or mobile image and modifying all texts.
Navigation & appearance
Section background
Section background
Customize the background of the section.
You can:
add a desktop image (540 × 150)
add a mobile image (360 × 290)
define block color
choose navigation color
select section color
adjust border radius.
Section
Section
text
Customize the section content.
You can:
define the section title
align texts
customize text color, size, and font weight.
Points
Customize the display of points.
You can:
customize the point name
customize text color, size, and font weight.
Menu
Menu
Title
Customize menu content.
You can:
define menu titles (Loyalty, Rewards, Referral),
add an image for each menu item.
Active menu
Customize the active menu.
You can:
define text size and font weight,
select text and background colors,
configure hover text and background colors,
adjust border radius.
Inactive menu
You can:
define text size and font weight,
select text and background colors,
configure hover text and background colors,
adjust border radius.
Loyalty
Card format
Card format
Customize the card format.
You can:
choose a points card format
select banner display
adapt the presentation of the points card.
Button
Button
You can:
define button text,
choose text size and font weight,
select text and background colors,
configure hover text and background colors,
adjust border radius.
Card style
Card style
You can:
choose card style
select display style (Simple / VIP Tier / Upcoming Reward).
Card customization
Card customization
You can:
define card color
adjust border radius.
Points amount
You can:
choose text color,
define text size,
select font weight.
Point naming
You can:
choose text color,
define text size,
select font weight.
VIP tier
You can:
define text color,
choose background color,
configure progress color,
select dot color.
Rewards
Section title
You can:
define section title,
align text,
choose text color, size, and font weight.
Description
You can:
define description text,
align text,
choose text color, size, and font weight.
“Reward” card
You can:
define card background color,
choose hover color,
adjust border radius,
select border color.
Reward name
You can:
align text,
choose text color,
configure hover text color,
define text size and font weight.
Points display
You can:
align text,
choose text color,
configure hover text color,
define text size and font weight.
“Reward” button
You can:
define button text,
choose text size and font weight,
select text and background colors,
configure hover text and background colors,
adjust border radius.
Referral
Referral block
You can:
define section text,
align text,
choose text color, size, and font weight.
Referral title
You can:
define title text,
align text,
choose text color, size, and font weight.
Description
You can:
define description text,
align text,
choose text color, size, and font weight.
Referral button
You can:
define button text,
choose text size and font weight,
select text and background colors,
configure hover text and background colors,
adjust border radius.
“Share” icons
You can add icons for:
Link
Email
SMS
WhatsApp
Messenger
X
“Congratulations” block
You can:
define block title,
align text,
choose text color, size, and font weight.
Description
You can:
define description text,
align text,
choose text color, size, and font weight.
Button
You can:
define button text,
choose text size and font weight,
select text and background colors,
configure hover text and background colors,
adjust border radius.
Loyalty card
Section appearance
Section appearance
You can:
add a custom image (320 × 230).
Section appearance
Texts
You can:
define title,
align text,
choose text color, size, and font weight.
Description
You can:
define description text,
align text,
choose text color, size, and font weight.
🎉 Congratulations, you’ve set up your branding! This will allow your users to enjoy a unique experience. 🌟