Product Quantity Element

What is the Product Quantity element?

The Product Quantity feature allows users to choose the quantity of a product they want to sell or have available. They can do this by clicking the plus (+) or minus (-) buttons or typing in a number. To add this feature in GemPages editor pages, you can either drag it from the sidebar or type its name in the search box at the top left corner.

Settings tab’s parameters

Display:

• Style: Decides how the element looks on the product page, in default or simple mode.
• Default Quantity: Sets the starting number shown for the quantity.

Price Update:

Total price updates when quantity changes.

Size:

• Full width: Makes the element expand to fill the entire width of the screen, from one edge to the other.
• Input width: Adjusts the width of the quantity number box.
• Button width: Specifies the width of the (-) and (+) buttons.
• Icon size: Sets the size of (-) and (+) icons, making them larger or smaller.
• Input height: Determine the vertical height of the element, affecting how tall it appears on the screen.

States (Normal/Hover):

• Background color: Sets the color for the (-) and (+) buttons.
• Icon color: Changes the color of the (-) and (+) icons.
• Border: Adjusts the visible outline around the product quantity element.
• Corner: Determines the shape of the element’s corners.

Quantity number:

• Style: Selects the formatting of the quantity number, such as the heading or paragraph text.
• Font: Customizes the quantity number’s appearance with various text styles.
• Size: Adjusts the number size to improve readability and design.
• Color: Changes the number color to match your branding, create a hierarchy, or convey messages effectively
• Font weight: Decides how bold or thin the number looks.
• Background color: Sets the color behind the number.

Alignment:

This parameter allows you to determine how the product quantity element is positioned within the layout. The three primary types of text alignment include left-aligned, centered, and right-aligned.

Advanced Tab’s Parameters

Display on

This setting lets you specify the devices where the product quantity element appears. You can choose to display it on desktops, tablets, or mobile devices.

Spacing

• Margin: Determines the space between an element’s border and surrounding elements, controlling its positioning within the layout.
• Padding: Defines the space between an element’s content and its border, affecting its internal spacing and appearance.

Opacity

Opacity refers to the transparency level of the element.

Animation

Animation adds movement or changes to an element over time.

For additional insights on optimizing the product page, explore GemPages Academy.