For this widget, users are able to create as many tabs as they want. Each tab will be corresponding to an item refer here.
1. General tab
| Pad tab | Setting padding for this section |
| Items | Users are able to create as many tabs as they want |
| Name | Set name for the tab |
| Type item | There are 6 types that users can choose: list, carousel, masonry, big first, slideshow, grid. |
| Filter by | |
| Keyword | Users can input a keyword into this field, so the products that have product name/description is mapping with this keyword will be shown. |
| Tags | Users can filter products by tags by choosing 1 or multiple tags (by clicking Shift + select tag) |
| Categories | Users can filter products by category by choosing 1 or multiple categories. |
| Include Products | Users can filter products by selecting one by one on this field. |
| Load items | Limit product number will be shown on App |
| Enable load more | Example: – Setting [Load items] = 4 – Setting [Enable load more] = Yes – Total products = 10 ——————————————— On App, the product block will only show 4 first products and a [Load more] button refer here. 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 template | There are 5 templates that users can use for their products: – Item contained – Item horizontal – Item emerge – Item vertical – Item vertical center |
| Width x Height | Setting the size to product block |
| Image size | Users 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/ Margin | Set Padding/Margin for whole section |
| Background color | Set background color for the section |
| Pad item | Set padding for each product item |
| Divider with Divider color | Setup width and color for the divider that separate product items |
| Height | Only apply for Carousel type item on General tab refer here |
| Column/ Ratio | Set column number and ratio for Grid type item on General tab refer here |
| Indicator color Indicator active color | Set color for indicator, only apply for Slideshow layout |
| Config item | |
| Background color | Set background color for product item |
| Text color | It applies for Product name |
| Subtext color | It applies for Rating icon |
| Price color | Set color for price (when price without discount) |
| Sale price color | Set color for sale price |
| Regular price color | Set color for Regular (original) price |
| Border radius Border radius image | Set radius for product item and product image |
| Label new | Users are able to set: Background color, On color, Border radius for “New” label |
| Label sale | Users are able to set: Background color, On color, Border radius for “Sale” label |
| Box shadow | Users are able to set up shadow for their product block with: Shadow color, Offset X, Offset Y, Blur radius, Spread radius refer here |
3. Layout
There is only 1 available layout to users can use. It is Horizontal.
