[V6] (P) Quantity Element

What is a (P) Quantity?

The (P) Quantity element allows customers to specify how many of that product they want to add to their cart by clicking on (+), (-) buttons, or inserting a specific number. In the editor pages of GemPages, you can drag it from the left sidebar or in the Search box at the upper left corner.

Settings tab’s parameters

Update Price

If you enable this feature, the price will change accordingly to the number of added items. For example, if one item costs $18, the price will display $36 if 2 items are added.

Show label

Toggle on or off to enable or disable the label of the quantity box.

In More Settings, you can adjust the label of the quantity box as below:

• • Label: You can give a name for the quantity box here.
  • Margin Bottom (in pixel), Font Size (in pixel), Line Height (in em): For these parameters, you just simply adjust the slider to configure them.
  • Color: It allows you to set the color for the number.
  • Font weight: Select your preferred font weight for your label from the drop-down menu.
  • Font: You can choose any fonts which are available in the Font Manager or add any custom fonts from external sources. For better page loading and graphic design, the maximum font displayed on a page is three fonts. However, there is no limit to configuring fonts in your store. Learn how to add a custom font to your site here.

Dimension

• • In this setting, you can toggle on the Stretch setting to maximize the width of the quantity box.
  • Input Width and Input Height allow you to modify the size of the number button.
  • Meanwhile, Button Width allows you to adjust the size of the (+), and (-) button.

Display

Select a style for the quantity box from the three options below:

• • Default: Display the quantity label and the number in separate lines.
  • Inline: Display the quantity label and the number in a line.
  • Simple: Display without the label, (+), and (-) buttons.

Input Number

Modify the number in the quantity box

• • Font Size: For this parameter, you just simply slide the adjustment bar from left to right and vice versa to configure them.
  • Color: It allows you to set the color for the number.
  • Font: Choose the font for your number from the drop-down menu. Click on “Font manager” to explore more fonts available on GemPages. In case you want to use a custom font, kindly take a look at this article.

Default Quantity

Set the default number that appears with the product.

Alignment

This parameter allows you to determine how the text is positioned within the selected text box. The four primary types of text alignment include left-aligned, centered, right-aligned, and justified.

Extra Class

If you wish to customize the content element particularly, please use this field to add a class name and then refer to it in the CSS file.

How to make a quantity box as a circle

Under the Design tab, you can make a circle button by adjusting the Border Radius and Border Width up to the maximum value.