October 7,2021

Magento 2 Guide: Adding a Configurable Product

byAvatar Tim

There are a range of different product types you can add in Magento – simple, configurable, grouped and bundle product type, all of which display your products in different ways and have a wide array of uses (learn more about the different Magento product types).

Configurable products will normally have a dropdown with options for that product, such as a t-shirt that’s available in red, black and blue. For this example, we’ll be looking at how we’d create a product with different colours, you can then use this same principle to apply to other configurable products. In all cases, you’ll need to:

Add Your Attributes

To create a configurable product, we will need to define the options we want for the product as attributes, attributes are the fields that make up the product (learn more about attributes and attribute sets). To start with we’ll need to:

Create an Attribute

Go to the Stores > Attributes >Product in the menu.

magento-2-add-attributes-menu

Click on Add New Attribute in the top right. You will enter the name of your attribute in the top field, in this case we’ll go with colour. For the Catalog Input Type for Store Owner, change to Dropdown and changed the Values Required to Yes.

Now scroll down to the Manage Options (values of your attribute), this is where you will enter the colour options you want, you should then have something that looks like this.

magento-create-attribute-page

Go to the Advanced Attribute Properties below, and change Scope to Global, thisallows for your product to ge used throughout all of your websites.

magento-2-attribute-scope-global

Head over to the Storefront Properties on the left and configure the attribute way you want, once you’re done hit save in the top right.

TIP: if you’re going to be using layered navigation, switch the Use in Layered Navigation to Filterable With results.

Add Attribute Set

The attribute set will be what defines what fields your product has, for this, we’ll create a new attribute set called ‘Clothing’. Start by creating a new attribute set and calling it clothing.
magento-2-attribute-set-menu
Hit the save button and you’ll be shown a page that looks like this.

magento-2-new-attribute-sets

What we want to do here is find our attribute in the Unassigned Attribute column, and drag it into the Groups Column.
magento-2-attribute-set-attribute-added

Need help with Magento?

We are experts in Magento, with experienced designers, developers & marketers. If you need a hand, get in touch.

Create Your Configurable Product

We’ll start by heading to Products > Catalog.
magento-2-producst-catalog-menu
Here, we’ll click the Add Product dropdown in the top right and select Configurable Product.
magento-2-create-new-configurable-product
Now you’ll need to go through this and add all the necessary parts to your product. This is much the same as adding a simple product, except for being able to set a stock quantity.

Complete all you need to until you get to Configuration at the bottom. This is where we’ll be creating the options for the product, before we continue let’s briefly go over what you’ll be creating.

The configurations we’re about to create, are’re actually going to be making new simple products, one for each colour option. This is so when someone orders one of the colour options, it will point back to the mathcing simple product, taking away from that simple products stock quantity, allowing you to have seperate stock quanitites for each colour and better manage your inventory.

Now, to start, click Create Configurations.
magento-2-configurable-product-create-configurations
Here you’ll see a list of all the attributes you can use to create the options with, we’ll use the colour one we’ve created.

magento-2-select-attribute-configurable-product

On the next screen, we’ll see all the colour options we created in our attribute previosuly, choose the one(s) you for this product and click next.
colour-options-for-confiurable-product
Now you’ll be presented with a screen where you’re able to add images, price and quantity to the variations. We’ll skip images, as these products won’t be shown on the front end of the website.

For price, we’ll select ‘Apply unique prices by attribute to each SKU’, here we apply the prices to each option, for black and blue, we’ll price them at $10 and the red at $15.
configurable-product-colour-option-variations
For quantity we’ll select ‘Apply single quantity to each SKUs’, and add a quantity of 20, this will add stock quantity of 20 to each option.
colour-option-stock-quantity
Once we’re done we click next, which will take us to the summary page of the product options that will be created. Clicking generate products will create each of the colour options as a simple product. Once we’re finished we click save and you’ve now added a configurable product. Check the new simple products added have their visibility set to Not Visible Individually and you’re all done.

Well done, you’ve just added a Configurable Product in Magento 2

We are a experienced Magento Agency, working with brands both large and small. If you need any help with your Magento Store, get in touch with us today!>

Continue Reading

What sets our website designs apart?

Website design goes beyond aesthetics; it's about crafting an experience that keeps your audience engaged and encourages them to return to your business.

Avatar
Leanne October 18th, 2024
Understanding Website Architecture: A Comprehensive Guide

Did you know that, on average, users spend only 54 seconds on a website? In that brief moment, it’s crucial to grab their attention, engage them, and make them want to stay on your website. So, if your site is difficult to navigate, visitors are more likely to leave and seek an easier experience elsewhere. … Continued

Isev Team
Isev Team October 7th, 2024
How to Get a High Quality Website

One of our favourite quotes is “If it’s done right, it’ll last forever”, a statement that is specifically true for how important a quality website company, with talented developers and designers is. Sure, you could get a website built for you, or even build one yourself both at a lower cost than professional website builders … Continued

Isev Team
Isev Team September 24th, 2024
The Customer Journey: Tips and best practices

This article looks in detail at both the customer journey and the conversion funnel, analysing how they function and how they work hand in hand.

Avatar
Leanne August 15th, 2024