How to set up sibling product swatches

Variants are a great way to create different options for a product. However, you might need separate pages for different product versions, but you still want to connect them back to the original product. See our demo for more details.

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

   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 three  value options, create three  products, one for each value.

     • Bay Top
     • Seneca Bra Top
     • Sinchseamless Bra Top

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

   Bay Top	Seneca Bra Top	Sinchseamless Bra Top

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

     

     

     You need to create two metafield definitions: Sibling color metafield and Sibling collection handle. For each definition, go setup the Name, Namespace and key, and Select types, as below:

     • Sibling color metafield

       

       Name: Enter your desired name for the option used in the sibling, for example, Sibling color

       Namespace and key: Please enter the namespace and key for this metafield, such as custom.sibling_color. It is important to remember the namespace and ket you choose, as these values will be required for theme configuration later.

       Type: Please chooses Single line text with One value.

     • Sibling collection handle

       

       Name: Enter your desired name for the option used in the sibling, for example, Sibling collection handle.

       Namespace and key: Please enter the namespace and key for this metafield, such as custom.sibling_collection_handle. It is important to remember the namespace and ket you choose, as these values will be required for theme configuration later.

       Type: Please chooses Single line text with 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. Please follow exactly the instructions below:

     • Option name - please enter the text Color. The value 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 in part 2.1.

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

     

   • Click Save to finish.

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

Need Further Assistance

If you encounter any issues or need additional help with your Be Yours theme, don't hesitate to reach out to Roartheme's support team for expert guidance.

Scan the QR code to get support within 8 hours via RoarTheme ’s Whatsapp