Design & Image Specifications
  • 19 Jul 2022
  • 2 Minutes to read
  • Contributors
  • Dark
    Light

Design & Image Specifications

  • Dark
    Light

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, clickScreenshot 2021-04-14 at 10.59.56 PMto 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

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

 

Step 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

 

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

 

Step 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)






Was this article helpful?

First name must have atleast 2 characters. Numbers and special characters are not allowed.
Last name must have atleast 1 characters. Numbers and special characters are not allowed.
Enter a valid email
Enter a valid password
Your profile has been successfully updated.