What is a Product (module)?
Product (module) is one of the most basic elements of GemPages. It is designed so you can add any products from your Shopify store to your page. The product module comes with a bunch of elements such as (P) Image, (P) title, (P) Price, and (P) Cart Button that you can use to showcase a product.
Related elements of a product module
All related product elements are imported from the Shopify product database. Except for the Product List element which links with a product collection, other product elements need to link with a product in order to work properly.
For example: Child product elements - the element's name starts with (P) should be dragged into a Product Module to be able to work or the Related Products element should go along with a Product Module in a product template.
Settings tab's parameters
Under the Settings tab of the Product module, you will see effective parameters to fine-tune content appearance for the best possible conversion rate.
- Product: Normally, it will be set as Auto. With this option, the product will be randomly selected to display on the current editor page. Otherwise, if you want to select a specific product as a sample for design, hit Pick a product and select one from the appearing list.
- Dynamic: If you enable this feature, your products that are assigned to this template will be displayed with corresponding pages. In other words, the Shopify data of products (such as Description, Image, Price, etc.) will be synced into your current template if the Dynamic feature turns on. If it is toggled off, the corresponding product pages of the assigned products will only display the same product.
- 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.
How to layout your product details
It is quite simple to create any layout for your product page using a combination of the Row element and the Product Module.
- Step 1: Drag a Product Module into your editor page
- Step 2: Drag a Row element into the Product module and select how many columns to separate product details