The Home Screen is where every user will start from. Let’s take a tour. There are two layout models for the Home Screen to choose from:
Horizontal Scroll
Product Category images scroll sideways in two rows. They are about 7/8ths the width of the screen, and gets about 37% of the height of the screen.
Vertical Scroll
Product Category images scrolls vertically. This model also supports two widths of product category cards: Full Width (2:1 aspect ratio) and Half-width (1:1) where the card is half the width of the screen.
Promo Banner Row
Both models will also have a horizontally scrolling Promo banner area. This is optional. If no promo banners are added in your backend, then the bottom two rows will divide the available space evenly between them, resulting in cards which may be slightly taller than they are wide as most phones have a 21:9 aspect ratio.
Text Divider Labels
The 3 Text Labels which titles the Promo banner, Row 1, and Row 2 are all optional and hot-swappable. If none are setup, then the space is reclaimed. In the slideshow on the right, you will see multiple examples of various white labels with no dividers, or just one divider.
Category Tile Sizes
From v4.0 (Oct’23) we have added one more home screen display size for Category images.
Changing Home Screen Section Labels
Step 1: Go to Catalog > Options > Home
You may see several items there. Look for Home and click the Edit icon. (blue pen icon on the right)
Step 2: Look for “Option Value Name”
Enter the Labels you want to use for each section in your Home Screen. You can only have 3 sections: One for the Promo Banners, and two labels for Product Categories.
How to add or change the "Ribbon" text label
The Ribbon Text label is an optional call-out highlight element which can appear on any Category and Product image from the top left corner and is localizable for multi-language apps.
The ribbon background color, font and font colors are fixed by the White Label App color scheme and cannot be changed via the dashboard. Only the Label text can be edited.
To add this ribbon label on any Category or Product Image, look for the “Meta Tag Description” field in any Category or Product General setup page.
Warning: Watch for the number of characters used as this depends on device screen sizes, whether the Category is set to “half-width” if you are using a vertical scroll mode, and what image is being used.
How to set Vertical or Horizontal Scroll Home Screens
Starting June 2022, we are making Vertical scroll home screens available to all V3 white labels and will be default for all new white-label apps. If you want to change your horizontal home screen to the Vertical one (by far more popular), this is how you do it.
IMPT: Image requirements differ slightly between the two modes. So after changing, make sure you check all your home screen images (Category and Banners) to make sure they fit. More info on image requirements here.
Go to Catalog–> Filters
Do NOT be confused by the Filters field in the Category screens (as below).
You should see a homePageDisplayStyle. If you do not, click the “+” symbol (top right) and add it yourself.
In the next screen (“Filters”), set it to “vertical” or “horizontal” all lower-case. Again, if there are no filter names available yet, click “+” (blue icon bottom right) to add it.
Vertical Scroll: How to set some Categories to half-width
If your app uses the Vertical Scroll Home screen mode, then you can set up some Product Categories to take up half the width of the default Product Category image size. This is useful to segment more niche products and prevent too much vertical scrolling.
In your Category edit panel, look for “Filters” and type in “half” and you should find the filter “categoryDisplayWidth > half“
Warning: the next Category item must also be configured to be half-width, or you will end up with a blank space.
Horizontal Scroll: How to ensure a Category is on the Top Row
Go to Catalog > Categories and hit the Data tab.
From here, you can change out the Image for that Category, and check the box in the field “Top“.
To control the left to right positioning, set the Sort Order of this Category accordingly.
