Product Element

What is a Product Module?

The Product Module is an essential element, enabling you to add any products from Shopify to GemPages. With the introduction of Editor V7, there are notable changes compared to the previous version. Below, you will find detailed information covering these significant updates. 

To use the Product module:

1. Open the GemPages Dashboard and select the page you want to edit.
2. Locate the Product module in the left sidebar of the Editor.
3. Choose your preferred product layout, then drag & drop the module into place.

Child Elements

The Product module includes several child elements that help showcase different product attributes. These must be placed within the module to function properly. Available child elements include:

• Product Badge
• Product Image
• Discount Tag
• Product Title
• Product Description
• Product Price
• Product Quantity
• Product Variants and Swatches
• Product Vendor
• Product SKU
• Product Bundle Discount
• Add to Cart
• Product View More
• Dynamic Checkout
• Product File Upload

Note: Product details are pulled directly from your Shopify store. To edit product information, go to Shopify Admin > Products, select the product, and update its details.

Configure the Settings tab

Under the Settings tab, you will see effective parameters to fine-tune content appearance for the best possible conversion rate.

Select Product

There are two ways to select a product for the product module: Display by assigned product and Select Manually.

1. Display by assigned product

As you select the display by assigned product option, the current template will be applied to all assigned products dynamically. The product will be randomly selected to display on the current editor page.

Hit Change Preview and choose one product from the list to see how it will be displayed.

2. Select Manually

This option allows you to display multiple product modules on the same template and specific variant options. 

To make a selection, click on Pick product, and a window will open displaying a list of products for you to choose from. 

Select Variant

The Select Variant option is available only when choosing products manually.

Layout

The product module is a customizable element that allows you to adjust the layout within the settings. You can select a desktop layout from two options. Once you’ve made your choice, the corresponding layouts for tablet and mobile views will be generated automatically.

Size

• Option to choose full width: Toggle this switch on to expand the product module to the full width of the page, extending it to both edges. If you prefer not to use the full-width option, you can turn it off. In that case, you will be provided with the option to input the width in either pixels or percentages, allowing you to set a specific width for the module.
• Column gap (in px): This option allows you to choose the desired spacing between two columns within the product module. Simply choose the value that best suits your design preferences or layout requirements.

Align

• Align Top
• Align Center
• Align Bottom
• Distribute Vertical Spacing

Configure the Advanced Tab

For additional styling options, navigate to the Advanced tab and follow the instructions in this article.