What options do I have when choosing how to theme the Loyalty Mobile App?
The Loyalty Mobile App has a built-in theming system which allows you to give your version of the app its own unique look and feel. This article describes what elements (e.g. colours, fonts, graphics) can be specified within a theme and how they will be applied across the different views in the app.
App Icon
This is the icon displayed for the app in the App Stores and on the users home screen on their device.
Options
- You can specify the image you would like to be used for the app icon.
Considerations
- Please provide your app icon as a 1024px x 1024px PNG file.
- Take into account the guidelines provided by Apple and Google when designing your app icon artwork.
- Note that your app icon may be masked with a rounded rectangle or circle depending on the host operating system so try to keep the main content of your app icon in the centre of the graphic.
App Name
This is the name of the app that is displayed underneath the app icon on the users home screen.
Options
- You can specify the name of the app to be displayed.
Considerations
- Note that when choosing an app name you should take into consideration that long app names may be truncated by the host operating system if there is not enough space to display the entire app name. The maximum number of characters that can be used for the app name varies based on factors such as the device screen size and width of character used in the name (e.g. a 'l' character takes up less horizontal space than a 'w' character. As a general rule ensure your app name appears without truncation on as many devices as possible, try to limit your app name to less than 15 characters.
Splash Screen
An app splash screen is an introductory screen that appears while your application loads in the background.
Options
- You can specify the image you would like to be used for this splash screen.
Considerations
- Please provide a 1242px × 2208px PNG file for this graphic.
Logo Graphic
The app displays a company logo throughout the app.
Options
- You can specify the graphic to be used for the logo in the app.
Considerations
- Please provide a 600 px × 544px PNG file for this graphic.
Wallet Graphic
On the Wallet tab, when the users wallet is empty (they don't have any vouchers) the app displays a graphic of an empty wallet by default.
Options
- You can specify the graphic to be used instead of the default wallet graphic.
Considerations
- Please provide a 339 px × 123px PNG file for this graphic.
Reward Category Graphic
You can specify a custom graphic to represent a reward category (or subcategory) in the app.
Options
Considerations
- Reward category artwork should be uploaded as 375px x 142px PNG files.
Reward Graphic
You can specify a custom graphic to represent a reward in the app.
Options
Considerations
- Reward category artwork should be uploaded as 800px x 600px PNG files with the main content of the graphic kept within a central 500px2 area.
Colours and Transparency
You can specify the following colour variables which will be used throughout the app.
Options
- Primary Colour
- Accent Colour
- Paper Colour
- Background Colour
- Text Colour
Considerations
- When a background image is provided the header colour is transparent so that the background image shows through.
Fonts
You can specify a custom font to be used in the app in certain areas.
Options
Considerations
- In order to use a custom font in the app you must supply the font file and ensure that you own a license to use the font in a mobile app context.
- The custom font will be used for the following pieces of text,
- Headings on the registration and login screens.
- Users name on home screen.
- Reward category / list headings.
- Reward category titles.
- Sidebar menu items
- Screen headings.
- Section headings in the Profile > Preference screen.
- All other text displayed in the app will use the default system font specified by the host operating system.
