Web App - Loyalty Customization Guidelines

MENU Loyalty is designed to help you retain customers by rewarding them through a spend-based program. To create a compelling experience, you should configure your loyalty program and personalize your rewards according to our guidelines and your specific needs.

Loyalty currency

Loyalty currency or points are collected by users and they are used to buy rewards. Like any other currency, it has its own symbol. You should prepare this symbol inside a container of 24x24px.

Used for

• Loyalty Card
• Loyalty and offer component on the Menu screen
• Showing the number of points in the header
• Showing the number of points used above the cart on the menu screen
• Showing the number of points used on the checkout
• Showing the pricing in points for every item in the cart
• The number of points user will earn in the cart
• The number of points user will earn in the checkout
• Showing the number of points spent or earned on the Orders screen
• Showing the number of points spent or earned on the Single order screen

Requirements

• Image container size: 24x24px
• Image format: SVG
• Name: icon24-coin.svg

Loyalty Card background

The Loyalty card is used to show basic info about a user, the number of points, tier that they have reached, but also to collect points from the cash register or kiosk. There are two themes for the Loyalty card and you will be able to choose one of them when configuring the Loyalty program

Light and Dark background

The background for the Light and Dark loyalty card should be light/dark enough so it doesn’t compromise the readability of the card.

Used for

• Front of the Loyalty card
• Back of the Loyalty card (when collecting points - only on mobile)

Requirements

• Image size: 1200x807px
• Image format: PNG
• Name: 
  • cardbg_light.png
  • cardbg_dark.png

Program description images

Program description images help information to be more understandable and immersive. Every image belongs to one paragraph that should explain one fact about the program. The maximum number of paragraphs is 3.

Used for

• Loyalty program info page

Requirements

• Image size: 224x224px
• Image format: PNG
• Names: 
  • loyalty_desc_heading1.png 
  • loyalty_desc_heading2.png
  • loyalty_desc_heading3.png

Offer and Reward Images

Offer and Reward images are clear representations of items users will get. Our recommendation is to use the only image/s of the product/s with some background color or neutral pattern. We don’t recommend using text on images as all necessary info you can have in the description of the offer/reward.

Used for

• Images of Offers and Rewards

Requirements

• Image size: 1200x800px
• Safe area: 1200x700px (visible part on phones with a notch, so don’t put anything important in the unsafe area)
• Image format: PNG
• Names: You can define it by yourself but we recommend to be the name of the offer/reward