Start here: Home Screen 101

This is your home screen.  From June 2022, the Home Screen of the app will get a slight facelift with additional display options as App operators push out more product categories.

Regardless of the design of your particular white label, the top left corner (top-right in Hebrew) will slide out the “Side Menu“.

The top row is typically where you can setup the “Promo Banner” area.  

In the Horizontal Scroll mode, there will be two rows of Product Category images.  In the Vertical Scroll mode, these will form an infinite list.

There are 3 text strings called Category Section Labels and these can also be changed from the dashboard.  Learn how to do it here.

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)

Catalog-Options-Home
home screen category section labels
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

Ribbon-text
Meta-tag-description Ribbon Text

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

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.

Homepag DisplayStyle Filter

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.

 

 

half-width category
Category-half-width

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.

Setting to Top Row

How to set up a Category Page

Category Page Carousel

The Category Page with an image Carousel option is designed for products which may require more information to educate and inform customers.

It has several key features:

  • Image Carousel is an added feature.  You can set this to a single image which will give you a static page.  The image area is half the height of the screen after removing the top status bar and the bottom Call to Action bar. 
  • Captions on each Image with a background half-transparent bar (colors are fixed by UI color scheme of app)
  • Title and Sub-title text treatment, always center-aligned.
  • Vertical scrollable center-aligned text body.  This allows you to add as much text as you require and will also ensure short phones will not cut off your content.

This is a special “Page” displayType only available for Product Categories.  If you choose not to enable this “Page” feature for any particular Category, then upon clicking it, it will immediately go to showing the various Products under that Category.

Preparing Images: The images are typically almost square on most phones.  On short phones, they will end up slightly wider than tall.  Be sure to prepare images with key content which are not too close to the top and bottom edges.

STEP 1: 

Go to the target Category “Data” tab and find the “Filters” field.

Type in “page” and you should find the filter listed “categoryDisplayStyle>page

Adding content to Category Page
STEP 2: 

To add text content which shows up in the bottom half of the page:

Title goes into the field “Meta Tag Title

Body text goes into “Description” field.  Type in all the text you want.  Take note that they will be center-aligned , regardless of the text control settings in that field.

To add an Image Carousel, look for the “Meta Tag Keywords” field at the bottom of the General tab.

Category Page

You will now need to enter a block of JSON code.  

Simply copy the block of code below and replace the blue-colored-text between the “quotes” for your subtitle, the filenames of each of the images and their respective captions.  If you want more than 3 images in the carousel, simply copy & paste the entire line

{"image":"xxx", "captions":"yyy"}   

making sure there is a comma after each line which describes each image EXCEPT after the last line.

{ 
"subtitle":"MySubtitle",
"carousel":"
[
{"image":"filename_1.jpg", "caption":"caption_1"} ,
{"image":"filename_2.jpg", "caption":"caption_2"} ,
{"image":"filename_3.jpg", "caption":"caption_3"}
]
}