How To Custom Your Product Display With The 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

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 > 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, 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

Follow this article for a 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.

And there you have it! If you need any further assistance along the way, our GemPages Support Team is always here for you!
You can reach us via email or live chat at any time.