About product selection screen layouts
To present each Product option or SKU, there are currently 3 screen layouts available, each with its own characteristics and suited to different complexity of product.
displayType = "swipe"
Uses half-height full-width image, with a list of text "Cards" below. Useful for products which requires larger image.
Wide Image List
displayType = "listWithHero"
This features a 2:1 aspect ratio image with a text area below which automatically resizes to accommodate more content.
Square Thumbnail List
displayType = "listWithThumbnail"
This layout is useful for long product lists or attributes where a larger image is not required to show the particular product.
How to change Display style
The attribute to look out for which defines this screen type is “displayType“.
Open the Official Configuration Sheet for your App.
Go to the worksheet named (OC) Products. This worksheet is where all your Products and their attributes are listed.
Then find all the “subcat” columns. There should be about 6 sub-category columns. Most Apps will not use more than 3 sub-cats. Each sub-cat typically means one step in the product option selection process for your user, and we counsel using no more than 3 steps as far as possible.
Now look for the JSON tag “displayStyle” and replace it with the desired display style as written below.
Warning: the capitalization must be followed exactly. first character is always lowercase, followed by camel-case for the rest of the label.
There is a 4th display design called the “Page” that is available ONLY for top-level Categories only. To learn how to set this up, review this section in “Welcome to your Home Page”
Tutorial on Setting up the Category Page with Carousel.