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. 

From the GemPages Dashboard, open the page you would like to edit. You can quickly locate the Product module on the left sidebar of the Editor. Next, choose your preferred product layout and drag & drop the Product module to the position you wish.

Child Elements

The Product module offers several child elements designed to showcase product properties. These child elements need to be placed within the Product module for them to work effectively. Here is a list of the available child elements within the Product module:

• Images and Gallery
• Dynamic Checkout Button
• Product Cart Button
• Product Description
• Product Title
• Product Price
• Product Quantity
• Product Variants and Swatches
• Product Stock Counter
• Product Tag
• Product Custom field

It’s important to note that all product information is pulled from your Shopify store. To edit the details of a product, you need to access your Shopify Admin, navigate to the “Products” section, and select the specific product you wish to modify.

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.

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.

Please note that you need to assign a product to the template to make sure it’s applied to your live page. 

Select Manually

This option allows you to display multiple product modules on the same template and specific variant options. For instance, if you want to create product bundles for upsells, you can use this option to choose the product you wish to display.

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

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 six options, each representing 1 to 6 columns. Once you’ve made your choice, the corresponding layouts for tablet and mobile views will be generated automatically.

There are 2 modes for setting the width of the column at this point: 

• Fill column: The width of the columns is evenly distributed, and you can adjust the width ratio of the columns by dragging the slider in the Custom layout. 
• Fit content: The width of the columns auto-adjusts to the content inside the column.

Align

Vertical alignment: Align content inside all columns to Top, Center, Bottom, and Stretch. Stretch alignment only works when at least one column has 2 elements inside.

Horizontal alignment: Only applies to Fit content mode to align columns within sections.

Dimension

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 Gaps: 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.

Configure the Advanced Tab

To style how the element looks, please navigate to the Advanced tab and follow the instructions in this article.