How To Custom Your Product Display With The Product Module | Help Center

This article will demonstrate how to use a Product Module to show your product in GemPages.

What is a Product Module?

The Product Module is an essential element, enabling you to add any products from Shopify to GemPages.

From the GemPages dashboard, open a page you would like to edit. You can quickly locate the Product element on the left sidebar of the editor page. Next, drag & drop the Product Module to your preferred position.

Due to the limitation from Shopify, you can add a maximum of 20 single product modules on a page. If you would like to add more, kindly consider using the Product List element instead.

Child Elements

The Product Module comes with various child elements to display product properties. Defined by the (P) prefix, these child elements must be placed inside the Product Module to work properly.

Below is the list of the product module's child elements:

As all product information is pulled from your Shopify, you will need to navigate to your Shopify Admin > Products > All products to edit the product details.

Settings tab

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

1. Product

The default selection is “Auto,” which means the product will be randomly selected to display on the current editor page. Hit “Pick a product” and choose one product from the list to see how it will be displayed.

This action doesn't affect how the selected product looks in the live store. To do so, you need to assign a template to the product by following the steps in this article.

2. Dynamic

This feature allows you to enable automatic data syncing with the details of the products in your Shopify Admin. For more information, you can check out this article.

3. Form ID

You can integrate a form created by a third-party app by inserting the form ID in this box.

4. 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.

Design Tab

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

How to arrange elements in the Product Module

It’s recommended to take advantage of the Row element to arrange the elements inside a Product Module. Kindly follow the steps below.

Step 1: From the GemPages dashboard, open your preferred page to edit. Drop a Product Module to your desired position.

Step 2: Next, drop a Row element inside the Product Module and select one of the layouts listed out in the left sidebar.