Background
This section has four tabs grouped under App Styling: Images, Colors, Buttons, and Form Fields. To edit any of these sections, simply navigate to the appropriate tab.
Images
Section | Description | Size | Format | Max File Size |
Small Logo | Used in the top header of the native mobile app and Web Wallet | 215 x 215 px | PNG |
|
Banners | Displayed on the Home screen in a scrolling carousel | 500 x 280 px | PNG |
|
Splash Loading Image | Full-screen loading image shown while the app is loading | 1356 W x 2934 H px | PNG | 5 MB |
Splash Fallback Image | Full-screen loading image shown while the app is loading | 1356 W x 2934 H px | PNG | 5 MB |
How to Create an App Banner
Click Edit Banners, then click + to create a new banner
Add your banner details
Banner Name is required, this is for internal use only
Status is enabled on default
Select a Background Type, either use a solid color or upload an image
If Image is selected, you have the option to enable an overlay and set transparency. This will add a black overlay to your image in the case that you want to add text on top
Adding Text to your banner is optional. You can change the text color, placement, and alignment
Adding a Link is optional. This will redirect users to another URL on click
Click Save
You can change the order in which banners appear using the Order column
You can also change the number of banners shown in the carousel
Please note: If you add text to your banner, this will not show in the Preview column. However, you will be able to see this in the app preview on the App Styling settings page.
Colors
â ď¸ Warning: We will set ADA compliant colors by default, however, if you change them you may run into contrast issues. See Accessibility for more information.
Brand Colors
Brand color: Changes color for bottom tabbar, buttons, progress bars, and links.
Error and success colors: Changes any error or success messages across the app (fields, toasts, etc.)
Text & Background Colors
Text
Primary text: Body copy, field text, headers
Secondary text: Placeholder, subtext, field labels
Backgrounds
Primary backgrounds: Discount cards, product cards, app headers, etc.
Secondary: Screen backgrounds
Header/Footer: Header and footer navigation backgrounds
Buttons
You can change the styling of your primary and secondary buttons. Keep in mind, you want the 'primary' style to represent the priority action on the screen.
Form Fields
Set border color and border radius for form fields.
Need Help?
If you need assistance, reach out to AIQ Support anytime via chat widget within your AIQ Dashboard.