Sibling products

To ensure each colour of a product has its own unique page and is listed separately on collection pages, DotDev recommends representing each colour as its own product in Shopify.

However, since Shopify doesn't have a built-in relationship between these products, displaying a "swatch picker" that allows customers to switch between colours of the same style can be difficult for merchants.

To solve this problem, DotApparel syncs tags to each product that detail its "siblings," allowing product detail pages to be linked together using Liquid or Javascript.

Option A: Product sibling metafields

DotApparel provides the "siblings" metafield, which is used to indicate sibling products. To enhance the product page, the frontend can be improved by utilising the new metafields structure to fetch information about sibling products.

The "siblings" metafield is located within the "dotapparel21" namespace and contains relevant details about sibling products. This information includes the color name, color code, title, handle, publishing status, tags, and other related data.

For example:

[
  {
    "colourName": "white",
    "colourCode": "WHT",
    "handle": "regular-raised-neck-l-s-t-shrt-pc19wjt145-white",
    "isCurrentProduct": false,
    "productLegacyResourceId": "8405009629485",
    "published": false,
    "imageUrl": null,
    "colourHex": null,
    "colourGroup": null,
    "styleCode": "PC19WJT145",
    "title": "regular raised neck long sleeve t.shirt",
    "tags": [
      "link-PC19WJT145",
      "swatch-white",
      "x-colourCode:WHT",
      "x-dotapparel",
      "x-mappingIndex:35102-92279",
      "x-markdown:no",
      "x-sibling-handle:regular-raised-neck-l-s-t-shrt-pc19wjt145-black",
      "x-sibling-handle:regular-raised-neck-l-s-t-shrt-pc19wjt145-white",
      "x-styleCode:PC19WJT145",
    ],
    "images": [
      {
        "altText": "PC19WJT145_WHT_1",
        "url": "https://cdn.shopify.com/s/files/1/0695/7518/0311/products/RE24DR036_REGRN085_01.jpg",
      },
      {
        "altText": "PC19WJT145_WHT_2",
        "url": "https://cdn.shopify.com/s/files/1/0695/7518/0311/products/RE24DR036_REGRN085_01.jpg",
      }
    ],
    "minPrice": 99.99,
    "maxPrice": 159.99,
  },
  { ... }
]

Option B: Product sibling tags

When a product has multiple colours, a series of sibling tags will be applied to the product, pointing at the Shopify product handles of each sibling colour. These tags include the "current" product in addition to the sibling colours, as often, the "current" colour will itself be displayed.

Let's say we have an ACME T-Shirt which comes in Red, Green and Blue. It has the style code ABC. The Red product (which has handle abc-acme-tshirt-red) would have the following tags automatically written by the DotApparel app.

• x-sibling-handle:abc-acme-tshirt-red

• x-sibling-handle:abc-acme-tshirt-blue

• x-sibling-handle:abc-acme-tshirt-green

Liquid or Javascript can be used to loop over these tags, and fetch the full product data from Shopify using the attached handle. Then, the name of the colour, the image or anything else on the product as dictated by the design can be output in the swatch area, thus linking the products together.

Prepending style codes to handles

We strongly recommend including the product style code at the start of the product handle. This is so that handles are guaranteed to always be unique. Often, merchants will add an “acme-tshirt”, and then later on, perhaps years later, add another product with the same title, which Shopify will then assign “acme-tshirt-1” as the handle.

Using handles which are not guaranteed to be unique, often causes issues for things like swatch resolution, so where possible, we always recommend prepending the style code.