Skip to main content

Customer portal: Brand settings

Update colors, fonts, imagery, logos, and corners of your customer portal—the details that make it feel like your brand.

Updated over a week ago

Welcome to the Customer Portal—a centralized hub where customers can sign up or log in to access their personalized loyalty profiles. Here, they can earn points, redeem rewards, and access exclusive discount codes delivered through email marketing.

📖 Learn more about the Customer Portal.

⚽️ Heads up: Marsello will be transitioning all retailers from the legacy online widget and in-store portal to the new Customer Portal by March 31, 2025. This change aims to enhance user experience, streamline operations, and provide more robust features for your business. Stay tuned for further updates as we make this exciting shift!

Below is a step-by-step guide to adding your brand elements to your Customer Portal.

Customer portal: Brand settings

You can easily make your customer portal feel like your own brand with a variety of customization options. This way, it becomes a personalized and inviting space for your customers to engage with your loyalty program.

1. In your Marsello admin, go to Customer experience

2. Under Personal device click Customer Portal > Brand

These settings determine the look and feel of your customer portal.

Screenshot of the Marsello admin interface showing the navigation path to customize the customer portal. Instructions highlight going to "Customer experience," then selecting "Customer Portal" under "Personal device," and clicking on "Brand" to access customization options for branding the portal.

🖌 Any customization or changes you make will automatically update in real-time on the preview, giving you the chance to ensure it aligns with your preferences before finalizing.
🚀 When you're ready, click Publish changes to update your live customer portal.

Colors

How to change:

3. Next to each option, click the drop-down to open the color picker.


4. To add your hex color code, click on "R G B" to change the input setting to "HEX" then enter your brand's HEX color code

Screenshot showing the color customization settings in the Marsello customer portal. Users are instructed to click the dropdown next to each option to open the color picker. The interface includes a toggle from "R G B" to "HEX," allowing users to enter their brand's HEX color code for precise branding.

💡 Tip: Not sure what your store's hex color codes are? You can use this HTML Color Code tool to identify your brand colors.

What it changes:

We recommend updating the following four main color settings:

  • Brand Color: Updates include:

    • Visitor View: 'Sign-in' button and gradient headings on all pages.

    • Customer View: 'Points balance' label, gradient headings, and progress indicators on all pages.
      ​

  • Action Color: Affects button colors, navigation menu icons, and text links in both visitor and customer views.
    ​

  • Background Color: Changes the background color of the customer portal for both visitor and customer views.
    ​

  • Font Color: Adjusts the color of sub-headings and paragraph text for both visitor and customer views.

⚙️ Advanced Settings: Additional color settings (Optional) ⚙️
👉 Personalize various color elements to your preference—customize as much or as little as you like.

Screenshot displaying the color customization settings in Marsello’s customer portal, highlighting four main editable options: Brand Color, Action Color, Background Color, and Font Color. Descriptions explain how each setting affects both visitor and customer views, such as buttons, headings, progress indicators, and text. An "Advanced Settings" section is also visible, offering optional additional color customization for a more personalized look.

  • Home page banner colors: Modify the colors of the Home page heading for both Visitor & Customer views

    • Gradient start & end: This indicates the starting light color hue in the top-left corner to the ending darker color hue in the bottom right.

    • Font: This updates the heading font and smaller sign-in / points label in top right corner.
      ​

  • Header page colors: Modify the colors of all sub-page headings in the customer portal (e.g., Earn, Redeem, Card & More screens) for both Visitor & Customer views.

    • Gradient Start & End: Same as described above.

    • Font: Same as described above.

📝 Note: Any modifications made to the header page colors will not apply to the Home screen

  • Clickable elements: Modify the colors of buttons and text links that Visitors & Customers use to navigate the customer portal.

    • Background: Update the button background to make this action the obvious next step for both Visitors and Customers

    • Font: Customize the button’s font color to enhance readability

    • Focus background: Modify the hover background color for focused elements to make them stand out

    • Link: Set the color for text links to ensure they are easily identifiable and consistent with your branding

    • Focus link: Adjust the hover link color to provide clear visual feedback that the link is clickable

  • Indicator Colors: Modify the colors of elements that highlight key information for both Visitor & Customer views

    • Icon: Update the Earn, Reward and VIP tier icons to match your brand's colors

    • Check background: Choose the background color for bullet points to ensure they stand out

    • Check icon: Set the color of checkmarks to improve clarity and fit your design

    • Progress Start & Progress End: Define colors for the start and end of progress bars to reflect your branding

Imagery

Logo

The logo is visible on all pages of the customer portal in the top-left corner to give a consistent brand experience.

5. Under Logo, Click Choose file to upload your logo

Screenshot showing the logo upload section in the Marsello customer portal settings. The interface highlights that the logo appears on all pages in the top-left corner to maintain a consistent brand presence. A button labeled "Choose file" is visible for uploading a custom logo.

​

📐 Size recommendation: 60 by 60 pixels. Images must be .jpg, .png or .svg file

Banner

The banner is visible on the home page of the customer portal, allowing you to create a striking background image that captures attention and highlights your brand.
​

6. Under Banner Image, click Choose file to upload your banner image
​

Screenshot of the banner image upload section in the Marsello customer portal settings. It shows that the banner appears on the home page as a large background image to enhance visual appeal and reinforce branding. A "Choose file" button is available for uploading a custom banner image.

​

📐 Size recommendation: 600 by 300 pixels. Images must be .jpg, .png or .svg file

👉 Upload an alternative logo to ensure it stands out against your background image—customize it to perfectly complement your design.

⚙️ Advanced Settings: Additional Home page logo (Optional) ⚙️

  • Banner logo: Upload a dark or light logo to contrast with your background image or color scheme. Same size recommendation: 60 by 60 pixels. Images must be .jpg, .png or .svg file.

Font

Select from a range of web-safe fonts or use your custom font to match your brand's style.

🎨 Note: If you haven’t added your custom font yet, upload it under your Marsello Brand settings to make it available for emails, the customer portal, and forms.

7. Under Typography, click the Default font option to open the drop-down menu to select from

Screenshot of the Typography settings in the Marsello customer portal. The interface shows a dropdown menu labeled "Default font" where users can click to choose from a list of available font options to customize the portal's text style.

👉 Choose the appropriate styles to enhance readability and visual appeal.

⚙️ Advanced Settings: Additional font settings (Optional)⚙️

  • Heading & Subheading: Tailor your brand's typography by selecting different fonts

  • Font size: Adjust the font size to best suit your audience.

Screenshot of the typography customization options in the Marsello customer portal. Settings include dropdowns for selecting different fonts for headings and subheadings, as well as sliders or input fields to adjust the font size, allowing users to tailor text appearance to match their brand and audience preferences.

Corners

Customize the corner radius for all elements in your customer portal.

8. Click your preferred option; sharp, smooth or round, or adjust the pixels yourself

Screenshot of the corner radius customization settings in the Marsello customer portal. Users can choose between sharp, smooth, or round corner styles for all elements, or manually adjust the corner radius using pixel settings for a more personalized look.

What it changes:

  • Panel: Adjust the corners of the entire customer portal frame.

  • Cards: Set the corners for individual sections within the portal.

  • Action Elements: Modify the corners of clickable buttons and other interactive elements.

  • Launcher (omnichannel or eCommerce–only): Customize the corners of the launcher (previously known as a loyalty tab) that appears on your website.

Up next 👉 Tailor content for maximum engagement

You have the power to customize the content visitors and customers see in your loyalty program. Whether it's text, feature cards, or imagery, you can tailor it to match your brand's voice and message. Add merge tags to personalize their experience, and even include custom links—such as your store location, Google reviews, or booking options—to help build engagement.

Screenshot showing customization options for the content displayed to visitors and customers in the Marsello loyalty program. Users can edit text, feature cards, and imagery to align with their brand's voice. The interface also allows the addition of merge tags for personalization and custom links, such as store locations, Google reviews, or booking options, to enhance engagement.

See step-by-step guide

Merchant also searched for: loyalty widget, online portal, online profile, custoemr portal, customerportal, customer_portal, portalshopify

Related Articles
Customer Portal: Setup & Configuration
Customer portal: Content settings
Customer portal: Introduction
Loyalty program training for staff: In-store portal customization
Customer portal: Common questions
Did this answer your question?