1. Home
  2. Docs
  3. App Builder – User Guide
  4. Widget catalog
  5. Product Tabs

Product Tabs

For this widget, users are able to create as many tabs as they want. Each tab will be corresponding to an item https://prnt.sc/12q62o3.

1. General tab

Pad tabSetting padding for this section
ItemsUsers are able to create as many tabs as they want
NameSet name for the tab
Type itemThere are 6 types that users can choose: list, carousel, masonry, big first, slideshow, grid.
Filter by
KeywordUsers can input a keyword into this field, so the products that have product name/description is mapping with this keyword will be shown.
TagsUsers can filter products by tags by choosing 1 or multiple tags (by clicking Shift + select tag)
CategoriesUsers can filter products by category by choosing 1 or multiple categories.
Include ProductsUsers can filter products by selecting one by one on this field.
Load itemsLimit product number will be shown on App
Enable load moreExample:
– 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 (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 type item on General tab https://prnt.sc/12q7hjx
Column/ RatioSet column number and ratio for Grid type item on General tab https://prnt.sc/12q7hjx
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
https://prnt.sc/11kevu7

3. Layout

There is only 1 available layout to users can use. It is Horizontal.

Was this article helpful to you? Yes No

How can we help?