How to Cancel & Refund an Order

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.

Swipe displayType


Swipe

displayType = "swipe"

Uses half-height full-width image, with a list of text "Cards" below. Useful for products which requires larger image.

List with Hero


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.

List with Thumbnail


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

Config worksheet OC Products

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.

  • swipe
  • listWithHero
  • listWithThumbnail

Warning: the capitalization must be followed exactly.  first character is always lowercase, followed by camel-case for the rest of the label.

Category Page

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.