Sibling product swatches
Product pages
Last updated
Was this helpful?
Product pages
Last updated
Was this helpful?
The Sibling products feature lets you set up variants as individual products with their own images and product details. Sibling products appear as variant swatches that link to separate product pages.
Customers will see product details only for the selected variant; when shown in collections, sibling products will appear as individual products.
After setting up sibling products, you can choose display either product images or custom colors for the swatches.
Unlike Variant swatches, Sibling swatches will not appear on collection pages or product listings. All sibling products will appear as individual products. Sibling swatches display on product pages only as links to other sibling products.
The tutorial video below uses the Spark theme as an example—be sure to replace any instances of 'Spark' with 'spark' in the settings.
To set up sibling products you will need to add individual products to a new collection, then add and update two metafields for each sibling product.
Create products with unique images and details
Add products to a collection to group together as 'siblings'
Create two metafields to show siblings as swatches and add option names to products
To create a group of sibling products, you need to add individual products and add them to a new collection. The collection is used to group your sibling products together as variant options.
Once your sibling products are added to a collection, you need to add two metafields to your products.
Sibling products use metafields to (a) display sibling products as swatches and (b) give each product a variant option name.
Metafields are custom fields added to your products in the Shopify admin. The steps below will cover all you need to know, but if you'd like to learn more, see Shopify's guide to metafields ↗.
Go to Settings > Custom data to create the first metafield for your Products. This metafield will be used to display sibling products as swatches.
The metafield requires the following fields:
Name
Siblings collection
Namespace and key
spark.siblings_collection
Must be exact to work. Note that 'siblings' is plural with an 's'. Do not add or modify words.
Type
Collection (Reference)
If you are creating multiple sibling collections, you only need to create one metafield.
Go to Settings > Custom data to create the second metafield for your Products. This metafield will be used to give individual products a variant option name (e.g. "Red" or "Wood").
The metafield requires the following fields:
Name
Sibling option name
Namespace and key
spark.sibling_option_name
Must be exact to work. Note that 'sibling' is singular with no 's'. Do not add or modify words.
Type
Single line text
After creating the 2 metafields, go to Products in your Shopify admin to add content to the metafields.
Select the related sibling collection
Enter an option name for the sibling product
That's it! the sibling product swatches will now automatically display on the product pages.
In the theme editor, you can change the Option label and Swatch style in the product template. Click Variant selector under Product overview to find the Sibling product swatches settings.
By default, Product sibling swatches display the first product image. Instead of product images, you can choose to display swatch colors.
In the Theme settings, you can override the default colors and assign custom colors to swatches by adding a hex code color (eg. #00b300
).
To find the hex code for the color you want, you can use a HTML color picker like this one. When you choose your color, select and copy the six-character hex code, including the hashtag symbol.
By default, all published collections appear on the Collections list page and in Search results. Follow the steps below to hide sibling collections on your store.
To hide a sibling collection from the Collections list page, you can choose to show only selected collections, instead of all collections.
While Shopify doesn't provide an option to hide collections, you can use metafields as a workaround to remove specific collections from search results.
Related links
seo.hidden
key.1
in the hide collection metafield.