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.
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:
- (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.
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.
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.
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.