Product Module

This article will demonstrate how to use the Product module to show your products 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 the page you would like to edit. You can quickly locate the Product module on the left sidebar of the Editor. Next, drag & drop the Product module to your preferred position.

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

Child Elements of the Product Module

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 function 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 and select a product to edit the 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.

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.

You may need to assign a product for the template first by following the steps in this article.

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 variants you wish to display.

In case you pick “Select Manually”, there will be an option for you to select a specific variant to show on your Product Module. The default selection will be the first variant from your Shopify Admin.

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.

Configure the 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

Follow this article for detailed instructions on how to design a fully responsive Product module that looks great on any device!

How to fix common issues

“Liquid error: Exceeded maximum number of unique handles for all_products.” This message will appear when you have more than the maximum of 20 product modules on a single page. Please remove some or switch to the Product List element.
“Product not found”: Make sure that your product’s status is Active and available on the sales channel. Kindly check and update your Shopify Admin > Products > All products.

“Liquid error: product form must be given a product”: The information of the selected product isn’t correctly synced from Shopify. Please pick another product to display, or check the product availability on Shopify Admin > Products > All products. Try to re-pick a product under the Settings tab or review the product availability in the Shopify Admin.