Now, imagine if you have shirts in different sizes and colors. If you add all of them as simple products and display them in the catalog, the result would be several red shirts that look exactly the same in the product listing page. It would be difficult to find the shirt that you need, and it would be visually confusing.
Fortunately, Magento allows you to create products that can be configured from the product details page. In our example, you will have a shirt product with multiple options to select the color and size from the product details page.
This is the concept of a configurable product. Configurable products are made of simple products that are associated. When the customer chooses a combination in the configurable product, the customer is actually choosing which simple product will be added to the cart from the configurable product page.
Let's create the first configurable product: Shirt. In order to do that, we will follow these steps:
- Go to the PRODUCTS | Inventory | Catalog page and select Red Shirt.
- Click on the arrow inside the Add Product button, and select Configurable Product.
- Set the following information for the configurable product:
General Information:
- Enable Product: Yes
- Attribute Set: Shirt
- Product Name:
Shirt - SKU:
shirt - Price:
$50 - Tax Class:Taxable Goods
- Quantity:
100 - Stock Status: In Stock
- Weight:
1lbs. - Visibility: Catalog, Search
- Categories: Default Category | Men | Tops
- Sleeve Length: None
- Color: None
- Size: None
- Gender: None
Configurations:
- Create Configurations: Click on this button to open the Create Product Configurations window, as shown in the following screenshot:
- Follow these steps to create different configurations (simple products) for the configurable product:
- Step 1: Select Attributes: Choose the configurable attributes for the product. The list of configurable attributes from the selected attribute set will be displayed in the list. Select color and size, and click on the Next button on the top-right corner of the screen:
- Step 2: Attribute Values: In this step, you can select which combinations will be available for the product. Each unique combination will create a new simple product.
Select the following colors:
- Black
- Blue
- Green
- White
Then, select the following sizes:
- S
- M
- L
- XL
- Step 3: Bulk Images, Price, and Quantity: Right below the title of the step, you will see the number of simple products that will be created based on the selection you made in the previous step.
In this step, you can customize the images, price, and quantity for each of the product combinations.
You can choose from the following options:
Images:
- Apply a single set of images to all SKUs: If you select this option, you will be able to upload a set of images that will be applied to all the product combinations.
- Apply unique images by attribute to each SKU: By selecting this option, you will be able to select one of the configurable attributes, and then upload an image for each attribute value. For example, we can select Color, and then upload the image for each color of the product.
- Skip image uploading at this time: You can skip this step and upload the images later.
Price:
- Apply single price to all SKUs: Set the same price for all product combinations.
- Apply unique prices by attribute to each SKU: You can select a specific configurable attribute, and then set a price for each configurable attribute value. For example, given a specific watch model, the price will be different depending on the case material: white gold versus stainless steel.
- Skip price at this time: You can skip the pricing on the wizard.
Quantity:
- Apply single quantity to all SKUs: Set the same quantity for all the product combinations.
- Apply unique quantity by attribute to each SKU: Just like the price, you can select a configurable attribute and set the stock depending on the attribute value. In the example that we gave before, you may have 10 gold, and 150 stainless steel watches.
- Skip quantity at this time: You can skip this step on the wizard.
For this example, we will apply the following settings:
Images:
- Apply unique images by attribute to each SKU: Select Color as a configurable attribute, and upload an image for each of the colors
Price:
- Apply single price to all SKUs: Set $
50as the price for all product combinations
Quantity:
- Apply single quantity to each SKUs: Set
100as the quantity for all product combinations
- Step 4: Summary: In this step, you can review all the product combinations that will be created for the configurable product. Once you review the list of products, you can click on Next to finish the product configuration:
- Step 1: Select Attributes: Choose the configurable attributes for the product. The list of configurable attributes from the selected attribute set will be displayed in the list. Select color and size, and click on the Next button on the top-right corner of the screen:
- Lastly, we will upload an image for the configurable product. The process is the same as the one we followed when we uploaded images for Red Shirt in Chapter 4, Creating Your First Product, Images, Inventory, and Prices.
For this configurable product, I created a special image showing the different colors in just one image:
- Finally, click on Save to add the product to the catalog. We are ready to save the configurable product and review how it looks on the Storefront.
Here is how the configurable product looks in the product listing page:
If you click on the blue swatch, you will see that the image is updated in the product listing page:
Here is how the product looks in the product details page:
And just like the product listing page, the image of the product is updated when you click on a color swatch:
If you add the configurable product to the cart, then you will see the details for the selected combination in the cart item:
Here, you can see the details in the checkout page:
