Product Attributes, Options, and Variants

In this guide, we will explain the concepts of Product Attributes, Product Options, and Product Variants in Zid's system. These concepts are crucial in defining the different variations of a product and how they are displayed on the storefront.

Product Attributes

A product attribute is a characteristic or feature of a product, such as its color, size, or material. Each product attribute has a name and a corresponding value. For example, a product attribute could be "Color" with a value of "Red".

Product Options

A product option is a specific type of attribute that has a set of possible values. For instance, "Color" could be a product option with possible values of "Red", "Blue", and "Green". Each product can have multiple options, and the combination of these options defines the available variants of the product.

In the storefront, product options are displayed as dropdowns or selectors, allowing customers to choose their preferred variant based on their preferred values for each option.

Product Variants

A product variant is a specific combination of product attributes that defines a unique variant of a product. If a product has multiple options (like color and size), then each combination of values for these options (like "Red, Large" or "Blue, Small") would be a distinct variant of the product.

Here's an example of a product with a set of options and variants:

{
  "options": [
    {
      "name": {"en": "Color", "ar": "اللون"},
      "slug": "color",
      "values": {"en": ["Red", "Blue"], "ar": ["أحمر", "أزرق"]}
    },
    {
      "name": {"en": "Size", "ar": "الحجم"},
      "slug": "size",
      "values": {"en": ["Small", "Medium", "Large"], "ar": ["صغير", "متوسط", "كبير"]}
    }
  ],
  "variants": [
    {
      "attributes": [
        {
          "name": {"en": "Color", "ar": "اللون"},
          "slug": "color",
          "value": {"en": "Red", "ar": "أحمر"}
        },
        {
          "name": {"en": "Size", "ar": "الحجم"},
          "slug": "size",
          "value": {"en": "Small", "ar": "صغير"}
        }
      ]
    },
    {
      "attributes": [
        {
          "name": {"en": "Color", "ar": "اللون"},
          "slug": "color",
          "value": {"en": "Blue", "ar": "أزرق"}
        },
        {
          "name": {"en": "Size", "ar": "الحجم"},
          "slug": "size",
          "value": {"en": "Medium", "ar": "متوسط"}
        }
      ]
    }
  ]
}

In the above example, the product has two options:

• Color, with possible values of "Red" and "Blue"
• Size, with possible values of "Small" and "Medium".
  Furthermore, these options combine to form two variants - one with a "Red" color and "Small" size, and another with a "Blue" color and "Medium" size.