Variants are a great way to create different options for a product. However, sometimes you may need separate product pages for different product versions while still connecting them back together on the product page.
In Be Yours, you can use metafields and the Sibling products block to link different products and display them as sibling product swatches.
See our demo for more details.
STEPS:
1. Create a New Collection
First, create a collection that contains all products you want to connect as sibling products.
1.1 Create a collection
- From your Shopify admin, go to Products > Collections.
- Click Create collection.
- Add a collection name in the Title field.
- Select the collection Theme template.
In this example, we create a collection called The Endless Summer and assign it to the Default collection template.
- Click Save.
1.2 Create separate products and add them to the collection
To create individual product pages for each option, create a separate product in Shopify admin for each option. Then add all of those products to the same collection.
- From your Shopify admin, go to Products.
- Click Add product.
- Add the product information, such as title, images, description, price, variants, and inventory.
- Assign the product to the collection you created earlier.
- Click Save.
- Repeat the same steps for each sibling product.
For example, if you want to connect three product options, create three separate products:
- Bay Top
- Seneca Bra Top
- Sinchseamless Bra Top
Then assign all of them to the same collection, such as The Endless Summer.
| Bay Top | Seneca Bra Top | Sinchseamless Bra Top |
|---|---|---|
 |
 |
 |
Once all sibling products are added to the same collection, the collection setup is complete.
2. Create Two Product Metafields
Next, create two product metafields:
| Metafield | Purpose | Example namespace and key |
|---|---|---|
| Sibling option value | Stores the option value shown for each sibling product, such as color, style, or material. | custom.sibling_color |
| Sibling collection handle | Stores the collection handle that contains all sibling products. | custom.sibling_collection_handle |
2.1 Create the Sibling option value metafield
- From your Shopify admin, go to Settings > Metafields and metaobjects.
- Click Products.
- Click Add definition.
- Enter the metafield name.
Example:
Sibling color
After you enter the name, Shopify will automatically recommend a Namespace and key.
- Click the suggested Namespace and key value if you want to edit it manually.
- Change the namespace and key to:
custom.sibling_color
- Click Select type.
- Choose Single line text.
- Select One value.
- Click Save.
Recommended setup:
| Field | Value |
|---|---|
| Name | Sibling color |
| Namespace and key | custom.sibling_color |
| Type | Single line text |
| Value type | One value |
2.2 Create the Sibling collection handle metafield
- From Settings > Metafields and metaobjects > Products, click Add definition again.
- Enter the metafield name.
Example:
Sibling collection handle
- Shopify will automatically recommend a Namespace and key based on the name.
- Click the suggested Namespace and key value if you want to edit it manually.
- Change the namespace and key to:
custom.sibling_collection_handle
- Click Select type.
- Choose Single line text.
- Select One value.
- Click Save.
Recommended setup:
| Field | Value |
|---|---|
| Name | Sibling collection handle |
| Namespace and key | custom.sibling_collection_handle |
| Type | Single line text |
| Value type | One value |
Important:
Remember the namespace and key values you create. You will need to enter these exact values in the Sibling products block settings later.
3. Add Metafield Values to Each Product
After creating the metafields, go back to each sibling product and add the correct metafield values.
- From your Shopify admin, go to Products.
- Open one of the products in the sibling group.
- Scroll down to the Metafields area.
- Add a value for Sibling collection handle.
- Add a value for Sibling color, or your sibling option value metafield.
- Click Save.
- Repeat the same steps for every product in the sibling collection.
Example for the Earthy Elegance product:
| Metafield | Value |
|---|---|
| Sibling collection handle | the-endless-summer |
| Sibling color | Tan |
For the other products, such as Sunset Soiree, Pink Paradise, Tangy Twist, and Golden Glow, use the same collection handle but a different option value.
Example:
| Product | Sibling collection handle | Sibling color |
|---|---|---|
| Earthy Elegance | the-endless-summer |
Tan |
| Sunset Soiree | the-endless-summer |
Orange |
| Pink Paradise | the-endless-summer |
Pink |
| Tangy Twist | the-endless-summer |
Yellow |
| Golden Glow | the-endless-summer |
Gold |
Important:
The Sibling collection handle value should be the collection handle only.
Correct:
the-endless-summer
Incorrect:
/collections/the-endless-summer
4. Enable the Sibling Products Block
After setting up the collection and metafields, enable the Sibling products block in the product template.
- From your Shopify admin, go to Online Store > Themes.
- Find the Be Yours theme and click Customize.
- Open the product template, such as Default product.
- Open Template > Product information.
- Click Add block.
- Select Sibling products.
- Configure the Sibling products block settings.
Use the following settings for this example:
| Setting | Value |
|---|---|
| Option name | Color |
| Option value metafield | custom.sibling_color |
| Collection handle metafield | custom.sibling_collection_handle |
- Click Save.
Important:
The values in Option value metafield and Collection handle metafield must exactly match the namespace and key values created in the metafield definitions.
5. Preview the Sibling Product Swatches
After completing the setup, open one of the products on your storefront.
The product page should display sibling product swatches, allowing customers to switch between the related products.
Check the following:
- The Sibling products block appears on the product page.
- Each swatch links to the correct sibling product.
- The selected product is highlighted correctly.
- All sibling products are included in the same collection.
- Each sibling product has the correct metafield values.
6. Notes and Limitations
Please note the following behavior:
- This setup links separate Shopify products together.
- It does not merge products into one Shopify product.
- Each sibling product keeps its own product URL, media, description, price, variants, inventory, and SEO data.
- All sibling products should be assigned to the same collection.
- The collection handle metafield must contain only the collection handle.
- The option value metafield should contain the display value, such as
Tan,Pink, orGold. - The product order in the sibling swatches can follow the product order inside the collection.
- The Sibling products block must be added to the product template.
- The metafield namespace and key values must match the block settings exactly.
Troubleshooting
If the sibling product swatches do not display correctly, please check the following:
- Make sure all sibling products are added to the same collection.
- Make sure each product has the Sibling collection handle metafield filled in.
- Make sure each product has the Sibling option value metafield filled in.
- Make sure the collection handle value is correct.
- Make sure the collection handle value does not include
/collections/. - Make sure the Sibling products block has been added to the product template.
- Make sure the Option value metafield setting matches the metafield namespace and key.
- Make sure the Collection handle metafield setting matches the metafield namespace and key.
- If a product does not appear, check that it is assigned to the sibling collection.
- If the wrong value appears, check the option value metafield on that product.
- Clear your browser cache and refresh the storefront.
- Make sure you are using the latest version of the Be Yours theme.
Need Further Assistance
If you encounter any issues or need additional help with your Be Yours theme, please reach out to our support team via our Ticket System for assistance within 8 hours.
Share:
Basic Option table section set up
Setup Header Sidebar in Be Yours