Sibling product swatches
Product pages
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.
Watch video tutorial
The tutorial video below uses the Spark theme as an example—be sure to replace any instances of 'Spark' with 'spark' in the settings.
Set up sibling products
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.
1. Add individual products to siblings collection
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.
Shopify | Products and collections are managed in the Shopify admin. To learn more, see Shopify's guide to Adding and Updating Products ↗.
2. Set up metafields for sibling products
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.
The steps below are for adding metafields to your product pages. In a later step, you will update the content of these metafields for each sibling product.
Shopify | 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 ↗.
2a. Define metafield for siblings collection
Create a single Collection metafield that will let you select the collection of sibling products that you want to display as swatches.
Follow the instructions below to create a metafield named "Siblings collection" with the exact Namespace and key: spark.siblings_collection
.
Note | You only need to create one metafield. Do not add additional words to the metafield name or create multiple metafields for different collections. The metafield must be exactly spark.siblings_collection
to work.
2b. Define metafield for sibling option name
Create a Text metafield to add option names to your sibling products (e.g. "Red" or "Wood"). The option name will appear above the swatch and can be used to set custom swatch colors.
Follow the instructions below to create a metafield named "Sibling option name" with the exact Namespace and key: spark.sibling_option_name
.
3. Update metafields for each sibling product
Now that your product pages have the custom metafields needed for sibling products, you can update them in your Shopify admin.
Once those metafields are updated, the sibling product swatches will automatically display on the product pages.
Change swatch style and label
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.
Show product swatch image or custom color
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.
Hide sibling collections
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.
Hide from collections list page
To hide a sibling collection from the Collections list page, you can choose to show only selected collections, instead of all collections.
Hide from search results
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
Last updated