Linked Products

This feature let you display related items as swatches on the product page. Customers click a swatch to jump directly to that product’s detail page.

1. Create Linked Products for all products

This method is quick and simple, but all products will display the same group of Linked Products.

Steps:

1. Go to Online Store > Customize > Product page (Default product)

2. Main Product > Group Product > Add block > Linked products

3. Enter the information directly in this block:

   • Products: select the list of linked products

   • Option name: set the option name (e.g., Color, Size)

   • Option values: enter values separated by commas

   • Linked product type: choose the display style (Block / Block with color / Image with title)

• Color selector size: choose swatch size (Small / Medium / Large)

• Image ratio: select image ratio (Adapt to image, Square, etc.)

4. Click Save

2. Create Linked Products for specific products (using Metaobject & Metafield)

This method allows you to set different Linked Products for each product.

Steps:

2.1. Create a Metaobject

Go to Content > Metaobjects > Add definition, name it Linked variation

2.2. Add fields to the Metaobject

• Linked Variation ID

  • Type: Single line text (One value)

  • Name: Linked Variation ID

  • Use this field as display name: Checked

  • Required field: Checked

• Option Name

  • Type: Single line text (One value)

  • Name: Option Name

  • Description: Enter an option name

  • Required field: Checked

• Option values

  • Type: Single line text

  • Name: Option values

  • Choose: List of values

• Products

  • Type: Product

  • Name: Products

  • Choose: List of products

  • Required field: Checked

After adding all, click Save → you will have a Metaobject with 4 fields.

2.3. Create Product Metafield

Go to Settings > Metafields and metaobjects > Metafield definitions > Products > Add definition.

• Name: Linked Variation ID

• Namespace & key: theme.linked_variation_id

• Type: Metaobject → Reference to Linked variation (Metaobject created in the previous step)

2.4. Add entries for Linked Products

Go to Content > Metaobjects > Linked variation > Add entry and fill in the information.

• Note: If “Option values” is empty, product title will be shown by default.

2.5. Assign entries to products

Go to Products > open a product → scroll to Metafied → Link Variation ID → select the entry you created.
(You can reuse the same entry for multiple products.)

2.6. Connect in Theme Customize

Go to Online Store > Customize >Product page (Default product) > Main Product > Group Product > Add block > Linked products block connect it with the Metaobject and fields created.