Product list block – User Guides

Use the product list block to create links to products in a card or image style.

What is the product list block?

The Symmetry theme product list block can be added to a product template or featured product section and it is used to link to other products and sibling products. It can be used for cross selling, to show complementary or related products, to display accessories for a product, as an alternative way of showing different product colors or to connect individual products as variants.

The card style shows the full product details in a product card.

The image style (new in version 7.4.0) looks similar to a color variant picker or swatch. The product currently being viewed is highlighted. If the product is unavailable, the image is crossed through. This image style means you can display connected or sibling products as variants.

Note

This article describes the product list block, not the product list section.

How to set up the product list block

Steps

Open the Theme Editor, and navigate to the product page template.
Add a block of type Product list.
Add a Heading for the Product list block (e.g. Color or Complete the look) or select a text product metafield as a dynamic source if different text is required for different products.
Select Products or use a product list metafield as a dynamic source for the products to be shown.
Set the product list Style to be Card or Image. The Card style shows additional information about the product, such as pricing, title, swatches, review stars etc. The Image style only shows the product image. If using the Image style set the Image width.
Use the toggle to select whether to Show in quick buy.

Note

The settings in Theme settings > Product cards control what is shown for the Card style. Those settings also control the Image shape, Image crop and Image alignment for both the Card and Image product list styles.

How to use the product list block for sibling products

What are sibling products?

Sibling products is a way to connect individual products as variants. Some merchants prefer to manage their inventory by creating each color of a product as a separate product rather than using color as a variant option within the same product. The benefit of this multi-product approach can be that all the available colors are shown in separate cards on a collection page. It could also be useful if different product page layouts or metafields are required for each product.

This setup where several products are linked together is sometimes colloquially known as "sibling products". The Product link block Image style allows customer to seamlessly change product page to see alternative colors or print designs and enables merchants to link 'sibling products' together.

The product list image style is displayed in a similar way to a variant picker. It looks like a swatch. The image is crossed through if the product is sold out. The image matching the current product page is highlighted. In this way, the customer experience of changing the product page is seamless. While it may appear they are picking an alternative color variant, they are in fact changing to a different product.

How to use dynamic sources to show different linked products

The product list block can use a dynamic source of type product list. Create a metafield of type List of products or use an existing metafield such as complementary products (managed in the Shopify Search and Discovery app). Alternatively, if it is easier to maintain, a new metaobject could be created to hold all product lists and a product metafield created to reference the metaobject.

Note

Using dynamic content in the Product list block requires a base level understanding of how metafields and metaobjects work. For support on metafields, refer to Shopify Metafields guide.

Add a custom product list metafield to hold the sibling products

Steps

Go to Settings > Custom data > Products.
Click on Add definition.
Select type List of products.

Add the list of sibling products to each product

Steps

In the Shopify admin area, go to Products > Select a product and scroll to the metafields section.
Select the new metafield from the list and add the sibling products and heading text (if used).

Link the metafield to the Product list block in the theme settings

Steps

Go to Theme editor > Product page > Add Product list block.
Click on the dynamic content button to select the product list metafield and add a Heading.
Select the style Image and set the Image width.
Choose whether to Show in quick buy. When using the product list to show sibling products, it may be preferable to turn this off so the customer is not directed away from the quick buy.

Note

An alternative solution would be to create a metaobject holding all the lists of sibling products required in the store. The metaobject would need to hold a Single line text metafield for the product list names (so that each list of sibling products can be identified easily) and a List of products metafield. A product metafield of type Metaobject reference can then be created to connect a product to the relevant list.

FAQs

Does the product list image style relate to swatches?

No. The product list Image style is different and separate. Although it looks like a swatch, it does not relate to any variant option. It is just a way of linking to other products.
Variant option swatches are managed in Theme settings > Swatches. These swatches will be shown if a color variant option exists and the settings have been configured.

My product only has one variant - can I hide the variant options as there is no choice to be made?

Symmetry has two settings for this. In the Variant picker block the setting Show for a single variant controls whether the variant options are shown. The variant options can also be shown or hidden in the cart using the setting Theme settings > Cart > Show variant details for single variant products (new in version 7.4.0).

Bring your business ideas to life with Shopify

Can't find what you're looking for?

Our support staff are here to answer your queries, so don't hesitate to write to us!