1. Home
  2. Docs
  3. App Builder – User Guide
  4. Widget catalog
  5. Hand-picked Products

Hand-picked Products

For this widget, users are able to config to display a list of hand-picked products – it means, users can pick any product they want to show on App.

1. General tab

ProductsUsers can select 1 or multiple products on this field to make sure they will be displayed on App
Load ItemsThis field allows users to control the product number that will be displayed on App
Enable Load moreExample:
– Setting [Load items] = 4
– Setting [Enable load more] = Yes
– Total Hand-picked products = 10
On App, the Hand-picked product block will only show 4 first products and a [Load more] button (https://ibb.co/bKg6GsT). If user click on [Load more] button, the next 4 products will be shown and [Load more] button still show below them.
Note: this function only applies for layouts: List, Masonry, Grid, Big first.
Select templateThere are 5 templates that users can use for their products:
– Item contained
– Item horizontal
– Item emerge
– Item vertical
– Item vertical center
Width x HeightSetting the size to product block
Image sizeUsers can choose 1 in 7 size types to show product image
Enable label new
Enable label sale
Enable rating
Setting to show/hide each element

2. Style tab

Config Section
Padding/ MarginSet Padding/Margin for whole section
Background colorSet background color for the section
Pad itemSet padding for each product item
Divider with
Divider color
Setup width and color for the divider that separate product items
HeightOnly apply for Carousel layout
Column/ RatioSet column number and ratio for Grid layout
Indicator color
Indicator active color
Set color for indicator, only apply for Slideshow layout
Config item
Background colorSet background color for product item
Text colorIt applies for Product name
Subtext colorIt applies for Rating icon
Price colorSet color for price (when price without discount)
Sale price colorSet color for sale price
Regular price colorSet color for Regular (original) price
Border radius
Border radius image
Set radius for product item and product image
Label newUsers are able to set: Background color, On color, Border radius for “New” label
Label saleUsers are able to set: Background color, On color, Border radius for “Sale” label
Box shadowUsers are able to set up shadow for their product block with: Shadow color, Offset X, Offset Y, Blur radius, Spread radius

3. Layout

There are 6 available layouts to users can use.

ListThe posts will be displayed as a list 
CarouselThe posts will be displayed as a carousel
Note: For this layout, users should config [Height] on Style tab
MasonryMasonry layout is a layout method where one axis uses a typical strict grid layout, of most often columns, and the other a masonry layout.
Big firstThe first post will be displayed the biggest on the list. For other posts, users can set another template on General tab.
Ex: use template Item Horizontal
SlideshowThe posts will be displayed as a slideshow.
GridThe posts will be displayed as a grid.
Note: users can config number of column at field [Column] on Style tab. AND use [Ratio] to setup the height of block
Was this article helpful to you? Yes No

How can we help?