Related Products

Data Structure

The Related Products Experience is typically presented on a Shopify 2.0 theme using the following metafield structure which is a simple flat array of product meta.

[
    {
        "id": "123456789",
        "color": "#000",
        "scolor": "",
        "label": "Black Example",
        "handle": "black-example",
        "soldout": false,
        "hidden": false,
        "group": "Color"
    },
    {
        "id": "123456780",
        "color": "#fff",
        "scolor": "",
        "label": "WhiteExample",
        "handle": "white-example",
        "soldout": false,
        "hidden": false,
        "group": "Color"
    }
]

Field Definitions

Field Name	Type	Required	Description
id	number	yes	productId
color	string (hex)	yes	swatch color
scolor	string (hex)	no	secondary swatch color
label	string	no	option label
soldout	boolean	yes	any variant above 1 unit of stock
hidden	boolean	yes	manually hide or product set to draft
group	string	no	group name for product

Operating Logic

When products are updated in the store, the changes are reflected on all the metafields used by that group

In the case of a product selling out - which is considered when stock falls to 0 or below, the soldout flag will be set to true

UI on the widget can be toggled to show a sold-out experience if desired which reduces to opacity and strikethroughs the swatch.

In the case of a product being "deleted" or "archived", the product is removed from the group

In the case of a product being set to "draft", the product will be set to "hidden" to avoid any 404 errors