If your products have options like size, color, format, or package size, then you need to create product attributes and their values. For example, suppose you are selling a t-shirt that comes in a variety of sizes and colors. Then you need to create a "Size" attribute (with values like, "Small", "Medium", and "Large"), and you need to create a "Color" attribute (with values like "Red", "Blue", "Orange", and "Green").
As the above image suggests, a product with a particular set of attributes will not necessarily have a variation for every possible combination. Perhaps the size Large t-shirt is only available in Green, and the Medium t-shirt is only available in Blue and Orange. Product attribute values do not define the complete set of product variations; rather they define a set of possible attribute combinations available to product variations.
Let's start by creating a "Size" attribute with values Small, Medium, and Large.
On the Size product attribute configuration form, add "Small", "Medium", and "Large" as values.
You can use the drag-and-drop handle in the leftmost column, the "Reset to alphabetical" button, or the "Show row weights" link and "Weight" select lists to reorder the values. This order will be used on the form used to enter product variation data. CHECK ON THIS--FOR DEMO, ORDER DOESN'T SEEM TO WORK???
In the Simple product type documentation, we created a product type named, "Simple". Use the same procedure to create a new product type named, "Clothing", with a corresponding "Clothing" product variation type. When you add the "Images" field to the product variation type, you can re-use the existing Image field instead of creating a new one:
If you look at the configuration form for any product variation type, you'll see that a new "Attributes" section has been added, with a checkbox for the new "Size" product attribute. Select this attribute for the "Clothing" product variation type:
By default, all product attributes are required. However, after adding a product attribute to a product variation type, you can change its field settings so that it is not required. For example, to make the "Size" attribute optional for the "Clothing" product type, navigate to its "Manage fields" configuration page at
/admin/commerce/config/product-variation-types/clothing/edit/fields. Click the button for the "Edit" operation for the "Size" field.
On the "Size settings for Clothing" page, de-select the "Required field" checkbox and click the "Save settings" button to make the Size attribute optional for the Clothing product type.
For the Color attribute, we want to present the options as color swatches instead of just the color names. Most of the documentation for this functionality will be covered in the Add to cart form page of the Displaying products section. Here we'll just set up the Color product attribute.
To set up the Color product attribute like this, you will need to install the Color module. See the documentation on Extending Drupal Commerce for an overview of installing contributed Drupal modules.
The initial steps for creating the Color attribute are the same as the steps described above, for creating the Size attribute. Briefly, you need to:
Now that we've created the "Color" attribute, we can add an additional field by navigating to the "Manage fields" configuration page for the Color attribute:
On the "Field settings" configuration page, leave the default values are fine. On the "Color settings for Color" page, enable the "Required field" option and disable the "Record opacity" option. After saving the changes, you can return to Edit the page again, to set the default value for the color to "#000000".
After adding and configuring the Color field, return to the main configuration page for the Color attribute:
/admin/commerce/product-attributes/manage/color. Enter the following values for the "Color" for each attribute value:
Click the "Save" button to complete the configuration for the "Color" product attribute.
In the next section, we'll look at creating product categories.
Found errors? Think you can improve this documentation? edit this page