How to Create Configurable Product in Magento 2

A configurable product on the Magento 2 frontend looks like a single product that offers options and lets customers choose between variations. However, these variations are simple or child products, each with a unique SKU.

We’re using Magento 2.4.1 for this guide. However, all the steps used here will work in other Magento 2 versions.

Prerequisites

We recommend creating an attribute set before creating a configurable product in Magento 2. Attribute sets are reusable groups of product attributes such as color, size, and material. They make it easier to create products in Magento using pre-configured options.

Magento includes a default attribute set with basic attributes like colors and sizes. You can review or edit its default set by going to Stores > Attributes > Attribute Sets in the Magento admin panel.

Create the Configurable Product

Select the Product Type

In the Magento admin panel, go to Catalog > Products, expand the Add Product dropdown menu on the top right-hand side, and select Configurable Product.

Choose an Attribute Set

On the “New Product” page, you’ll see the Attribute Set option set to Default.

You can continue with the default attribute set or select another attribute set from the dropdown. You have two options to choose the attribute set: typing out the attribute name in the Search box or selecting it from the list.

Here, we’ll be selecting the Top attribute set as we need more attributes like sleeve, collar, and activity to describe characteristics of the product.

Once you select a new attribute besides the Default, the page updates to reflect the recent changes. If you want to add a new attribute to the attribute set you’ve selected, click Add Attribute (black button) on the top right-hand side of the page.

Fill in the Mandatory Details

1. Before filling in the required details, click on the Enable Product toggle and change it from Yes to No. We’ll enable it once we’ve created the configurable product and are ready to publish it live.
2. Product Name: Enter the product name.
3. SKU: The default SKU is created based on the product name. You can either continue with the default option or change it as per your needs.
4. Price: Enter the product price.
5. Click the orange Save button and continue to edit the product.

Upon saving the product, you’ll see the product name followed by Store View scope. Choose the Store View where you want this product to be available and proceed to the next step.

Add the Remaining Optional Details

1. Tax Class: Select Taxable Goods to apply tax on the product or None if you don’t want to add any tax.
2. Quantity: Leave this field blank. The Quantity of a configurable product is set by the product variations, i.e., child or simple products.
3. Stock Status: Leave the field as the default option, Out of Stock. Each simple product variation determines the Stock Status. As we’ve left the Quantity field blank, the Stock Status has changed to Out of Stock.
4. Weight: Enter the product weight, which is the weight of a single unit. All configurable products must have a weight. Even if you choose This item has no weight, it will change to This item has weight after you save the product.
5. Visibility: There are four options in the dropdown list:
   Not visible individually: The product is not visible on Catalog and Search Results pages. It is accessible only through URL.
   Catalog: The product is visible on the Catalog page.
   Search: The product is visible on the Search Result page.
   Catalog, Search: The product is visible on the Catalog and Search Result pages.
   For most, the default setting of Catalog, Search works best.
6. Categories: You can choose an existing category from the dropdown or create a new category. Click on New Category and enter the Category Name to create a new category. Then select the Parent Category to set its position in the menu and click Create Category.
7. Set Product as New From: This lets you display the product to the New Products List widget for a specific period. You can leave this blank and proceed to the next step.
8. Country of Manufacture: Select the manufacturing country from the dropdown.
9. Fill in other additional attributes specific to your attribute set. You can also complete this information later.
10. Save your work by clicking on Save in the upper-right corner.

Add Configurations

To add configurations, scroll down to the Configurations section and select Create Configurations.

I’ll show how to add configurations for three colors and four sizes in this example. So there will be 12 simple products, each having a unique SKU.

A progress bar at the top shows the four sections: Attributes, Attribute Values, Bulk Images & Price, and Summary. Here’s how you can configure them:

Choose the Product Attributes

1. Tick the checkbox of each attribute from the options. Here, I’ve selected Color and Size attributes. You can add a new attribute by clicking on Create New Attribute on the right-hand side and following these steps:
   Fill in the Attribute Properties section.
   Click Save Attribute.
   Then, select the newly created attribute checkbox.
2. Select the orange Next button to proceed.

Select Attribute Values

1. Tick the checkbox of the corresponding attribute values. These values create different combinations to create a unique SKU. For example, Black-S, Black-M, Red-S, Red-M, etc.
2. You can reorganize the attributes by grabbing the Change Order icon and dragging it up or down. This position will determine the display order of the attributes on the frontend.
3. Click Next to proceed.

Assign Images, Price, and Quantity

This step allows you to assign images, prices, and quantities for each configuration. You can either apply the same setting to all SKUs or configure each SKU separately. You can also skip the settings entirely and return to it later after creating the variations.

Configure Images

Choose one of these methods to set up the images:

Method 1: Same images per SKU

1. Select Apply single set of images to all SKUs.
2. Below the options, click on the box to browse images and add them to the product gallery. Alternatively, you may drag and drop the images here.
3. Click the Trash Bin icon to delete an image.

Method 2: Unique images per SKU

Use this option to upload unique images for each SKU. For example, when the customers click on the Blue color, they will see the respective image updated in the product gallery.

1. Select Apply unique images by attribute to each SKU.
2. Choose the attribute from the Select Attribute dropdown. Over here, we’ll be adding images for the Color attribute.
3. Add images to the respective attribute value.

Configure Pricing

Choose one of these methods to set up pricing:

Method 1: Same price per SKU

1. Select Apply single price to all SKUs.
2. Enter the price.

Method 2: Unique prices per SKU

1. Select Apply unique prices by attribute to each SKU if you want different pricing for some or all the product variations.
2. Select the attribute from the Select Attribute dropdown. In this example, we’ll select the Color attribute.
3. Enter pricing for each attribute value. We’ll be adding a different selling price for white color tees.

Configure Quantity

Choose one of these methods to set up the quantity:

Method 1: Same quantity per SKU

1. Select Apply single quantity to each SKUs if you want each simple product to have the same stock.
2. Enter the quantity.

If you’re using a Multi-Source inventory, assign sources and add quantities at this stage by following these steps:

1. Select Apply single quantity to each SKUs.
2. Click Assign Sources to add a source.
3. Search for a source you wish to add and then tick the checkbox.
4. Enter the quantity per source.

Method 2: Unique quantities per SKU

1. Select Apply unique quantity by attribute to each SKU if you want different quantities for some or all the product variations.
2. Enter the quantity per attribute.

 

Click Next in the top right corner once you’re done configuring images, prices, and quantity.

Create Product Configurations

It might take some time to create product configurations. Once they appear, go through the child products to verify the details.

Click the Generate Products button in the upper right corner once you’re done configuring images, prices, and quantity.

Assign Product Images

Now that the configurable product variations have been created add images for the product in the Images and Videos section.

Configure Remaining Optional Product Information

Scroll download and fill in the remaining optional product details:

• Content: Add short and long descriptions of the product.
• Related Products, Up-Sells, and Cross-Sells: Choose which products to recommend to customers when viewing or buying the product.
• Search Engine Optimization: Optimize the URL and metadata.
• Customizable Options: Add additional customizable options.
• Products in Websites: Add the same product to specific websites if you’re running a multi-store setup.
• Design: Customize the product page layout here or go with the default option.
• Gift Options: Allow customers to add a message when purchasing this product.

Enable and Publish the Product

1. Now you’re ready to publish the product. Scroll to the top and change the Enable Product from No to Yes.
2. Click Save and Close to complete adding the configurable product in Magento.

Configure the Shopping Cart Thumbnails

When you’re on the checkout page or shopping cart, you’ll see thumbnails of the parent configurable product image instead of the child product image. This is the default behavior of Magento 2.

To update this setting and show the image of the child product, follow these steps:

1. Go to Stores > Settings > Configuration.
2. On the left-hand side, expand Sales and then select Checkout.
3. Expand the “Shopping Cart” section unselect the Use system value checkbox next to Configurable Product Image.
4. Choose Product Thumbnail Itself from the dropdown.
5. Click Save Config.
   

That’s it! You’ve created a configurable product in Magento 2 successfully. If you’re having trouble viewing the product, refresh the Magento cache to update your changes on the frontend.