(P) Quantity element

In this article, you will learn about the (P) Quantity element and how to use it.

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. 

The (P) Description is a child-element of the Product module. You will need to drag this element into a Product module to make it work.

Settings tab's parameters

  1. 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. 

  2. 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 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: 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 configure fonts in your store. You can take a look at this article to know how to add a custom font to your site. 

  3. 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.

  4. Display: Select style for the quantity box 
    • 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 (-) button.
  5. 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: You can choose any fonts which are available in the Font Manager or add any custom fonts from external sources. 
    • Default Quantity: Set the default number that appears with the product.

  6. 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.

  7. 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 Settings tab, You can make a circle button by adjusting the Border Radius and Border Width up to the maximum value.

If you're interested in learning more about powerful, user-friendly GemPages, please feel free to figure out more articles here or reach our Support Team. We'd be happy to answer any questions you have.


Was this helpful?