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.

From the GemPages Dashboard, open your preferred template to edit. You can quickly find the Product list element on the left sidebar of the Editor, under the Product section. Drag & drop it into your preferred position to start editing.

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

Product Source

The new version provides you with the flexibility to choose from two different types of product showcases. Depending on your requirements, you can make a selection from the dropdown menu:

• Pick products: By choosing this option, you have the freedom to handpick specific products to be showcased together, regardless of whether they belong to the same collection or not. Hit “Pick products” and start selecting the products from the list. 

If you want to re-order the products, just simply drag the product to the position you wish.

• Pick 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.

In case you choose to show the products by collection, you will have the option to show the products in different orders: Name A-Z, Name Z- A, and New arrivals.

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.

Number of products

Determine how many products will be shown in the element.

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 Slider style include:

• Infinite loops: When enabled, your slider will continuously run.
• Dots: Toggle the visibility of the dots below the slider.
• Arrows for next & previous: Toggle the visibility of the buttons for navigating 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. 

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.

Slider

Item Spacing: Input your preferred spacing between product items into the box.

The Advanced Tab

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