Home Screen Components & Images
Overview
Components are the ready-made building blocks of your app's home screen. You can arrange, configure, and populate them with content to create a home screen experience that fits your brand.
Component Types
Your home screen is built from the following components:
- Hero: A large background image with a single call-to-action button
- Big Image List: A full-width content slider with large image cards
- Small Image List: A content slider with medium-sized image cards
- Venue List: A list of nearby venues
- Text View: An informational block with a title, body text, and optional link
- Feature-Based Components: Additional components unlocked by specific features (for example, the Referral component)
- My Order Component: Displays a user's most recent order (requires login)
How Components Work
Structure
Components stack vertically to form the layout of your home screen. When you apply content to each component, you get a fully built home screen.
Functionality
You can rearrange, multiply, or turn off some components:
- Rearrange: Change the vertical order of components to adjust the home screen layout.
- Multiply: Use the same component type more than once to display different content types.
- Turn off: Disable any component you don't want to appear on the home screen.
Visibility
You can break some components into smaller elements. You can turn off specific parts of a component (such as a title, image, or description) without disabling the entire component.
Components
1. Hero
The Hero component appears at the top of your home screen. It includes a large background image and a single call-to-action button, making it the first thing users see when they open the app.
Use this component to visually represent your brand and direct users to the most important action in your app.
Button link options:
- Order
- Offers
- Rewards
- Promotions
- Custom actions (URL or deep link)
You can also turn off the button if you don't need it.
To configure the Hero component:
- Choose a version: Regular or Compact. Use the Compact version when you need more visible space below the hero for content such as Rewards or Offers.
- Select the button action (where the button links).
- Set the button colors and label text.
- Select a background image.
Note: The Compact Hero is available on iOS and Android for app version 4.7 or higher. To enable it for your brand, contact your PAR representative.
Required attributes:
| Attribute | Description | Type | Example Value | Localizable |
|---|---|---|---|---|
| Background Image | Image shown for the Hero. Recommended resolution: 375×555 px or higher at the same aspect ratio. | URL (Image) | https://www.google.com | Yes |
| Button Background Color | Background color of the call-to-action button (unpressed) | HEX color | #00112233 | No |
| Button Background Pressed Color | Background color of the call-to-action button when pressed | HEX color | #00112233 | No |
| Button Text Color | Color of the text in the button | HEX color | #00112233 | No |
| Button Text Pressed Color | Color of the text in the button when pressed | HEX color | #00112233 | No |
| Button Label | Text shown in the button | Text | Order Now | Yes |
| Action | Action triggered when the user taps the button | Action (see Actions) | Order | No |
2. Big Image List
The Big Image List displays content in a slider with large image cards. A single card fills most of the screen, with the edge of the next card visible to indicate more content is available.
It includes a header and an item list. If you select a default content type, the header can include a link. You cannot use a header link with custom items.
Use the Big Image List to showcase:
- News articles
- Offers
- Rewards
- Promotions
- Nearby venues
- Custom items (custom image, text, and action)
Required attributes:
| Attribute | Description | Type | Example Value | Localizable |
|---|---|---|---|---|
| Header Title | Text shown in the header. Leave empty to hide the header. | Text | Offers | Yes |
| Header Link | Text shown in the header link. Leave empty to hide the link. | Text | View All | Yes |
| Image Visible | Whether an image is shown for each item | Yes/No | Yes | No |
| Title Visible | Whether a title is shown for each item | Yes/No | Yes | No |
| Description Visible | Whether a description is shown for each item | Yes/No | Yes | No |
| Content | Type of content shown in the component | Content (see Default Content Types) | Offers | Yes |
Configuration examples:
- Header title and link set; image visible; title visible; description hidden; default content type: News or Coupons
- Header title and link set; image, title, and description all visible; default content type: Rewards or Promotions
- Header title and link set; image visible; title and description hidden; content type: News
- No header; image visible; title and description hidden; custom item with a defined image and action
3. Small Image List
The Small Image List displays content in a slider with medium-sized image cards. The same rules as the Big Image List apply.
It includes a header and an item list. If you select a default content type, the header can include a link. You cannot use a header link with custom items.
Use the Small Image List to showcase:
- News articles
- Offers
- Rewards
- Promotions
- Nearby venues
- Custom items (custom image, text, and action)
Required attributes:
| Attribute | Description | Type | Example Value | Localizable |
|---|---|---|---|---|
| Header Title | Text shown in the header. Leave empty to hide the header. | Text | News | Yes |
| Header Link | Text shown in the header link. Leave empty to hide the link. | Text | See All | Yes |
| Image Visible | Whether an image is shown for each item | Yes/No | Yes | No |
| Title Visible | Whether a title is shown for each item | Yes/No | Yes | No |
| Description Visible | Whether a description is shown for each item | Yes/No | Yes | No |
| Content | Type of content shown in the component | Content (see Default Content Types) | News | Yes |
Configuration examples:
- Header title and link set; image visible; title visible; description hidden; default content type: News or Coupons
- Header title and link set; image, title, and description all visible; default content type: Rewards, Promotions, or Nearby
- Header title and link set; image visible; title and description hidden; content type: Coupons
- No header; image visible; title and description hidden; custom item with a defined image and action
4. Venue List
The Venue List shows nearby venues on your home screen. You can also display nearby venues using the Big Image List or Small Image List components.
Required attributes:
| Attribute | Description | Type | Example Value | Localizable |
|---|---|---|---|---|
| Header Title | Text shown in the header. Leave empty to hide the header. | Text | Nearby | Yes |
| Header Link | Text shown in the header link. Leave empty to hide the link. | Text | See All | Yes |
| Venue Name Visible | Whether the venue name is shown for each venue | Yes/No | Yes | No |
| Distance Visible | Whether the distance is shown for each venue | Yes/No | Yes | No |
| Address & Opening Hours Visible | Whether the address and opening hours are shown for each venue | Yes/No | Yes | No |
| ORDER WITH APP Tag Visible | Whether the ORDER WITH APP tag is visible for each venue | Yes/No | Yes | No |
5. Text View
The Text View component displays a title, informational text, and an optional link with an action. Use it for informational messages or to direct users to an external page or deep link.
Required attributes:
| Attribute | Description | Type | Example Value | Localizable |
|---|---|---|---|---|
| Title | Title text to display | Text | Covid-19 restrictions | Yes |
| Info | Informational body text to display | Text | During this unprecedented time of the COVID-19 restrictions we accept only take-out and delivery orders. | Yes |
| Link | Text shown for the link | Text | Learn more | Yes |
| Link Action | Action triggered when the user taps the link | Action | URL (https://google.com) in in-app browser | Yes |
You can use this component with any combination of its elements:
- Title and info text
- Title and link
- Title only
- Info text and link
6. Feature-Based Components
These components are only available when specific features are enabled for your brand's app.
Referral Component
If your app has the referral program enabled, the Referral component appears on the home screen.
7. My Order Component
The My Order component is visible only when a user is logged in and has placed at least one order.
Note: The font, asset, link, and font color of this component are determined by the white-label app and cannot be customized per brand. The position of the component on the home screen is also set by the white-label app. This component is available from release v4.24.
Ready-Made Templates
Below are a few examples showing how you can structure your home screen using a combination of the components above. (See the published article for screenshot examples.)
Definitions
Actions
Use these actions to configure button and link behaviors across components.
| Option | Description | Can Be Opened In | Notes |
|---|---|---|---|
| News | Opens the list of News articles | N/A | |
| Order | Opens the Order tab | N/A | |
| Rewards | Opens the Rewards tab | N/A | |
| Offers | Opens the Rewards page, Offers tab | N/A | |
| Promotions | Opens the Promotions screen | N/A | |
| Venues | Opens the Store Finder list screen | N/A | Not available for the Hero component |
| Custom URL | Opens the URL in an external browser (Safari or Chrome) | External Browser |
Note for reviewer: Article 1 uses "Offers" and Article 2 uses "Coupons" in the Actions and Default Content Types tables. Please confirm the correct term before publishing.
Default Content Types
| Option | Description |
|---|---|
| News | List of News articles configured in the CMS |
| Offers | List of Offers available to the user |
| Rewards | List of Rewards configured in the CMS |
| Promotions | List of Promotions available to the user or device. If the user is not logged in, a prompt to sign up or log in is shown. |
| Venues | List of nearest venues |
Custom Content
Supported by the Big Image List and Small Image List components.
| Attribute | Description | Type | Example Value |
|---|---|---|---|
| Image | Image to display in the item. Must have a 3:2 aspect ratio. | URL or other image resource | www.google.com |
| Title | Title text to display in the item | Text | Welcome to the new venue! |
| Description | Description text to display in the item | Text | The newest venue in town. Check it out! |
| Action | Action triggered when the user taps the item | URL | www.google.com |
Home Screen Images
Home screen images appear as the welcome image on the home screen of your app. You can choose between a regular or compact layout.
Important: Do not place text or logos outside the safe area. Text and logos outside this area will be hidden by the button or status bar. For brands with Loyalty, the safe area dimensions are different. See Mobile: Loyalty for the correct requirements.
Regular Home Screen Image
| Requirement | Value |
|---|---|
| Image size | 1125 × 1665 px |
| Safe area | 1125 × 1205 px |
| Format | PNG or JPG |
| Filename | hero_image.png |
Compact Home Screen Image
| Requirement | Value |
|---|---|
| Image size | 1125 × 996 px |
| Safe area | 1125 × 580 px |
| Format | PNG or JPG |
| Filename | hero_image_compact.png |
