All Collections
Customer Portal
Design & Image Specifications
Design & Image Specifications
Lina Chu avatar
Written by Lina Chu
Updated over a week ago

This page provides all the specifications you need to help you design your customer portal, landing pages and upload your brand images.

The table content for Design & Image Specifications as follows:

  • Business Logo

  • Webapp Homepage

  • Desktop Site Background

  • Digital Member Card Visuals

  • Reward Visuals

  • Referral Visuals

  • Benefits Page

  • Gift Card Visuals

  • Store Card Visuals
    ​

Business Logo

1. Go to Customer Portal icon > Basic or click here.

2. Upload your business logo and hit the "Save" Button.

Webapp Homepage

There are 2 styles of creating the homepage. You can create via

  • Individual blocks or tiles (Mockup A) OR

  • Single Background Image (Mockup B)

1. Go to Customer Portal icon > Content (Pages) or click here.

2. Click "+ Create" to create your homepage template homepage.

3. Use the available editor tools below to build your homepage.

4. Input title, link image to respective url and click "Save & Exit" button.

Desktop Site Background

6. To add Webapp Header in homepage, go to Web App > Menu & Home > Theme

7. Upload image under "Header" section.



OR to create the homepage using Single Background Image (Mockup B image below).

1. Go to Channels > Web App > Menu & Home > Theme.

2. Upload image in the "Background Image" section.

3. Next, go to Menu and click "+ Add Header Menu"

4. Input title, link image to respective url, select preferred icon and click "Save".

5. Continue to build your homepage by repeating steps 3 and 4.


Desktop Background

1. Go to Channels > Web App > Theme > Desktop View

2. Scroll down to "Desktop Browser Background" to upload your image and click "Save".


Digital Member Card Visuals

1. Go to Loyalty > Membership

2. On the top right corner of the page, clickto create a new tier.

3. Upload member card image and Click "Save"

4. To replace the member card image, simply click "Edit" on the selected tier and upload a new card image.


Reward Visuals

1. Go to Loyalty > Rewards > Click + Create button

2. Upload image and "Save".

Referral Visuals

1. Go to Marketing > Referral

2. Upload "Referral Banner" and "Save".

Benefits Page

1. Go to Customer Portal > Content (Pages) > Click "+ Create" button to create a new page. [https://xm.eber.co/playbooks/content/create]

2. Choose any of these 7 templates to build your page.

StoreApp

1. Login to backend Admin https://xm.eber.co

2. Go to Channels > StoreApp > Covers > + Add > Select Orientation > Upload Image > Save

i) Landscape view:

  • 2048 pixel x 1536 pixel (Recommended on iPad)

  • 1920 pixel x 1280 pixel (Recommended on 8" Android tablets)


​
ii) Portrait view:

  • 1280 pixel x 1920 pixel (Recommended on Android Smartphones Portrait Version)

(b) Backend Admin and View in StoreApp
​

Member Web App

  • Businesses have three options to design the Web App background:

1. Theme Background

1. Login to backend Admin https://xm.eber.co

2. Go to Channels > WebApp > Theme
​
​

a) Desktop Browser Background

Recommended image size to be in high resolution for:

iPads - 2048pixel x 1536pixel

Android 8" tablets - 1920pixel x 1280pixel

Android Smartphones (Portrait Version) - 1280pixel x 1920pixel
​
​

b) Menu Page Background Image

  1. For portrait image, the specifications are 640 pixel x 2000 pixel.

  2. For landscape image, any reasonable specifications is appropriate as the image will be displayed repetitively.

If you would like the member card image to be displayed at the top of the page (as shown below), you may tick the Show Member Card box.

3. Custom Menu Page

  • You may refer here to create your own custom menu page


​Recommended Dimension for Membership Card /Gift Card/ Rewards Storecard Image Rewards
​

Reward Item - 1200 pixel x 758 pixel recommended (Information and Design sample)


​

Did this answer your question?