Starting from Be Yours version 8.0.0, the theme supports a Combined Listing-style setup that lets you connect separate products from your store and display them as selectable options on the product page.
This is useful when each variation needs to remain a separate Shopify product, but you still want customers to switch between related products from one product page, similar to selecting variants.
This feature is handled in the product page through the Sibling products block.
Important Note
Shopify also has an official Combined Listings app. The official Shopify app is available only on Plus and enterprise commerce plans. In Be Yours, the Sibling products block can be used to create a similar storefront experience by linking separate products together using a collection and product metafields.
How to Set Up Combined Listings in Be Yours
STEPS:
1. Understanding How Combined Listings Work in Be Yours
The Be Yours Combined Listing-style feature works by connecting related products together.
Each related product remains a separate Shopify product with its own:
- Product title
- Product handle and URL
- Product images
- Product description
- Product variants
- Price
- Inventory
- SEO data
The theme then displays these related products as selectable options on the product page.
For example, you can create separate products for each color:
| Product | Option value |
|---|---|
| Classic Shirt - Black | Black |
| Classic Shirt - White | White |
| Classic Shirt - Blue | Blue |
On the storefront, customers can switch between these products using a selector that looks similar to a variant picker or color swatches.
2. Preparing the Products
Before setting up the Combined Listing-style selector, create all products that should be connected.
- From your Shopify admin, go to Products.
- Create each product separately.
- Add the correct title, images, description, price, variants, inventory, and SEO information for each product.
- Make sure each product is active and available on the Online Store sales channel.
- Click Save.
Example product group:
| Product title | Product purpose |
|---|---|
| Linen Dress - Black | Black version of the product |
| Linen Dress - White | White version of the product |
| Linen Dress - Beige | Beige version of the product |
Each product should represent one option value in the connected product group.
3. Creating a Collection for the Product Group
The Sibling products block uses a collection to know which products belong together.
- From your Shopify admin, go to Products > Collections.
- Click Create collection.
- Add a title for the collection.
- Choose Manual as the collection type.
- Add all products that should be connected.
- Save the collection.
- Copy the collection handle.
Example:
| Collection title | Collection handle |
|---|---|
| Linen Dress Colors | linen-dress-colors |
The collection handle will be used later in a product metafield.
Important:
- The current product must be included in the collection.
- All related products should be added to the same collection.
- The display order of the selector follows the product order in the collection.
4. Creating Product Metafields
The theme needs two product metafields:
| Metafield | Purpose | Example |
|---|---|---|
| Option value metafield | Stores the value displayed for each product, such as color or material. | sibling.color |
| Collection handle metafield | Stores the handle of the collection that contains all related products. | sibling.collection_handle |
Create the option value metafield
-
From your Shopify admin, go to Settings > Custom data.
-
Click Products.
-
Click Add definition.
-
Add a name, such as
Sibling color. -
Set the namespace and key.
Example:
sibling.color -
Select Single line text as the content type.
-
Click Save.
Create the collection handle metafield
-
From Settings > Metafields and metaobjects > Products, click Add definition again.
-
Add a name, such as
Sibling collection handle. -
Set the namespace and key.
Example:
sibling.collection_handle -
Select Single line text as the content type.
-
Click Save.
You can use different namespace and key values if needed, but they must match the settings in the Sibling products block.
5. Applying Metafields to Products
After creating the metafields, add values to each related product.
-
From your Shopify admin, go to Products.
-
Open one of the products in the group.
-
Scroll down to the Metafields area.
-
Fill in the option value metafield.
Example:
Black -
Fill in the collection handle metafield.
Example:
linen-dress-colors -
Click Save.
-
Repeat the same steps for every related product.
Example setup:
| Product | Option value metafield | Collection handle metafield |
|---|---|---|
| Linen Dress - Black | Black |
linen-dress-colors |
| Linen Dress - White | White |
linen-dress-colors |
| Linen Dress - Beige | Beige |
linen-dress-colors |
The collection handle value should be the collection handle only, not the full collection URL.
Correct:
linen-dress-colors
Incorrect:
/collections/linen-dress-colors
6. Adding the Sibling Products Block
After preparing the products, collection, and metafields, add the Sibling products block to the product page.
- From your Shopify admin, go to Online Store > Themes.
- Find the theme you want to edit and click Customize.
- Open the product template where you want to display the selector.
- Open the Product information section.
- Click Add block.
- Select Sibling products.
- Move the block to the desired position, usually near the Variant picker.
- Configure the block settings.
- Click Save.
Recommended position:
| Block order | Block |
|---|---|
| 1 | Title |
| 2 | Price |
| 3 | Sibling products |
| 4 | Variant picker |
| 5 | Buy buttons |
7. Configuring the Sibling Products Block
The Sibling products block controls how the connected products are displayed.
Option name
This is the label displayed above the selector.
Example:
Color
Other examples:
Material
Style
Size
Scent
Finish
Option value metafield
Enter the namespace and key of the metafield that stores the option value.
Example:
sibling.color
This value is displayed as the selected option on the product page.
Collection handle metafield
Enter the namespace and key of the metafield that stores the related collection handle.
Example:
sibling.collection_handle
The theme uses this metafield to find the collection that contains the related products.
8. Displaying Sibling Products as Color Swatches
The Sibling products block can display connected products as color swatches.
To enable swatches:
- Open the Sibling products block.
- Enable Color swatches.
- Choose the Swatch type.
- Choose the Swatch source.
- Click Save.
Swatch type
| Swatch type | Description |
|---|---|
| Round | Displays swatches as round buttons. |
| Square | Displays swatches as square buttons. |
Swatch source
| Swatch source | Description |
|---|---|
| Variant image | Uses the product featured image as the swatch image. |
| File | Uses custom swatch files or color values from the theme swatch configuration. |
Important:
The Option name should match your color swatch trigger if you want the selector to display as color swatches.
Example:
| Color swatch trigger | Option name |
|---|---|
| Color | Color |
| Colour | Colour |
If the option is not a color-related option, the block can still display regular text labels instead of color swatches.
9. Setting Up Custom Swatch Files
If you choose File as the swatch source, the theme can use custom swatch files or color values.
You can define swatches in Theme settings > Color swatches or upload image files to Content > Files.
Example configuration:
Black:#000000
White:#ffffff
Navy Blue:navy-blue.png
Rose Gold:rose-gold.png
Recommended file naming:
| Option value | File name |
|---|---|
| Black | black.png |
| Navy Blue | navy-blue.png |
| Rose Gold | rose-gold.png |
| Light Grey | light-grey.png |
Rules to follow:
- Use lowercase file names.
- Replace spaces with hyphens.
- Avoid special characters when possible.
- Upload swatch files in Content > Files.
- Make sure the file name matches the swatch configuration or option value.
10. Previewing the Combined Listing on the Storefront
After setting up the block, preview the product page.
- Open one of the products in the connected group.
- Check the product information area.
- Confirm that the Sibling products selector appears.
- Click each option.
- Make sure each option redirects to the correct related product.
- Check the selected option label.
- Review the display on desktop and mobile.
The selector will only display when:
- The product has a valid collection handle metafield.
- The collection exists.
- The current product is included in that collection.
- At least one related product in the collection has the option value metafield filled in.
11. Recommended Setup
For most stores, we recommend this setup:
| Item | Recommended value |
|---|---|
| Option name |
Color, Material, or another shared option |
| Option value metafield |
sibling.color or sibling.option_value
|
| Collection handle metafield | sibling.collection_handle |
| Collection type | Manual collection |
| Swatch source | Variant image for visual products, File for custom color swatches |
| Swatch type | Round or Square |
Example color setup:
| Product | Metafield: sibling.color
|
Metafield: sibling.collection_handle
|
|---|---|---|
| Sneaker - Black | Black |
sneaker-colors |
| Sneaker - White | White |
sneaker-colors |
| Sneaker - Blue | Blue |
sneaker-colors |
Example material setup:
| Product | Metafield: sibling.material
|
Metafield: sibling.collection_handle
|
|---|---|---|
| Watch - Leather | Leather |
watch-materials |
| Watch - Steel | Steel |
watch-materials |
| Watch - Silicone | Silicone |
watch-materials |
12. Notes and Limitations
Please note the following behavior:
- This feature links separate products together; it does not merge products into one Shopify product.
- Each product keeps its own URL, title, media, description, variants, price, inventory, and SEO data.
- The selector redirects customers from one product page to another related product page.
- The current product must be included in the sibling collection.
- The collection handle metafield must contain the collection handle only.
- The option value metafield must be filled in for each related product.
- The display order follows the product order in the collection.
- Color swatches only display when the option name matches the color swatch trigger.
- If swatches are disabled, the selector displays text labels.
Troubleshooting
If the Combined Listing-style selector does not display correctly, please check the following:
- Make sure the Sibling products block has been added to the product template.
- Make sure the current product has the collection handle metafield filled in.
- Make sure the collection handle is correct.
- Make sure the collection exists in Shopify admin.
- Make sure the current product is included in the collection.
- Make sure all related products are added to the same collection.
- Make sure each related product has the option value metafield filled in.
- 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 color swatches do not display, make sure Color swatches is enabled.
- If color swatches still do not display, check that the Option name matches the color swatch trigger.
- If a swatch image does not appear, check the swatch configuration or uploaded file name.
- If products appear in the wrong order, reorder the products inside the collection.
- Clear your browser cache and refresh the storefront.
- Make sure you are using Be Yours version 8.0.0 or later.
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.
بانٹیں:
Slideshow Section
Product Template Guide