Product Quantity Element

This guide will show you how to use the Product Quantity Element in GemPages V7 to let customers select the number of items they want to purchase. If you are still using GemPages V6, please refer to this article.

What is the Product Quantity element?

The Product Quantity Element allows shoppers to specify how many units of a product they want to buy. Customers can either click the plus (+) or minus (-) buttons to increase or decrease the quantity, or they can manually type a number into the input field.

How to Add the Product Quantity Element to Your Page

Step 1: Open the Page in GemPages

First, navigate to the page where you want to add the quantity selector.

Step 2: Find and Add the Element

In the editor, use the search bar on the left-hand panel to type Product Quantity. Once you see the element appear, drag and drop it into the desired section of your design area.

product-quantity-drag-drop

Note: The Product Quantity Element can only be used inside a Product or Product List element.

Once the element is added, click on it to open the Settings panel on the left-hand side. The panel has two tabs: Settings and Advanced.
product-quantity-setting-tabs

Configure the Settings Tab

1. Product Source

Select the product that this quantity selector should apply to. This ensures the quantity updates correctly for the chosen product.
product-quantity-product-source

2. Button

Width: Adjust the button width to fit your design.
Background: Choose a solid or gradient color for the button.
Plus Icon: Select a default icon or upload a custom icon.
Minus Icon: Select a default icon or upload a custom icon.
Icon Color & Size: Adjust the color and size of the icons to match your page style.
Border & Corner: Customize the border style and corner radius.
Hover Effect: Add visual effects when users hover over the button.

product-quantity-button

3. Input

Background: Change the input field’s background color.
Text Styles: Choose from 3 paragraph styles and 6 heading styles for the input text.
Divider: Set the color and thickness of the divider between buttons and the input field.
Hover Effect: Apply a visual effect when hovering over the input field.

product-quantity-input

4. Size

Adjust the width & height of the element.

product-quantity-size

5. Background

Change the element background color.
product-quantity-background

6. Shape

Adjust the outer shape of the element:

Border
Corner
Shadow

product-quantity-shape

7. Display condition

Default quantity: Sets the starting number shown for the quantity.
Update price: Total price updates when quantity change.

product-quantity-display-condition

8. Align

Alignment will be disabled when Width of Button is 100%
If not, default alignment options is align Left.

product-quantity-align

Configure the Advanced Tab

For more advanced customization, please navigate to the Advanced tab and follow the instructions in this article.

What did you think about this content?

Your comments

Irrelevant: Unexpected or off-topic information.

Inaccurate: The information doesn’t match the product.

Needs small fixes: There are typos or broken links.

I have suggestions: I’d like to suggest improvements for this page.

Email*

Invalid email address.

Something went wrong. Please try again later.

By submitting your email address and comments, you consent to the collection and use of your information as outlined in our Privacy Policy and agree to our Terms of Service.