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.
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:
- (P) Cart Button
- (P) Description
- (P) Dynamic Checkout Button
- (P) File Upload
- (P) Image
- (P) Image list
- (P) Price
- (P) Quantity
- (P) SKU
- (P) Stock Counter
- (P) Swatches
- (P) Title
- (P) Variants
- (P) View More
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.
Configure the Settings tab
Under the Settings tab, you will see effective parameters to fine-tune content appearance for the best possible conversion rate.
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.
In case you pick a Product, 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.
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.
You can integrate a form created by a third-party app by inserting the form ID in this box.
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.