Product module

This article will show you how to use a Product module in GemPages.

What is a Product (module)?

Product (module) is one of the most basic elements of GemPages. It is designed so you can add any products from your Shopify store to your page. The product module comes with a bunch of elements such as (P) Image, (P) title, (P) Price, and (P) Cart Button that you can use to showcase a product.

Related elements of a product module

All related product elements are imported from the Shopify product database. Except for the Product List element which links with a product collection, other product elements need to link with a product in order to work properly.

For example: Child product elements - the element's name starts with (P) should be dragged into a Product Module to be able to work or the Related Products element should go along with a Product Module in a product template.

Child product elements include (P) Dynamic Checkout Button, (P) Title, (P) Description, (P) Price, (P) Quantity, (P) Image, (P) Image list, (P) Variants, (P) Swatches, (P) Cart Button, (P) View More, (P) Stock Counter.

As all product information is pulled from your Shopify catalog, if you want to modify the product details such as product images, descriptions, etc., you should customize them in each product under the Products item in the Shopify admin panel.

Settings tab's parameters

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

Product: Normally, it will be set as Auto. With this option, the product will be randomly selected to display on the current editor page. Otherwise, if you want to select a specific product as a sample for design, hit Pick a product and select one from the appearing list.

Selecting a product here doesn't mean that the current template will apply for the selected product. It visualizes how your page will look like only. If you want to assign a product template for specific products, the assignment feature will help you configure it. Click here for further instruction.

Dynamic: If you enable this feature, your products that are assigned to this template will be displayed with corresponding pages. If Dynamic is toggled off, the product will only show one specific thing. It means that when customers click different products, they all display the same product.
Form ID: You can integrate a form created by a third-party app by inserting the form ID in this box.
Extra class: If you wish to customize the variant's content element particularly, please use this field to add a class name and then refer to it in the CSS file.

How to layout your product details

It is quite simple to create any layout for your product page using a combination of the Row element and the Product Module.

Step 1: Drag a Product Module into your editor page

Step 2: Drag a Row element into the Product module and select how many columns to separate product details