SectionAI is free + 20K tokens if you're a The4 customer, Free plan is available Install App  

Header background

Linked Products

Mie Tran

Written by Mie Tran

Last updated

26 views

On this page


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.

demo.gif

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

general.gif

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

link.gif
  • Option Name

    • Type: Single line text (One value)

    • Name: Option Name

    • Description: Enter an option name

    • Required field: Checked

option name.gif
  • Option values

    • Type: Single line text

    • Name: Option values

    • Choose: List of values

option value.gif
  • Products

    • Type: Product

    • Name: Products

    • Choose: List of products

    • Required field: Checked

product.gif

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 MetafiedLink Variation ID → select the entry you created.
(You can reuse the same entry for multiple products.)

select entry.gif

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.

🎁 Exclusive Deals for The4 Customers

EComposer

🎉 EComposer – Free 6-Month Plan

Build landing pages, sales funnels, and more with drag & drop.
The4 users get 6 months free (save $114) on Pro plan.

  • ✅ 100+ templates ready to use
  • ✅ Build any Shopify page
  • ✅ No coding required
🔓 Get 6 Months Free
SectionAI

🤖 EcomRise: Upsell & Bundles

Boost sales effortlessly with product bundles, upsell and cross-sell, buy X get Y, volume discounts

  • ✅ Easy upsell & cross-sell
  • ✅ Works with the latest themes
  • ✅ Trusted by 10k customers
🚀 Get 6 Months Free

Enjoy a free 3-day trial. Then get your first month for $1. Try Now

We uses cookies to ensure you get the best experience on our website.