# Sibling product swatches

**Sibling products** allow you to set up variants as individual products with their own images and product details. On product pages, variant swatches link to other sibling product pages.

After **setting up sibling products**, you can choose display either **product images or custom colors** for the swatches.

<figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FdwAKN5NSaE1LAsrWjpB7%2Fsibling-swatches.png?alt=media&#x26;token=eaeaa343-9c77-48bd-bb90-43286adc5c33" alt="" width="563"><figcaption><p><a href="https://cornerstone-theme-flair.myshopify.com/products/inka-cup-caramel">View live demo of sibling product swatches</a></p></figcaption></figure>

{% hint style="info" %}
In collections and product listings, sibling products are displayed as individual products.
{% endhint %}

#### Watch video tutorial

{% embed url="<https://youtu.be/zrwX93EUSu8>" %}

## 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.

* **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

## 1. Add individual products to siblings collection

***

To create a group of sibling products, you need to create **individual products** and add them to a new **collection**. The collection is used to group your sibling products together as variant options.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your **Shopify admin**:

1. Click **Products** in the side panel. Click **Add product** to create the individual products for your siblings collection.

   > We recommend using the same product title that includes the different option names (eg. color). For example: "Shoes - Green", "Shoes - Blue", etc.

   > **Tip**: Create the first product then duplicate it to keep them consistent and save time from having to re-write and set up the details for each product.

   ![](https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2Fdnawo3RxAKecsaTaG98W%2Fsibling-products.png?alt=media\&token=edd10f9c-8584-4c26-a4ab-2423346c1add)
2. Go to **Products > Collections** to **Create collection**. Add your products to the collection.

   > You can name your collection anything you like.

   ![](https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FJRwdeWwqBmSZ6QLKkyTm%2Fsiblings-collection.png?alt=media\&token=d549e060-5c6e-412e-bcd6-e543cc316acf)

   > **Note**: By default, your sibling collection will appear on the Collections List page. To hide the sibling collection from the collection list page, you can choose **selected collections** to display in the theme editor.
3. Click **Save**.

</details>

## 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**.

{% hint style="info" %}
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](https://help.shopify.com/en/manual/metafields).
{% endhint %}

### 2a. Create metafield for siblings collection

***

Go to **Settings > Custom data** to create the first metafield for your **Products**. This metafield will be used to display sibling products as swatches.

{% hint style="danger" %}
If you are creating multiple sibling collections, you only need to create **one** metafield.
{% endhint %}

The metafield requires the following fields:

<table data-header-hidden><thead><tr><th width="239"></th><th></th></tr></thead><tbody><tr><td><strong>Name</strong></td><td>Siblings collection</td></tr><tr><td><strong>Namespace and key</strong></td><td><code>cornerstone.siblings_collection</code><br><em>Must be exact to work. Note that 'siblings' is plural with an 's'. Do not add or modify words.</em></td></tr><tr><td><strong>Type</strong></td><td>Collection (Reference)</td></tr></tbody></table>

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your **Shopify admin**:

1. Go to **Settings > Custom data**.
2. Click **Products**.
3. Click **Add definition** button in the top-right.
4. Enter "Siblings collection" in the **Name** field. Note that "Siblings" is plural.

   The **Namespace and key** field will automatically update to `custom.siblings_collections`
5. In the **Namespace and key** field, replace the word "custom" with "cornerstone".

   > The **Namespace** should now be `cornerstone.siblings_collection`. This namespace must match exactly or it will not work.

   > Do not add additional words or multiple metafields for different sibling collections.\
   > /
6. Click **+ Select content type** and select **Collection** under **Reference**.
7. Click **Save**.

</details>

### 2b. Define metafield for sibling option name

***

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:

<table data-header-hidden><thead><tr><th width="239"></th><th></th></tr></thead><tbody><tr><td><strong>Name</strong></td><td>Sibling option name</td></tr><tr><td><strong>Namespace and key</strong></td><td><code>cornerstone.sibling_option_name</code><br><em>Must be exact to work. Note that 'sibling' is singular with no 's'. Do not add or modify words.</em></td></tr><tr><td><strong>Type</strong></td><td>Single line text</td></tr></tbody></table>

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your **Shopify admin**:

1. Go to **Settings > Custom data**.
2. Click **Products**.
3. Click the **Add definition** button in the top-right.
4. Enter "Sibling option name" in the **Name** field. Note that "Sibling" in the name is singular and not plural.

   > The **Namespace and key** field will automatically update to `custom.sibling_option_name`
5. In the **Namespace and key** field, replace the word "custom" with "cornerstone".

   > The **Namespace** should now read as `cornerstone.sibling_option_name`. Note that "sibling" is singular, not plural. <mark style="color:red;">This namespace must match exactly or the siblings swatches will not work.</mark>
6. Click **+ Select content type** and select **Single line text**.
7. Click **Save**.

</details>

## 3. Update metafields for each sibling product

***

After creating the 2 metafields, go to **Products** in your Shopify admin to add information to the metafields.

That's it! the sibling product swatches will now automatically display on the product pages.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your **Shopify admin**:

1. Click **Products** in the side panel and open each individual product that's in the sibling collection..
2. Click the **Siblings collection** metafield and select the collection with your sibling products.

   ![](https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2Fgit-blob-e943ebf95d891cb1fe62fcd5a9552a0f769d153e%2Fsibling-select-collection.png?alt=media)
3. Click the **Sibling option name** metafield and enter text for the swatch label.

   > The option name will appear as a label above the swatch. It is also used to display custom swatch colors when product images are not enabled

   ![](https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2Fgit-blob-3552f9fff2e0c35f62373b7f9cccfb39f4c9e719%2Fsibling-add-name.png?alt=media)
4. Update these metafields for each product. Click **Save**.

</details>

## Change option label

***

By default, the label above the sibling swatches is "Color". In the product template, click **Variant selector** under **Product overview** to find the **Sibling product swatches** settings. Change the **Siblings label** text field.

## Show swatches as 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`**).

{% hint style="info" %}
Custom styles are also available for the [size and shape of swatches](https://help.fluorescent.co/cornerstone/product-pages/variant-options/variant-swatches/change-swatch-styles), which apply to *all* swatches in the theme.
{% endhint %}

> You can use a [HTML color picker like this one](https://htmlcolorcodes.com/) to find the hexcode for your color. Select and copy the six-character hex code, including the hashtag symbol.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Go to your **Product template** and click **Variant selector** under **Product overview**
2. Under **Product sibling swatches**, uncheck the **Show product image** option.
3. Click to open the **Theme settings** and open the **Product** tab.
4. In the **Custom swatch colors** field add the exact **Option name** used for your sibling product (ex. "Green") followed by a colon and your hex code color (ex. **`#00b300`**).

   > The **Option name** should match the name you entered in the "Sibling option name" metafield for your product.

   ![](https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2Fgit-blob-7ef20c3dd31e6903d914babb557adad27df58a45%2Fsibling-custom-color.png?alt=media)
5. Click **Save**.

</details>

![](https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2Fgit-blob-a56d9abce25b92a4550e5b370b261778b8829020%2Fswatches-html-hexcodes.png?alt=media)

## 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.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Use the template selector to open the **Collections list** template.
2. Click to open the **Collections list** section in the side panel.
3. Under **Select collections to show,** choose **Custom list**.
4. Click **Select collections** and choose only those collections that you want to show.
5. Click **Save**.

</details>

### 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.

<div><figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FYImaKEyBWH1drzn8EiH5%2Fsibling-collection-metafield.png?alt=media&#x26;token=b040473c-1656-4ab3-9ed9-1b030fc65e52" alt=""><figcaption><p>Add a collection metafield with a <code>seo.hidden</code> key.</p></figcaption></figure> <figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FQXVGQiW708LR4bDzCBP5%2Fsibling-collection-hide.png?alt=media&#x26;token=865ac466-6d12-4033-8d3e-2a1efd6b2d3a" alt=""><figcaption><p>Enter <code>1</code> in the hide collection metafield.</p></figcaption></figure></div>

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

From your Shopify admin:

1. Go to **Settings** > **Custom Data** > **Collections** > **Add definition**.
2. Enter `Hide collection` in the **Name** field.
3. Enter `seo.hidden` in the **Namespace and key** field.
4. Click **(+) Select type** and select **Integer**.
5. Make sure that **One value** is selected.
6. Click **Save**.

Return to your Shopify admin:

1. Go to **Products** > **Collections** and select the collection you want to hide.
2. Scroll down to the **Metafields** area.
3. Enter the number `1` in the **Hide collection** metafield.
4. Click **Save**.

</details>

***

> **Related links**
>
> [Variant options](https://help.fluorescent.co/cornerstone/product-pages/variant-options)\
> [Variant swatches](https://help.fluorescent.co/cornerstone/product-pages/variant-options/variant-swatches)\
> [Product pages](https://github.com/fluorescent/kb-cornerstone/blob/main/product-pages/variant-options/broken-reference/README.md)\
> [Collection list page](https://help.fluorescent.co/cornerstone/pages/templates/collections-list-page)