Author: Anna Nguyen 734 views

From the left side, you will see the Quantity element in the list of elements. It is a very important element on your product page, it helps your customers to add the number of products to the cart.

1. Add button

From the Basic tabyou can drag and drop the Quantity element to anywhere that you are wanting to add the Element.

2. Configure the Element

2.1 Content

  • Title: Help you display the name of the quantity button.
  • Layout: You can choose the display style for the title in 2 styles: Vertical and horizontal
  • Spacing: You can set the space for the text area, known as Margin and Padding.
  • Alignment: You can change the position of the text to left, right, or center.

2.2 Design


This tab will help you to configure the element’s height.


  • Alignment: Set the horizontal alignment of the label. It can be leftright aligned or centered
  • Typography: Set the typography options for the label.
  • Text Color: Select the color of the label.
  • Text Shadow: Add a shadow and blur to the label.
  • Spacing: Select the space between the icons.

Quantity input

Width: Allows you to increase or decrease the width of the quantity input.

Minus and Plus

  • Size: Set up the size of the icon for each device.
  • Rotate: Allow to set the rotate degree for each device.

Also, you can set the effect for the button when you hover over it: You can set up WidthText colorBackgroundBorderBorder RadiusSpacing as normal and set an Hover Animation and also Transition Duration. These settings are only applied when hovering.

Leave a Comment

Enjoy a free 3-day trial. Then get your first month for $1. Try Now.