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. It can be used for cross selling, to show complementary or related products, to display accessories for a product or as an alternative way of showing different product colors.

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.

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 create a product list metafield or select an existing product list metafield such as complementary products to use 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?

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 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 show use metafields to show different linked products?

The product list block can use dynamic content such as a metafield. This can be a new metafield of type product list or an existing metafield can be used such as complementary products. Complementary products are managed in the Shopify Search and Discovery app.

Add a custom product list metafield to hold the sibling products

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.

Steps

Go to Settings > Custom data > Products.
Click on Add definition.
Name it something that makes sense to you and select type List of products.
If desired, create a product metafield of type Text to hold the Product list block Heading.

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).

Note

The Bulk Editor is a helpful tool to quickly update metafields and other attributes across all your products.

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 new metafield for the product list and 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.

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. It is worth noting that on a collection page Shopify category metafield filtering can be used to filter by color even if no color variant option exists.
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).

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!