About product selection screen layouts
4 screen 9 layouts [a property called “displayStyle“] to present each Product option or SKU and 2 page designs for Categories. Each has its own characteristics and user experience suited to different complexity of product attributes.
Half Page Image Series
Ensures half the screen height is your image. One large image plus half screen height of text per product attribute. Useful is you need lots of text to explain each step in the product selection flow.
This is the original "swipe" from v3 (2021). Text cards below, which corresponds to an image on top. Image is half the height of screen.
This is Swipe 2.0 (v4, late 2023). Subtle design change where the price and Product Title is vertically centered in the text cards below.
Widescreen Image Series
This design will automatically expand it's height if there are more text, but always maintain the 2:1 aspect ratio of the product image. Good for moderate amounts of text, and widescreen image.
Card is always square, with top 60% reserved for image. Price is also shifted to the left to be near the main text body. (useful for paragraph level text body which will not break up into two columns.)
Allows more text. 3/5ths height of the square card is reserved for text, with only 2/5ths for the image. This is useful if you should have alot of text. Else, the listWithHero will be more apt.
Square Thumbnail Series
The square thumbnail is encased in the card with rounded corners. A more modern take on the original thumbnail list.
Thumbnail is always square. The card can expand vertically if there are long paragraphs of text, always remaining square.
When there is really no image to show, and a simple line of text suffices. (like indicating lengths of poster clasps)
How to change Display style
The attribute to look out for which defines this screen type is “displayStyle“.
Open the Official Configuration Sheet for your App.
Then find all the “attribute: subCat” columns. There should be about at least 3 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.
Complete list of “displayStyle” (from v4 – Oct 2023)
Warning: enter them EXACTLY as shown above. All OC sheets should already have a drop-down list to choose from so you won’t make any typo mistakes.
swipe fullCarousel swipeVCentered listWithHero listWithHeroSqCardLessText listWithHeroSqCardMoreText listWithThumbnailFullHeight listWithThumbnail listWithTextOnly
! BE AWARE – You need to change the displayStyle attribute in ALL the products (rows) that show up on that screen (subcat) or else you will get unpredictable results on your app. Make sure you also read about how the subCat hierarchy works and how it defines the number of steps and product options your user will be presented with along the product selection flow.