303.473.4400 / Toll Free: 888.772.0777
Select Page

In Magento Commerce, the question of how do you best build products with multiple options isn’t straightforward.

Lonny Burgos - Developer, Customer Paradigm  Magento Certified DeveloperIn this tutorial, Lonny Burgos, a Magento Certified Developer, guides you through the process.

 

Questions? Need help with your Magento site? Call us – 303.473.4400 or visit here to have a real person contact you now >>

Four Main Steps to Building Configurable Products with Multiple Options

  1. Build the Attributes – these are the options that will show up as dropdowns on the product page.
  2. Add the Attributes to an Attribute Set – the attribute set will provide an easy way to reuse the attributes for other products.
  3. Create Simple Products – these are the individual products for each option.
  4. Create Main Configurable Product – this main product will house all the simple products.

To better understand the relationship between the Main Configurable Product and the simple products, I will outline a simple scenario:

I have a product called Crispy Tee:

  • This product is manufactured in 2 sizes (small and medium), and 2 colors, red and white.
  • I will have to build out a total of 5 products:
    • 1 Main Configurable Product
    • 1 Simple Product – small/white
    • 1 Simple Product – small/red
    • 1 Simple Product – medium/white
    • 1 Simple Product – medium/red
  • I intend for the customer to pick out the size and color of my Crispy Tee product before they add it to the cart.

Step 1 – Build the Attributes (aka the options size and color)

Lets begin by building out the new attributes for our Crispy Tee. I am going to use the following attributes names:

  1. crispyshirtsize
  2. crispyshirtcolor

In the admin, navigate to Catalog->Attributes->Manage Attributes. Notice the Add New Attribute button to the right and click on it. (Right Side of screen)

Magento - New product attribute for attribute code, scope, catalog input type for store, values required.
Be sure to set the following for each attribute:

  • Attribute Code – the internal name of the attribute must be lowercase.
  • Scope – set to Global otherwise the attribute will not be visible throughout the site
  • Catalog Input Type Store – set to Dropdown, this setting will come into play later when we are setting up the Main Configurable Product.
  • Values Required – set to Yes so that the customer will be forced to pick both a size and color for the shirt.
  • Use to Create Configurable Product – set to Yes so that this attribute will be included in the list of options for the Main Configurable Product.

After these options are set. Click on Manage Labels on the right-hand side.

Magento - Edit Product Attribute - Default Size - Manage Options

Set the titles:

  • Admin  – Uppercase name that will show in the Manage Admin screen under Attribute Label
  • Default Store View – Lowercase label that will show on the frontend product page.

Manage Options:
Since we selected this option as a dropdown, the options need to be defined by clicking on the Add Option button. The options cannot be empty

  • Admin  – Uppercase name that will show in the backend.
  • Default Store View – Lowercase dropdown option that will show on the frontend product page.
  • Position – Sort the dropdown. In this case small will show up before medium in the dropdown.
  • Is Default – Select the dropdown option that dropdown will automatically default to the selected option.

Now Click on the Save the Attribute button.

Repeat Step One for each attribute. In this case, I will repeat for the crispyshirtcolor attribute.

The new attributes should now be visible in the Manage Attribute screen. Now it is time to move onto Step 2 – Add the Attributes to an Attribute Set.
Magento - Manage Attributes for color, size, attribute code and label

 

Step 2 – Add the Attributes to an Attribute Set

Navigate to Catalog->Attributes->Manage Attribute Sets and click on the Add New Set Button in the top right corner.

In the next screen, add a new name and base this attribute off of Default.

Magento - Add the attributes to an attribute set in Magento for editing set name

Now Click on the Save the Attribute Set button.

At this point, the newly created attributes need to be added to the attribute set. The new attributes are located under Unassigned Attributes.

Click and drag the newly created attributes from Unassigned Attributes and place into Groups. See screenshot below.

Click and drag attributes from unassigned attributes to groups

Now Click on the Save the Attribute Set button.

At this point, the new Attribute Set should appear in the Manage Attribute Sets screen. The next steps are to add the products and attach the attributes along with attribute sets.

Step – 3 Create Simple Products

Navigate to Catalog->Manage Products and locate the Add Product button.

Magento - Create new simple products by navigating to catalog and create product settings for attribute set and product type
Create Product Settings:

  • Attribute Set – Set this option to the new attribute set that we created in Step 2, Crispy Tee Shirts.
  • Product Type – Set this option  to Simple Product.

Click on the Continue button.

Now, the product’s configuration will be need to be setup in the General, Prices, Inventory, Categories sections in the left sidebar menu.

 

General Product Configuration Screenshot for Magento

 

Set the General Settings:

  • Name – the product name that will be used for all the Simple Products and the Main Configuration Product
  • Crispy Shirt Color and Crispy Size – each simple product will have a different option enabled. For the first simple product we will use the default dropdown options: white and medium.
  • Description – Enter a description of the product.
  • Short Description –  Enter a short description of the product.
  • SKU –  Enter a unique value for the SKU.
  • Weight – Enter a weight value
  • Status – Set this option to Enabled.
  • Visibility – Set to Not Visible Individually. This option is important so that the simple product does not show on the frontend. The product will hide inside the Main Configuration Product.

Next move onto the Prices section.
Prices section screenshot for Magento admin to add new product with prices

Set the Prices Settings:

  • Price – Set a price for the simple product.
  • Tax Class –  Set this value to the desired Tax Class, cannot leave blank in order to save the product.

Manage Inventory Screenshot for Magento commerce - quantity and stock availability

Setup Inventory Settings:

  • Qty –  Set a number of available products in stock.
  • Stock Availability – Set to In Stock so that the product is available.

Click on the Save button to save the product.
The product should now be added to the Manage Product screen.

So now, the other simple products need to be setup with the alternate options:

  • 1 Simple Product – small/white
  • 1 Simple Product – small/red
  • 1 Simple Product – medium/white – Created
  • 1 Simple Product – medium/red

In order to easily setup the alternate simple products. Click on the first simple product and in the Product Information screen, locate the Duplicate button.

A duplicate of the medium/white option will be created. Change the attribute options to medium/red and change the Status to Enabled. Keep everything the same, except for Description, Short Description, and SKU in the General Settings. Go through the Prices, Inventory, and Categories Setting to configure the product correctly.

Price Settings:
Be sure that a price and tax class are entered.

Inventory:
Be sure that a value is assigned to Qty and set the Stock Availability to In Stock.

Categories:
Add the product to the correct categories.

At this point, if everything is setup. Click on the Save button.
Repeat the duplication process for each attribute option.

All the following Simple Products should be created:

  • 1 Simple Product – small/white – Created
  • 1 Simple Product – small/red – Created
  • 1 Simple Product – medium/white – Created
  • 1 Simple Product – medium/red – Created

The last step is to create the Main Configurable Product. This product will be visible on the frontend and will contain all of the simple products.

Step 4 – Create Main Configurable Product

First, copy the name of the product from the simple products that we created. In this scenario all 5 products will have the name Nash Shirt.

Add a new product from the Manage Product screen.

Magento Screenshot - Create Main Configurable Product - attribute set and product type
Configure the Create Product Settings:

  • Attribute Set – Set to the same attribute set as the simple products, in this case, Crispy Tee Shirts.
  • Product Type – Set to Configurable Product. This option is setting up the Main Configurable Product.

Click Continue.

New Product Settings in Magento - Attribute Set and Product Type

Since we setup our attributes to Global, Dropdown, and to use with the Main Configurable Product, the options/attributes will be available. Enable both attributes.

Magento Screenshot - set new product general infomation, including name, description SKU and status

Set the General Settings:

  • Name – the product name that will be used for Main Configuration Product.
  • Description – Enter a description of the product.
  • Short Description –  Enter a short description of the product.
  • SKU –  Enter a unique value for the SKU.
  • Weight – Enter a weight value.
  • Status – Set this to Enabled.
  • Visibility- Set this to Catalog, Search so that it is visible in the frontend and included in the search.

Next move onto the Prices section.
Magento Screenshot - Set Price in New Product Screen

Set the Prices Settings:

  • Price – Set a price for the simple product.
  • Tax Class –  Set this value to the desired Tax Class, cannot leave blank in order to save the product.

Next Add the images for the main configurable product

Price and Tax Class - Thumbnails for Magento Product - Magento Screenshot

Use the Browse Files and Upload Files buttons to add the image.
Set an image Base Image, Small Image, and Thumbnail.
In this case, I only added one image, however multiple images can be added.

Next set the Inventory Settings:
New Product - Set Inventory Settings
Stock Availability – Set the Main Configurable Product to In Stock.

Next set the Categories for the Main Configurable Product.
Magento - New Product Category

Now the Simple Products need to be added to the Main Configurable Product.  To assign the Simple Products, navigate to the Associated Products in the left sidebar Product Information menu.

Magento Configurable Product - Simple Product with Associated Product Information Screenshot

Use the top portion to add a different price for specific options.
Add all of the Simple Products.
Click Save.

Navigate to the Main Configurable Product in a web browser.

See the Main Configurable Product in the Web Browser - Screenshot of Magento Storefront

The attributes/options will now be required before the customer adds the product to the cart.

Conclusion – Magento Configurable Products:

Once the entire is process has been completed. Magento makes it very easy for you to reuse attribute sets. In the scenario above, assume that the Crispy Tee now comes in blue and xsmall.

To accommodate for this change, the blue and xsmall features would be added to the dropdown for each existing attribute as follows: (Step 1)
1. crispyshirtsize – xsmall
2. crispyshirtcolor – blue

Next a simple product would need to be added similar to Step 3. Finally, the simple product would need to be included in the Associated Products in the Main Configurable Product.

Alternately, if you did not want to offer a small/white any longer. Then you would disassociate that simple product from the Associated Products in the Main Configurable Product.

Questions? Need help with your Magento site? Call us – 303.473.4400 or visit here to have a real person contact you now >>

Pin It on Pinterest

Share This