Product list

This guide describes setting up the Product list section.

Use the section to display a list of products from a collection on a page.

​

​The previous image shows a Product list section on a store's home page. The section displays products from the store's Popular works collection. In the upper left, part of Theme editor's section menu is displayed. The menu's Show vendor option is enabled. With this option enabled, the section displays the name of each product's vendor.

Note

The section is a legacy section. For more customizable options, add the newer Featured collection table section.

For general guidance with modifying sections, refer to Sections overview and Shopify help: Sections and blocks.

Set up a Product list section

To set up a Product list section:

1. In Theme editor, at the top of the page, use the theme templates dropdown menu to select a page that contains a Product list section.

   Note

   The section can be added to any page, except Checkout and Gift card pages. To add the section to the current page, select Add section > Product list. Refer to Shopify help: Add a section.

2. From the side menu, select Product list.

3. Select a setting described in the following table.

Setting name	Description
Collection	Use the Collection picker to select a collection to display inside the section. Refer to Shopify help: Collections.
Product image display	Use the Product image display options to specify how product images are displayed inside the section. To hide product images, select Hidden. To always display product images, select Show. To display product images only when a cursor is placed over an item in the section's product list, select On hover.
Product limit	Adjust the Product limit slider to specify the maximum number of products from a collection to display inside the section. The minimum is 2 products and the maximum is 100 products.
Show vendor	Use the Show vendor option to show or hide the names of product vendors inside the section.
Header > Subheading	In the Subheading field, enter text to display as a subheading for the section. Note that the Subheading field is hidden in Theme editor when the Heading field is empty.
Header > Heading	In the Heading field, enter text to display as a heading for the section.
Header > Show "View all" link	Use the Show "View all" link option to show or hide a link inside the section for accessing an entire collection.
Header > Show collection products count as superscript	Use the Show collection products count as superscript option to show or hide a number beside the collection inside the section. The number is displayed as superscript and indicates how many products there are in the collection.
Color > Color scheme	Use the Color scheme picker to select a color scheme for the section. Refer to Colors.
Theme settings	If available, select Theme settings to access additional settings for the section. Refer to Section theme settings menu.
Custom CSS	Select Custom CSS. In the CSS field, enter custom CSS styles to apply only to the current section. Refer to Shopify help: Add custom CSS. To apply custom styles to your entire online store, refer to Theme settings > Custom CSS.
Remove section	Select Remove section to delete the section from the current page.

Note

To connect a metafield to a setting that supports metafields, select the Connect dynamic source icon displayed beside the setting in Theme editor.

To learn how to connect a metafield to a supported setting, refer to Shopify help: Connecting metafields to your theme by using the Theme editor.