1. Home
  2. Docs
  3. App Builder – User Guide
  4. Screen
  5. Product detail

Product detail

Video demo for Product Group:

Link to config: Go to Admin panel > choose [App Builder] > Select a template that you want to update > Choose option [Product detail] on the dropdown.

1. Configuration tab

2. Set up the Detail product page

2.1. General tab

Note: On the product detail page, each element will correspond to a row on app builder.

Product Gallery

Direction
Vertical: Image moving direction is set up vertically
Horizontal: Image moving direction is set up horizontally
SizeWidth: set the width of image
Height: set the height of image
Box Fit– Fill: The image is resized to fill the given dimension. If necessary, the image will be stretched or squished to fit.
– Contain: The image keeps its aspect ratio, but is resized to fit within the given dimension.
– Cover: The image keeps its aspect ratio and fills the given dimension. The image will be clipped to fit.
– Fit width: the image will be fit width
– Fit height: the image will be fit height
– None: The image is not resized
– Scale Down: the image is scaled down to the smallest version of none or contain
Product Content BlocksThe section will include all of elements that will be shown on Product detail page, each element will correspond to a row.
Horizontal Alignment
Vertical Alignment
DividerAdd more a divider to separate the elements
Columns
Block TypeUser can choose an attribute that will be shown on the product detail page
Flex
AlignmentAlignment the element: Left, center, right
Padding / MarginSet up the padding/margin for the current row
Expand Set up the default status for description, addition information, reviews: expand or collapse.
Foreground ColorSet background color for the current row
Add columnThis function allows users to add 1 or more Block types on the same row.

2.2 Style tab

Background Color
Product Gallery Indicator
IndicatorSet up the type of indicator: Dot, image, number
AlignmentSet up the location to show indicator
ColorSet up the color of indicator
Note: only apply for Dot, Number type
Active colorSet up the color for active indicator
MarginSet up margin for indicator
SizeSet up the size for indicator
Note: only apply for Image, Dot types
SpaceSet up space for indicator
Border radiusSet up border radius
Note: only apply for Image, Number types
Active sizeSet up the size for active indicator
Note: only apply for Dot type

2.3 Layout tab

There are 3 available layouts: Default, Zoom slideshow, Scrollable.

Was this article helpful to you? Yes No

How can we help?