Shopify variants are useful when different options belong to the same product page. However, sometimes you may need separate product pages for each product version while still connecting them together.
For example, you may want each color, style, size, or bundle version to have its own:
- Product URL
- Product media
- Product description
- Product sections
- SEO content
- Inventory and pricing setup
In Concept, you can use the Product variations block with product metafields to link separate products and display them as sibling product swatches on the product page.
See our demo for more details.
How to Set Up Sibling Product Swatches in Concept
STEPS:
1. Create Separate Products for Each Variation
First, create one Shopify product for each product variation you want to connect.
1.1 Create the products
- From your Shopify admin, go to Products.
- Click Add product.
- Add the product information, such as title, images, description, price, variants, and inventory.
- Click Save.
- Repeat the same steps for each sibling product.
For example, if you have an Air Beats product with three color variations, create separate products such as:
- Air Beats Timber
- Air Beats Black
- Air Beats Gold Tone
Each product can have its own product page, product images, description, sections, and SEO content.
Important:
All sibling products should be available in your Shopify admin before you configure the Product variations block.
2. Create a Product Metafield for the Variation Value
Next, create a product metafield to store the display value for each sibling product.
This metafield value is used by the Product variations block to display the selected option value and each sibling swatch label.
For example:
| Product | Metafield value |
|---|---|
| Air Beats Timber | Timber |
| Air Beats Black | Black |
| Air Beats Gold Tone | Gold Tone |
2.1 Create the metafield definition
- From your Shopify admin, go to Settings > Metafields and metaobjects.
- Click Products.
- Click Add definition.
- Enter the metafield name.
Example:
Color sibling
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.
- Set the namespace and key.
For this example, we use:
sibling.color
You can also use another namespace and key, such as custom.sibling_color, as long as the value entered in the theme block matches exactly.
- Click Select type.
- Choose Single line text.
- Select One value.
- Click Save.
Recommended setup:
| Field | Value |
|---|---|
| Name | Color sibling |
| Namespace and key | sibling.color |
| Type | Single line text |
| Value type | One value |
Important:
Remember the metafield namespace and key. You will need to enter this exact value in the Option value metafield setting later.
3. Add the Metafield Value to Each Product
After creating the metafield definition, add a value to each sibling product.
- From your Shopify admin, go to Products.
- Open one of the sibling products.
- Scroll down to the Metafields area.
- Find the metafield you created, such as Color sibling.
- Enter the option value for that product.
- Click Save.
- Repeat the same steps for each sibling product.
Example values:
| Product | Color sibling value |
|---|---|
| Air Beats Timber | Timber |
| Air Beats Black | Black |
| Air Beats Gold Tone | Gold Tone |
Important:
The metafield value should be the option value you want to display, such as Timber, Black, or Gold Tone. It should not be a product URL or product ID.
4. Enable the Product Variations Block
Once the products and metafield values are ready, enable the Product variations block in the product template.
- From your Shopify admin, go to Online Store > Themes.
- Find the Concept theme and click Customize.
- Open the product template, such as Default product.
- Open Template > Product information.
- Click Add block.
- Select Product variations.
4.1 Configure the Product variations block
Use the following settings for this example:
| Setting | Value |
|---|---|
| Option name | Color |
| Option value metafield | sibling.color |
| Products | Select all sibling products, including the current product itself |
| Enable color swatches | Enabled |
| Swatch type |
Color swatch or Product image
|
| Size chart | Optional |
4.2 Product variations block settings
| Setting | Purpose |
|---|---|
| Option name | Displays the option name on the product page, such as Color, Style, or Size. |
| Option value metafield | Defines which product metafield stores the option value. Example: sibling.color. |
| Products | Selects the related products that should appear as sibling options. The list must include the current product. |
| Enable color swatches | Displays color/image swatches when the option name matches the color swatch trigger. |
| Swatch type | Controls whether swatches use color/custom swatch values or each product image. |
| Size chart | Optionally displays a size chart link when the option name matches the size trigger. |
Important:
The Product variations block only displays when the selected Products list contains the product currently being viewed. Make sure each product template or dynamic product list includes the current product itself.
5. Choose the Swatch Display Type
The Product variations block can display sibling products as color swatches, product image swatches, or text labels.
5.1 Color swatch
Use Color swatch when the sibling value represents a color, such as Black, Timber, or Gold Tone.
When Color swatch is selected, Concept can use:
- Shopify native swatch values, if available
- Theme color swatch configuration from Theme settings > Color swatches
- Uploaded swatch images from Content > Files
- CSS color names or color fallback values
This is useful when you want the sibling products to appear as small color dots or custom swatch images.
5.2 Product image
Use Product image when you want the swatch to use each sibling product's product image.
In this mode, each sibling swatch uses the related product's featured image.
Important:
Product image mode works best when all sibling products have a clear featured image.
5.3 Text labels
If color swatches are disabled, or if the option does not match the color swatch trigger, the block can display the sibling values as text labels instead.
Example:
Small
Medium
Large
or
Matte
Glossy
Satin
6. Dynamically Select Sibling Products with a Metafield
You can manually select sibling products in the Products setting, or you can connect the setting to a product metafield.
Using a metafield is helpful when different products use different sibling groups, but they share the same product template.
6.1 Create a product list metafield
- From your Shopify admin, go to Settings > Metafields and metaobjects.
- Click Products.
- Click Add definition.
- Enter the metafield name.
Example:
Variation products
- Click the suggested Namespace and key value if you want to edit it manually.
- Set the namespace and key to:
custom.variation_products
- Click Select type.
- Choose Product.
- Enable List of products.
- Click Save.
Recommended setup:
| Field | Value |
|---|---|
| Name | Variation products |
| Namespace and key | custom.variation_products |
| Type | Product |
| Value type | List of products |
6.2 Assign sibling products to the metafield
After the metafield is created:
- Go to Products.
- Open one sibling product.
- Scroll down to Metafields.
- Find Variation products.
- Select all products in the sibling group, including the current product itself.
- Click Save.
- Repeat the same setup for each sibling product in the group.
6.3 Connect the metafield to the Products setting
- Go to Online Store > Themes > Customize.
- Open the product template.
- Open Product information > Product variations.
- In the Products setting, click the dynamic source icon.
- Select the Variation products metafield.
- Click Save.
Now each product can control its own sibling product group from the product admin page.
7. Preview the Sibling Product Swatches
After completing the setup, open one of the sibling products on your storefront.
Check the following:
- The Product variations block appears on the product page.
- The correct option name appears, such as
Color. - The current product value appears next to the option name.
- Each sibling product appears as a swatch or label.
- Clicking a sibling option opens the correct product page.
- The current product is selected/highlighted.
- All products in the sibling group are included in the Products list or dynamic product list metafield.
8. 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.
- The Option value metafield must be added to every sibling product.
- The Products setting must include all related sibling products.
- The Products setting must also include the current product itself.
- If the current product is not included in the selected product list, the Product variations block will not display.
- The value entered in Option value metafield must exactly match the namespace and key of the metafield definition.
- Product image swatches use each sibling product's featured image.
- Color swatches follow the Concept theme color swatch logic.
- If you use a dynamic product list metafield, each product should have the correct list of related products assigned.
- The Product variations block is available in product-related sections such as the main product template and featured product section.
Troubleshooting
If the sibling product swatches do not display correctly, please check the following:
- Make sure the Product variations block has been added to the product template.
- Make sure the Products setting includes the product currently being viewed.
- Make sure all sibling products are selected in the Products setting.
- Make sure each sibling product has a value for the option value metafield, such as
sibling.color. - Make sure the Option value metafield setting matches the metafield namespace and key exactly.
- Make sure there are no extra spaces in the namespace and key value.
- If using a dynamic product list metafield, make sure the metafield uses the Product type with List of products enabled.
- If using a dynamic product list metafield, make sure each product has the correct related products assigned.
- If color swatches do not appear, make sure Enable color swatches is enabled.
- If color swatches still do not appear, make sure the Option name matches the color swatch trigger, such as
ColororColour. - If product image swatches are blank, make sure each sibling product has a featured image.
- 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 Concept theme.
Need Further Assistance
If you encounter any issues or need additional help with your Concept theme, please reach out to our support team via our Ticket System for assistance within 8 hours.
*The images are used for non-commercial product demonstration purposes only, and are solely intended for use in this theme instruction documentation.
Share:
How to enable size chart on product pages?
About the Transparent Header in Concept