Magento

There are three kinds of products in Magento: Simple, Grouped, and Configurable.  If you want to make a simple product, they are covered in detail in the “Creating products” tutorial.

Advanced Products

Advanced products in Magento are a way to consolidate product variants onto a single product info page in the front-end.  The variants themselves have their own SKUs and stock management.  This is very powerful - it allows you to let customers search for the individual variants, but browse only to the consolidated product pages.  (If that’s the implementation you want - you could also let customers browse the individual SKUs.)

Configurable Products let your customers select the variant they desire by choosing options.  For example, you sell t-shirts in two colors and three sizes.  You’d create the six variants as invidivual products (with their own skus) and then add these six to a configurable product from where customers can choose size and color, then add to cart.  If desired you could also have customers search for “red medium t-shirt” and land on the specific page for this variant.

Creating a Configurable Product

There are a few steps involved:

1. Create the attributes that will be configurable by the user - for our example they will be Size and Color
2. Create the attribute set that will be assigned to the variant products - for our example, we’ll call it “T-shirt”
3. Create the invidivual variant products
4. Create the configurable product, and add the “T-shirt” attribute set
5. Add the individual variants to this configurable product

Creating Attributes

Below are screenshots of how the configurable attribute “Size” is set up.

Attribute Properties

Notice the “Catalog Input Type” is set to dropdown - this is required for the attribute to be compatible with configurable products.  The Scope is also set to Global. When both of these settings are cconfigured in this manner, the Use To Create Configurable Product dropdown will appear. This must be set to Yes. Required is also set to “Yes”.  In order for a Simple Product to be associated to a Configurable Product, it must have a value for all configurable attributes, so making it required ensures that you will remember to add a value for this attribute for all Simple Products.

Labels/Options

Note how the size options and their sort order have been entered above.

The attribute “Color” will be set up exactly the same, with only the Labels/Options page changed.  It will look as follows with these 4 colors:

Creating the attribute set

Now we’re ready to create an attribute set called “T-shirt” to start using for this product.  Go to “Catalog -> Attributes -> Manage Attribute Sets” and press “Add New Set”.

In our example, the name is “T-shirt” and we’re basing it on the default set:

Continue to the next page.  Drag the two attributes into a new group which I called “Selectable Options”:

If any of that’s confusing, be sure to read the section called ”How do I create an attribute set?”.

Creating the simple products

Now that we created the attribute set, we’re ready to start entering the data for the simple products that will be part of the configurable product.

1. Navigate to “Catalog -> Manage Products”.  Press “New Product”
2. Create a Simple Product based on the “T-shirt” attribute set


3. Fill in all the required information, and make sure to fill in options for the “Selectable Options” tab, as shown below:


4. After you’re done, press “Save Product”

Now, repeat these steps for every combination of options your super product will contain. Since this example had 3 sizes and 4 colors, you would create the 12 options individually. You can create duplicates of the first product you create to vastly speed up this process.
You should have a product list similar to this one when you’re done (of course, titles and SKUs can be whatever you choose, this example just uses the attributes in the title and sku):

After you’re done, you’re ready for the next and final step!

Creating the Configurable Product

1. After making all the variants, navigate to “Catalog -> Manage Products”
2. Press “New Product
3. Select ‘Configurable’ based on the T-shirt attribute set


4. The next screen lets you pick which attributes you want to associate.  It picks attributes from the set that are Input Type: Dropdown, Scope: Global, and Use To Create Configurable Product: Yes


5. Select both “Size” and “Color” and press “Continue”
6. The next page is the regular create product page, with the addition of the “Associated Products” tab at the bottom. The general tab used for the sample product looks like this:


7. Finally, let’s take a look at the “Associated Products” tab:  If you push “Reset Filter”, you’ll see all products associated to the T-shirt Attribute Set that have options for the Size and Color attributes.  If you check one (or all) you’ll see the “Associated Products Attributes Configuration” above the list.  This is where you decide the sort order of the selectable attributes (click and drag an attribute to change) and also any price adjustments that selecting a specific attribute will have on the configurable product.  For example:  If you wanted the Magento shirt to be $5.00 more, you just have to enter “5” in the text field.  Price adjustments can be either percentage based or a fixed amount.  For our example, the Large size is 10% more, and the Magento shirt is $5.00 more.



In the above image you’ll notice an option called Attribute Name.  This is the text that will display in the front-end for this product.  In the example, “Select Color” and “Select Size” are the desired text for the front-end.

Above this, you will see a button called Create Empty. This allows you to create a Simple Product in a pop-up window that will automatically be associated to this Configurable Product. It is very useful if you have forgotten to create all of your Simple Products prior to beginning the Configurable Product creation phase.

When you’re done with all this, associate the product with a store and front-end category, and you’ll be able to find it in the front-end.  You’re done!


Front-end

Here’s a section from the front-end for this configurable product, done and ready to use: