How to set up sibling product swatches

Shopify variants are a great way to create different options for a product, but they can be too limited if you need to create completely different pages for each variant. For example, you may want to create unique sections, color schemes, or content for each variant, but still link those variations to the related products. You may want to check the demo here

In Be Yours, you can use metafields to link different products.

This tutorial shows you how to use metafields to create sibling product swatches step-by-step:

  1. Create a new collection
  2. Create two new metafields and set the values to products
  3. Enable the Sibling products setting

1. Create a new collection

1.1 Create a collection

  • Locates the Collections section in Admin dashboard > click on Create collection.

  • Gives your collection a name in Title, and selects Theme template.

    This example demonstrates creating a collection called The endless summer and assigning it to the Default collection in the theme template.

  • Click Save to finish.

1.2. Create a new product and integrate each product into the designated collection

For the purpose of establishing individual product pages for each variation, the creation of a distinct product entry within the Shopify admin panel is required for each variation. Subsequently, these newly created product entries should be aggregated within the designated collection.

  • In your Admin dashboard > Products > click on Add product.

  • A dedicated window will be displayed for comprehensive product information entry. Click here Product details for more information.

  • Unify your product's variations under one collection by assigning them to the same collection.

  • Clicks Save to finish.

For example:

  • If we have a product with five value options, create five products, one for each value.

    • Earthy Elegance
    • Sunset Soiree
    • Pink Paradise
    • Tangy Twist
    • Golden Glow

    We created these new products (kindly take a look at below table) and assigned them to the The Endless summer collection.

    Earthy Elegance
    Sunset Soiree
    Pink Paradise
    Tangy Twist
    Golden Glow
  • The construction of the collection is now complete, encompassing a total of five distinct product entries.

2. Create two new metafields and set the values to products

Establishes two new "metafields" (custom data fields) and subsequently assign appropriate values to each product within the designated collection.

2.1. Create the new metafields

  • Go to Settings in Shopify admin > Custom data > Products and click on Add definition.

  • Upon clicking "Add definition," a dedicated window will open, allowing you to configure the new metafield for your products.

    The creation of two distinct 'metafield' definitions is required. Each definition encompasses different elements such as Name and Namespace and key, and Select types, as illustrated in the provided images.

    • Sibling color metafield

      Name - Sibling color

      Namespace and key- custom.sibling_color

      Select type - Chooses Single line text and One value.

    • Sibling collection handle

      Name - Sibling collection handle

      Namespace and key- custom.sibling_collection_handle

      Select type - Chooses Single line text and One value.

  • Click Save for each metafield to finish add definition.

2.2. Set the values to products

  • Next, go back to each product you created earlier (Earthy Elegance, Sunset Soiree, Pink Paradise, Tangy Twist, and Golden Glow) and set a value for each metafield.

  • For example, in metafield of Earthy Elegance product

    • Sibling collection handle the-endless-summer.

    • Sibling color Tan

    For Sunset Soiree and Pink Paradise, Tangy Twist, and Golden Glow products.

    • sibling collection handle the-endless-summer. The designated value will remain consistent for each and every product within the collection.

    • Sibling color other value. The assigned value will vary for each item within the designated collection.

3. Enable the Sibling products setting

Follow these simple steps to turn on and set up the Sibling products block:

  • On your Shopify Admin dashboard, click Online Store > Themes.

  • On the Themes page, choose Be Yours theme and click on the theme's button Customize.

  • On Default product page (or other product template) > Template section group > Product information > Add block > Click on the Sibling product.

  • Sibling products block settings:

    • Option name - Color. The content here can be customized to suit your intended use.

    • Option value metafield - custom.sibling_color. Make sure it's a perfect match for your Shopify metafield name.

    • Collection handle metafield - custom.sibling_collection_handle. Make sure it's a perfect match for your Shopify metafield name.

  • Click Save to finish.

After completing the above steps, your product will be displayed with sibling product swatches, as shown in the video below:

We hope this article has been helpful. If you have any questions or concerns about this feature, please do not hesitate to contact our team for support.