[V6] Product List Element

In this article, you will learn about the Product List element and how to use them to best display your store offerings.

What is the Product List Element?

The Product List is an essential element designed to demonstrate a collection of products on your page. You can use it to upsell and cross-sell to maximize the sale value from your customers.

Kindly be noted that the element draws information from your Shopify collections. You can navigate to the Shopify Admin > Products > Collections and select “Create collection” to group your products into one collection.

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.

When clicking on the element, you will find its configuration options in the left sidebar, including the Settings and Design tabs.

Configure the Settings Tab

Collection

Hit “Pick a collection” and choose one collection from the list to see how it will be displayed.

This action only gives you a preview of the collection. To create a page for the collection, please assign it to a template by following the steps in our article on how to assign Collections to a specific page template

Dynamic

The Dynamic feature, available only on Shopify Collection pages, allows automatic data syncing from Shopify to your Product List element.

Products per Row

You can decide how many product items will be displayed in a row by selecting from the drop-down menu.

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

Number of Product

Determine how many products will be shown in the element. Be noted that the maximum number is 50 products, which you can adjust with the slider or the number box.

Spacing

Adjust the slider or input the pixel number to change the space between products inside the product list.

Same Height

This feature enables you to set the same height to the products’ images and titles. Toggle the switch first, then adjust the height you want using the slider or the number box.

Extra class

If you wish to further customize the element with coding, please use this field to add a class name and then refer to it in the CSS file.

Configure the Design Tab

Check out our article to learn how to configure the Design Tab

For the common inquiries of the Product List element, kindly check out our Product List element – FAQs

What did you think about this content?

Your comments

Irrelevant: Unexpected or off-topic information.

Inaccurate: The information doesn’t match the product.

Needs small fixes: There are typos or broken links.

I have suggestions: I’d like to suggest improvements for this page.

Email*

Invalid email address.

Something went wrong. Please try again later.

By submitting your email address and comments, you consent to the collection and use of your information as outlined in our Privacy Policy and agree to our Terms of Service.