2. App theming
The Loyalty Mobile App has a versatile theming system to ensure the app is 'on-brand' for your users.
Customizing your app theme
During onboarding, your manager will set a theme that aligns with your brand guidelines. You’ll have the option to request adjustments within the theming system constraints listed below.
Theming options are configured during the app’s build phase and are “hard-coded”—meaning any changes you wish to make must be finalised before this stage. Post-launch theming updates are possible but require an app update and may incur additional costs.
Please consult with your onboarding manager to ensure your preferences are captured early in the process.
App theme checklist
Colour palette
We will theme the app to match the colour scheme of the brand guidelines you supply. The theming system is largely based around a primary colour and an accent colour.
When reviewing the mockups we supply, you can choose to change the primary or accent colour if you like.
App icon
The app icon is used on a devices home screen. Two versions of your app icon must be supplied:
1x
PNG
1024x1024px (iOS)1x
PNG
512x512px (Android)
You can let the system automatically scale down your two icons to produce all other sizes, or — if you want to customise the appearance of the icon at specific sizes — you can supply multiple versions. See this article for more information, under the header 'iOS App icon sizes'.
Splash screen
Your app splash screen is shown whilst the app is loading and behind the login/register screen. It should be uncomplicated and fairly plain (many choose just a blank canvas of a single colour hex).
PNG
1290x2796px
It should not feature any text or logos. You can also optionally utilise your app splash screen in the following places:
Onboarding Slides
App Header Background
Logos
The app displays a company logo throughout the app.
PNG
Fixed Height 600px, Max Width 1000px
By default, the app logo you supply is used everywhere. If required, you can optionally supply an alternative image for the logo which appears in the app header.
Fonts
You can specify a custom font to be used in the app headings. For each font weight, supply:
Licensed or royalty-free
TTF
orOTF
file
Onboarding slides
See First launch screen for more information.
You can show up to 5 onboarding slides to provide users with information about your loyalty program's features and benefits. When your slides come to an end, your logo is shown on your splash screen with a 'Get Started' button. You can choose which images and text are displayed.
See Onboarding slides for a preview.
Supply one of each per slide:
Background colour or background image
You can choose to have a static colour background per slide, OR
your splash screen image as the background for every slide
Text colour
Title text (always shown at the top)
Central image (always shown in the middle - must be a Transparent
PNG
Max ~150kb)Description text (always shows at bottom)
Do NOT design the entire slide as a graphic. You do not need to supply the entire slide as a graphic. You only need to provide the assets listed above. Each slide is generated by the app automatically from the supplied assets.
Additionally, the layout of the onboarding slides is fixed as shown. You cannot re-order the items on the slide or move them around.
Empty wallet graphic
You can optionally choose to hide or show a different ‘empty wallet' graphic on the Wallet screen. This only applies if you are utilising the Wallet screen as opposed to the Activity screen (see App Configuration section above).
PNG
Transparent
Asset previews
Last updated
Was this helpful?