App Builder Widgets
Last updated
Last updated
To have a slideshow as expected displays on your app, you should configure it first on the Back-end panel by: Go to Admin panel > choose [App Builder] > Select a template that you want to update > Choose option [Home] on the dropdown > Drag Slideshow widget into the builder.
1. Layout:
For this widget, users can insert a slideshow into their Homepage with 5 layouts: Basic, Center mode, Stack, Tinder, Rotate on “Layouts” tab.
2. General configuration:
On “General” tab, users can customize their slideshow with many options:
Autoplay Swiper
Yes: the slideshow will be played automatically No: autoplay will be disabled.
Indicators
Show/hide indicators
Autoplay delay(ms)
Setting delay time (ms) It is only effective when “Autoplay Swiper” = Yes
Autoplay interval(ms)
Setting interval time to autoplay It is only effective when “Autoplay Swiper” = Yes
Width x Height
Setting width/height for slideshow image Default is 375 x 330
Direction
There are 2 options: Vertical and Horizontal – Vertical: the slideshows will move vertically (up – down) – Horizontal: the slideshow will move horizontally (right – left)
3. Content block
For this section, please note that:
– Each item is corresponding to a slideshow.
– Each element on the slideshow is corresponding to a layer item.
– A slideshow item can have 1 or many layer items.
– For each layer item, there are 4 types: Text, Button, Image, Icon to select.
Config for Slideshow item
Choose image
Select an image for slideshow
Image size
Set width x height for the image
Box fit
Set how the image is displayed
Config for Layer item
Type = Text
Users are able to: – Set position for the text on the slideshow – Set Text content – Set an action when customer click on the text
Type = Button
Users are able to: – Set position for the button on the slideshow- Set button name (Text field) – Set background color, button color, button border width, button size, button border radius – Set an action when customer click on the button
Type = Image
Users are able to: – Set position for the button on the slideshow – Text field: to name for the button, will not show on the slideshow. – Select an image to show – Set image size – Set an action when customer click on the button
Type = Icon
Users are able to: – Set position for the Icon on the slideshow – Text field: to name for the icon, will not show on the slideshow. – Select an icon to show – Set icon color, icon size – Set an action when customer click on the button
Position
– Left, Top, Right, Bottom: set a distance between the current layer item (text, image, button, icon) and 4 margins. – Width, Height: when users input values for these fields => the system will create a textbox automatically, allows users to enter content only in that textbox so users can configure a layer item more quickly. Note: In 3 fields: “width, left, right” or “height, top, button” will always have one of them get disabled, we can’t set 3 fields at the same time.
Duplicate a Layer item
Click on copy_icon to duplicate the current layer item
Move up/down a Layer item
Users are able to use this function to set a layer item above another one.
Delete a Layer item
Click on delete_icon to remove the current layer item
4. Style configuration
On “Style” tab, users can set up: padding, margin, animation, Background Section, Indicator color, Indicator Active color.
To have a slideshow as expected displays on your app, you should configure it first on the Back-end panel by: Go to Admin panel > choose [App Builder] > Select a template that you want to update > Choose option [Home] on the dropdown > Drag Banner widget into the builder.
1. Layout
For this widget, users can insert a Banner into their Homepage with existing 6 layouts on “Layouts” tab.
2. General
Width x height: set the size of the banners (this is only for layouts: List, Carousel, Slideshow).
Item: Each item is corresponding to a banner:
– Choose template: there are 10 templates that users are able to choose for each banner.
– For each template, there are different configurations. Users will base on them to set the banner as expected.
– Then users are able to set the redirection for each banner when they click on it via [Choose action] field.
3. Style
For this tab, users are able to set up Padding/Margin or Background color/Background image for the banner widget.
Also, users can set up Padding, Background color, Border radius for each banner.
Additionally, for layouts that show indicators, users totally can set up Indicator color or Indicatore active color.
Users can create a new divider with 4 types: Solid, Dashed, Dotted, None and custom size as they want.
This widget allows users to add a blank space between 2 other widgets. User can set the height of the widget on [General] tab or set padding/margin and background color on [Style] tab as normal.
This widget allows users to make a custom text on Homepage with redirecting to pages/screens: Home/ Category/ Product list/ Product detail/ Cart/ Profile/ Wishlist/ Contact when users click on this.
For this part, users can create a heading for Homepage with 4 layouts: Default, Divider, Corner and Vertical.
General
Leading
This section is to set up displaying for the text that is on the left: Text, Center title, Enable icon, Icon sidebar
Action
This section is to set up displaying for the text that is on the right: Text, Enable icon, Icon sidebar
Style
General
Set Padding, Margin, Background color for the section
Divider
– Divider color: set color for the divider – Divider height: set height for the divider Note: 2 fields should be used for only Divider layout.
Border radius
Border Radius Top Left Border Radius Top Right Border Radius Bottom Left Border Radius Bottom Right=> users are able to set up Border radius for each corner Note: 4 fields will be applied for only Corner and Vertical layouts.
Layout
Select layout
There are 4 layouts that users are able to choose: Default, Divider, Corner and Vertical.
This widget allows users to make a button on Homepage with redirecting to pages/screens: Home/ Category/ Product list/ Product detail/ Cart/ Profile/ Wishlist/ Contact when users click on this.
General
Title Button
Input title button as you want
Choose Action
Set action when user click on the button
Full width
Yes: Button width will full screen No: Button width will base on the text length
Enable Icon
Enable/Disable button icon
Change Icon
User can change the button icon as expected
Icon Left
No: the icon is on the right of the title button Yes: the icon is on the left of the title button
Style
Padding/Margin
Set up Padding/Margin for the button
Height input
Set height for the button
Background Color Section
User can set Background color for this section
Border Radius
User can set border-radius for the button
Layout
There are 3 layouts: Contained, Outlined, Text
The app builder already has supported playing video on the app. So users are able to be easy to insert the video URL then it will be shown on the app as expected.
General tab
Width
Set width for the video widget
Height
Set height for the video widget
URL
Input URL of the video from library Note: To up a video to the library, please follow the steps below: 1. Admin > Media > Library > Add new 2. Upload your files 3. Click the file that just uploaded > copy the URL on [File URL] field 4. Then using this URL to set up Video widget
Style tab
Padding / Margin
Set padding/margin for the video widget
Background color
Set background for the video widget
For the video from YouTube, users only input URL that gets from Youtube then fill out [URL] field, the app will play this video without any backing player.
General tab
Width
Set width for the video widget
Height
Set height for the video widget
URL
Input URL of the video that gets from YouTube
Style tab
Padding / Margin
Set padding/margin for the video widget
Background color
Set background for the video widget
General
Background color Item
Set background color for testimonial
Border radius Item
Set border radius item for testimonials. Maximum is 50
Padding Item
Set the space between 2 testimonial (if any)
Items
User can create 1 or more testimonials with 2 templates, then can set up image, title, description for each testimonial
Style
User can set up: Margin, Padding, Background color for all testimonials
1. Generral
Icon
Allow users to choose an icon from the library
Title
Set title for the icon. It will be shown next to the icon
Description
Set description for the icon. It will be shown next to the icon title
Alignment
Set the alignment for the icon, title, description Note: only display when users choose template = Item default
Add item
Allow users to add more icons as they want
2. Style
Config Section
Padding / Margin
Set padding/margin for the whole section
Background Color
Set background color for the whole section
Pad Item
Set space between icons (in case there is more than 1 icon)
Height / Max width
Set height/width for icons Note: only apply for carousel layout
Column / Ratio
Column: Users can set column numbers in case there is more than 1 icon. Ratio: User should set value for this field to display clearly icons Note: Only apply for grid layout
Indicator color
Set color for the indicator Note: Only apply for slideshow layout
Indicator Active color
Set color for the active indicator Note: Only apply for slideshow layout
Config Item
Background color
Set background color for each icon item
Border color
Set border color for each icon item
Border Radius
Set radius for each icon item
Config Icon
Enable box icon
Show/hide box icon Ex: Disable Enable
Color icon
Set color for the icon
Size icon
Set size for the icon
Size box icon
Set size for the box icon
Box color icon
Set box icon color
Border color icon
Set color for box icon border
Box Shadow
User can set: Shadow color, Offset X, Offset Y, Blur radius, Spread radius to show shadow for each icon item
3. Layout
Carousel
The icon list will be shown as a carousel
Masonry
The icon list will be shown as a masonry
Slideshow
The icon list will be shown as a slideshow
Grid
The icon list will be shown as a grid
General tab
Title
Set title for the section
Choose Action
Allow users to set up the destination once they click on this
Due Date
Determine the due date and due time
Days/Hours/Minutes/ Seconds/ Separator
Show/hide each element
Style
General
Users are able to set up: Padding, Margin, Background color section, Padding content
Config time
Users are able to set up: Background Time Border Time Color Time Separator Color Time Padding Separator
Layout
Select layout
There are 2 layouts to select: Horizontal and Vertical
This widget allows users to insert a HTML to Homepage.
For this function, it is required by 2 libraries:
After installing them, users can create a new form by themself as a Subscribe form and Contact form. On this part, we are mentioning to Subscribe form.
After dragging Subscribe widget to Home page, we can config it with fields below:
General tab
Text heading
Set heading text for the form
Text description
Set a short description for the form
Placeholder
Set placeholder for the input field
Field name
Two fields should be completed by a developer or who has knowledge about technical. – Get form ID – Get field name
Form ID
Button text
Set text for the button
Style
Padding
Set padding for the form
Margin
Set margin for the form
Background color
Set background color for the form
Background image
Set background image for the form
Layout
Select layout
For this time, only has 1 exist layout: Default
General
Alignment
User can set social icon on left, right or center
Padding item
Distance between 2 social icons
Link social
Get link URL of this social
Change icon
Select icon for this button social
Background color
Select background icon for this button social
Icon color
Select color icon for this button social
Enable Button Round
Set this button social is round or not. Default is false
Enable Button Out Line
Set this button social have border or not. Default is true
Style
Easy to set up: padding, margin, background color
For this widget, users are able to config to display a list of products that belong to a specific or multiple categories.
1. General tab
Exclude product
After setting up [Categories] field, users can select 1 or multiple products on this field to make sure they will NOT display on App
Limit Item
This field allows users to control the product number that will be displayed on App.
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 category 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 layout
Column/ Ratio
Set column number and ratio for Grid layout
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 Category name (if [Enable category] = Yes on General tab) and 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
3. Layout
There are 6 available layouts to users can use.
Carousel
The posts will be displayed as a carousel Note: For this layout, users should config [Height] on Style tab to show name/label clearly
Masonry
Masonry 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 first
The 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
Slideshow
The posts will be displayed as a slideshow.
Grid
The posts will be displayed as a grid. Note: users can config number of column at field [Column] on Style tab. AND use [Ratio] to set up the height of the block
For this widget, users are able to config to display a list of best seller products.
1. General tab
Load Items
This field allows users to control the product number that will be displayed on App
Enable load more
Example: – Setting [Load items] = 4 – Setting [Enable load more] = Yes – Total Best seller products = 10 ————————————————————– On App, the Best seller product block will only show 4 first products and a [Load more] button. 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 layout
Column/ Ratio
Set column number and ratio for Grid layout
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
3. Layout
There are 6 available layouts to users can use.
Carousel
The posts will be displayed as a carousel Note: For this layout, users should config [Height] on Style tab to show name/label clearly
Masonry
Masonry 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 first
The 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
Slideshow
The posts will be displayed as a slideshow.
Grid
The posts will be displayed as a grid. Note: users can config number of column at field [Column] on Style tab. AND use [Ratio] to set up the height of the block
For this widget, users are able to config to display a list of newest products.
1. General tab
Load Items
This field allows users to control the product number that will be displayed on App
Enable load more
Example: – Setting [Load items] = 4 – Setting [Enable load more] = Yes – Total Newest products = 10 ————————————————————– On App, the Newest product block will only show 4 first products and a [Load more] button. 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 layout
Column/ Ratio
Set column number and ratio for Grid layout
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
3. Layout
There are 6 available layouts to users can use.
Carousel
The posts will be displayed as a carousel Note: For this layout, users should config [Height] on Style tab to show name/label clearly
Masonry
Masonry 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 first
The 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
Slideshow
The posts will be displayed as a slideshow.
Grid
The posts will be displayed as a grid. Note: users can config number of column at field [Column] on Style tab. AND use [Ratio] to set up the height of the block
For this widget, users are able to config to display a list of Top rated products.
1. General tab
Load Items
This field allows users to control the product number that will be displayed on App
Enable load more
Example: – Setting [Load items] = 4 – Setting [Enable load more] = Yes – Total Top rated products = 10 ————————————————————– On App, the Top rated product block will only show 4 first products and a [Load more] button. 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 layout
Column/ Ratio
Set column number and ratio for Grid layout
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
3. Layout
There are 6 available layouts to users can use.
Carousel
The posts will be displayed as a carousel Note: For this layout, users should config [Height] on Style tab to show name/label clearly
Masonry
Masonry 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 first
The 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
Slideshow
The posts will be displayed as a slideshow.
Grid
The posts will be displayed as a grid. Note: users can config number of column at field [Column] on Style tab. AND use [Ratio] to set up the height of the block
For this widget, users are able to config to display a list of On sale products.
1. General tab
Load Items
This field allows users to control the product number that will be displayed on App
Enable load more
Example: – Setting [Load items] = 4 – Setting [Enable load more] = Yes – Total On sale products = 10 ————————————————————– On App, the On sale product block will only show 4 first products and a [Load more] button. 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 layout
Column/ Ratio
Set column number and ratio for Grid layout
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 to Product name
Subtext color
It applies to 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
3. Layout
There are 6 available layouts to users can use.
Carousel
The posts will be displayed as a carousel Note: For this layout, users should config [Height] on Style tab to show name/label clearly
Masonry
Masonry 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 first
The 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
Slideshow
The posts will be displayed as a slideshow.
Grid
The posts will be displayed as a grid. Note: users can config number of column at field [Column] on Style tab. AND use [Ratio] to set up the height of the block
For this widget, users are able to config to display a list of products that included specific or multiple tags.
1. General tab
Exclude product
After setting up [Tags] field, users can select 1 or multiple products on this field to make sure they will NOT display on App
Load Items
This field allows users to control the product number that will be displayed on App
Enable load more
Example: – Setting [Load items] = 4 – Setting [Enable load more] = Yes – Total the list of product by tags = 10 ————————————————————– On App, the Product by tags block will only show 4 first products and a [Load more] button. 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 layout
Column/ Ratio
Set column number and ratio for Grid layout
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 to 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
3. Layout
There are 6 available layouts to users can use.
Carousel
The posts will be displayed as a carousel Note: For this layout, users should config [Height] on Style tab to show name/label clearly
Masonry
Masonry 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 first
The 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
Slideshow
The posts will be displayed as a slideshow.
Grid
The posts will be displayed as a grid. Note: users can config number of column at field [Column] on Style tab. AND use [Ratio] to set up the height of the block
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
Load Items
This field allows users to control the product number that will be displayed on App
Enable Load more
Example: – 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. 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 layout
Column/ Ratio
Set column number and ratio for Grid layout
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
3. Layout
There are 6 available layouts to users can use.
Carousel
The posts will be displayed as a carousel Note: For this layout, users should config [Height] on Style tab to show name/label clearly
Masonry
Masonry 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 first
The 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
Slideshow
The posts will be displayed as a slideshow.
Grid
The posts will be displayed as a grid. Note: users can config number of column at field [Column] on Style tab. AND use [Ratio] to set up the height of the block
For this widget, users are able to config to display a list of featured products.
1. General tab
Load Items
This field allows users to control the product number that will be displayed on App
Enable load more
Example: – Setting [Load items] = 4 – Setting [Enable load more] = Yes – Total Featured products = 10 ————————————————————– On App, the Featured product block will only show 4 first products and a [Load more] button. 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 layout
Column/ Ratio
Set column number and ratio for Grid layout
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
3. Layout
There are 6 available layouts to users can use.
Carousel
The posts will be displayed as a carousel Note: For this layout, users should config [Height] on Style tab to show name/label clearly
Masonry
Masonry 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 first
The 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
Slideshow
The posts will be displayed as a slideshow.
Grid
The posts will be displayed as a grid. Note: users can config number of column at field [Column] on Style tab. AND use [Ratio] to set up the height of the block
For this widget, users are able to create as many tabs as they want. Each tab will be corresponding to an item.
1. General tab
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. 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
Column/ Ratio
Set column number and ratio for Grid type item on General tab
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
3. Layout
There is only 1 available layout to users can use. It is Horizontal.
Users are able to search by product name.
General
Placeholder
Set placeholder for search box
Enable Icon
Enable/disable search icon
Icon Left
Put search icon on left/right search box
Style
Config section
Set up Padding, Margin, Background color
Config Input search
Config: Background Color, Border color, Icon Color for search box
