Link related products with Product groups

This guide describes how to use Product groups to display related products, inside a Product section, so customers can quickly navigate between them from a Product page.

With our Product groups feature, store products that exist as distinct product records in Shopify can be linked together as siblings. On a Product page, the feature provides a Product group block that contains a customizable picker/selector. Customers use the picker to choose a product option from the sibling products within a product group.

For example, the previous image shows a product page, with a Product pages section, that contains a Plain t-shirt - orange product. On the right-side of the section, a Product group block contains a Trim color picker with black and orange product options represented by corresponding color-swatch icons. Customers select a picker icon to choose a collar color option. Selecting each option opens the corresponding product page.

How this guide implements a Product group

In this guide, as an example, we implement the picker shown in the previous image. We use two distinct t-shirt products: the first t-shirt is available with a "Black" color neck collar trim, and the second t-shirt has an "Orange" color trim. We configure a Product group block to display a picker inside a Product pages section. The picker allows customers to choose between collar color options on a Default product page.

Adapt the steps in this guide to suit your store's specific requirements.

To set up the Product group described in this guide, you'll:

• Define a metaobject structure
• Define a custom product metafield for your metaobject
• Create a product group
• Link products to your product group
• Configure a product section to display your product group

Define a metaobject structure

1. On your Shopify admin page, go to Settings > Metafields and metaobjects.

2. In the Metaobject definitions pane, select Add definition.

   Note

   If you're creating your first metaobject, in the Define your first metaobject pane, select Add definition.

3. On the Add metaobject definition page, in the Name text entry field, enter Product group.

4. In the Fields pane, add the fields defined in the following table. Select Add field to add each new field, as required.

   Important

   Enter the field labels exactly as specified in the following table.

   Field label	Mark as required	Field category	Field type
   Name	Yes	One	Single line text
   Products	Yes	List of values	Product
   Label	No (optional)	One	Single line text
   Common title part	No (optional)	One	Single line text

   

   Note

   Your completed metaobject structure definition comprises the following fields:

   • Name is used inside Shopify admin to identify the Product group entry.
   • Products lists all products that belong to this Product group. Baseline reads this list to determine which products to display in the picker.
   • Label specifies the label text to display alongside the picker inside the Product group block. For example, “Trim color”.
   • Common title part stores the part of a product's title that's shared with other products in the product group. For example, the prefix "Plain t-shirt -". Baseline can be configured to remove this shared part when displaying button labels inside the Product group block.

   For information about metaobjects, refer to Shopify help: Metaobjects.

5. Select Save to save your custom metaobject structure definition.

Define a custom product metafield for your metaobject

1. On your Shopify admin page, go to Settings > Metafields and metaobjects.

2. Select Products, and then choose Add definition.

3. In the Name text entry field, enter a suitable name for your custom product metafield definition.

   For example, enter Product group.

4. Use the Type dropdown to select One, choose Metaobject, and then select the metaobject you created previously.

   For example, select the Product group metaobject you created previously.

   Optional: Select Add description to add an optional description for your metafield.

   Note

   Note the key for your metafield, you'll recall the key later in this guide. For example, note the key custom.product_group.

   

5. Select Save to save your custom product metafield definition.

Create a product group

After you've created your metaobject structure and metafield definition, start grouping your products as siblings.

1. On your Shopify admin page, go to Content > Metaobjects, and then select the Product group metaobject you created previously.

2. Select Add entry.

3. Enter a Name for your product group. For example, enter Trim color.

   Note

   The name you enter is primarily for your internal reference.

4. In the Products field, choose Select products, select each individual product that you want to belong to this group, and then choose Add.

   For example, select the Plain t-shirt - black product, and then select the Plain t-shirt - orange product.

   • Optional: In the Label text entry field, enter text to display as a text label for the picker inside the Product group block. For example, enter Trim color.

   • Optional: In the Common title part text entry field, enter part of the product title that's shared among products in the product group. For example, enter the prefix Plain t-shirt -.

   

5. Select Save to save your product group.

Link products to your product group

1. On your Shopify admin page, go to Products, and then select a product that you included in your product group. For example, select the Plain t-shirt - orange product.

2. In the Metafields pane, locate the Product group metafield you created previously.

3. Select the field, choose Select entry, and then select the metafield for the product group that this product belongs to. For example, select Trim color.

   

4. Select Save to save the changes you made in Product editor.

5. Repeat the previous steps to add corresponding metafield entries for the other products you want linked to your product group.

   Note

   The Product group block only displays a picker on product pages for the products that belong to your product group.

Configure a product section to display your product group

1. On your Shopify admin page, go to Sales channels > Online Store > Themes.

2. Locate the theme you want to edit, and then select Edit theme to open your required theme in Theme editor.

3. At the top of Theme editor, use the dropdown to select a product template that contains the product section where you want to display your product group. For example, select Products > Default product.

4. In the sidebar menu, if necessary, select Change, and then choose a product that belongs to the product group you created previously.

5. In the sidebar menu, locate the product section where you want to display your product group. For example, locate the Product pages section.

6. Expand the section menu, select Add block, choose Product group, and then select the Product group block you added.

7. In the Product group block's settings menu, in the Product group metafield key text entry field, enter the key for the metafield you created previously. For example, enter custom.product_group.

   

   • Optional: Adjust the remaining block settings to suit your requirements. For example, to set the picker to display the picker options as color-swatch icons, set Options style to Swatches.

   Note

   For information about the Product group block settings, refer to Product pages.

8. Select Save to save the changes you made to the section in Theme editor.

9. Preview your store's product page to confirm that the section displays the products from your product group correctly.