Product List Element

About the Product List Element

The Product List plays a crucial role by showcasing a range of products. Its purpose is to effectively increase sales value by enabling upselling and cross-selling to your customers. Unlike its previous version, the Product List element V7 offers the ability to selectively choose specific products to display, enhancing the flexibility of webpage design.

To start using the Product List element in GemPages, follow these steps:

1. Log in to your GemPages Dashboard.
2. Open the template you want to edit.
3. Locate the Product List element in the left sidebar, under the Product section.
4. Drag and drop the element into your preferred section on the page.
5. Click on the element to access its configuration options in the left sidebar, which includes Settings and Advanced tabs.

To access the configuration options for the Product List, simply click on it. The left sidebar will then reveal the Settings and Advanced tabs, allowing you to customize its behavior and appearance.

Configure the Settings tab

1. Select product list

You can choose how products will be displayed by selecting one of the following options:

• Multiple Products: Manually select specific products to showcase.
• A Collection: If you wish to showcase products from a particular collection, select this option. Please ensure that you have set up the collections in your Shopify Admin beforehand, as the element will retrieve information from there. To create a new collection, you can access Shopify Admin > Products > Collections. If your store does not have any collections yet, you can refer to this comprehensive article by Shopify for step-by-step instructions on creating a new collection.
• Related Products: Automatically display products related to the current one, based on the same collection, vendor, or tag.

2. Products per row

You can decide how many product items will be displayed in a row by adjusting the slider.

To change this number on different devices, click the Desktop icon on the right corner.

3. Numbers of Product

If you select Collection or Related Products, there’s no strict limit on the number of products displayed. The default maximum is 50, but you can manually enter a higher number if needed.

4. Layout

You have two options to choose from for showcasing your product list:

• Grid: The product list will be presented in the default style.
• Slider: The product images will be displayed in a carousel.

Additional options for the Grid style include:

• Row gap: Adjust the spacing between rows.
• Column gap: Adjust the spacing between columns.

Additional options for the Slider style include:

• Drag to scroll: Allows customers to navigate the slider by dragging.
• Infinite loops: When enabled, your slider will continuously run.
• Autoplay: Enables automatic scrolling of products.
• Dots: Toggle the visibility of the dots below the slider.
• Arrows for next & previous: Toggle the visibility of the buttons to navigate to the next and previous images on your slider. You will see the option to choose the arrow from our icon library or upload your own by SVG code. 
• Item spacing: Adjust the spacing between products in the slider.

5. Size

• Full-width: Activate this option to expand the product list to cover the entire width of the page. Alternatively, you can enter a specific width value in the provided box to set your preferred width.
• Fit height to content: Activate this option to automatically adjust the height of the product list based on the product image and other details. If you prefer to set a specific height value, you can deactivate this option and enter your desired height value.

Configure the Advanced Tab

For more advanced customization, please navigate to the Advanced tab and follow the instructions in this article.