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 Concept, you can use metafields to link different products.
This tutorial shows you how to use metafields to create sibling product swatches step-by-step:
- Create a new product
- Create a new metafield
- Set the value of the New metafield to the product ID of the related product
- Enable the Variant product setting.
1. Create a new product
To create a separate product page for each variation, create a new product for each variation in your Shopify admin.
If you have a product with three color variations (e.g., Air Beats), create three new products, one for each color (Timber, Black, and Gold Tone). I created three new products:
2. Create a new metafieldHere you will need to create a metafield holding the those above actual values for the option (Timber, Black and Gold Tone.)
- Go to Product metafield definitions in Shopify admin > Custom data and click on Add definition.
- Enters Name and Namespace and key for the metafield.
Select the Single line text and One value for metafield type.
The description and validation settings are optional.
In the example image below, I entered "
Color sibling" for the name and "
sibling.color" for the namespace and key.
3. Set the value of the New metafield to the product ID of the related product
- Next, go back to each product you created earlier (Timber, Black, and Gold Tone) and set a value for the metafield.
- For example, to link the Air Beats Timber to the Timber color, within its metafields, set
Timberto the Color sibling.
- Do the same for Black and Gold Tone colors.
Enable the Variant product setting.Once the metafields are all set, we need to enable the feature via the theme editor.
- Go to Product information > Add block > Product variations to configure the sibling product swatches.
- Product Variations block settings:
- - The block title (Eg.
Option value metafiel - Add the namespace and key of the metafield in the Definition, in this tutorial, it would be
Products - Select all the variations, including the product itself (For example: Air Beats, Air beats Timber, Air beats Black and Air Beats Gold Tone products.
After completing the above steps, your product will be displayed with sibling product swatches, as shown in the video below: