The official Magento 2 user guide contains a chapter Creating Products which explains the different product types and how to create them.

What you need is a Configurable Product. The configurable product will have associated simple products, which you already created, but you can also create them together with the configurable product.

Quoting the documentation:

---

Configurable Product

A configurable product looks like a single product with drop-down lists of options for each variation. Each option is actually a separate simple product with a unique SKU, which makes it possible to track inventory for each product variation. You could achieve a similar effect by using a simple product with custom options, but without the ability to track inventory for each variation.

Although a configurable product uses more SKUs, and may initially take a little longer to set up, it can save you time in the long run. If you plan to grow your business, the configurable product type is a good choice for products with multiple options.

Step 1: Choose the Product Type

1. On the Admin sidebar, tap Products. Then under Inventory, choose Catalog.

2. In the upper-right corner on the Add Product menu, choose Configurable Product.

   

Step 2: Choose the Product Template

The product template that is used to create a configurable product determines the selection of fields that are available, and must include at least one drop-down attribute. The drop-down attributes are included in an attribute set, which is then used as a template for the configurable product.

The template used in this example has drop-down attributes for color and size. To choose the product template, click the template field and do one of the following:

• In the Search box, enter the name of the template.
• In the list, choose the template that you want to use.

The form is updated to reflect the template.

Step 3: Complete the Required Fields

1. In the Product Details section, enter the product Name.
2. Either accept the default SKU that is based on the product name, or enter another value.
3. Enter the product Price.
4. If necessary, change the Tax Class. The default setting is “Taxable Goods.”
5. Because the product is not yet ready to publish in your catalog, set the Product Online switch to the “Off” position.

Step 4: Complete the Remaining Product Details

1. (Optional) You can add an image that represents the configurable product as a whole, or wait until later when you set up the configurations. In this example, we use an image that shows the top in all three colors. An image uploaded here becomes the image of the “parent product.”

   • Drag an image from your desktop, and drop it on the camera tile in the Images and Videos box.
   • In the box, tap the camera tile, and navigate to the image file on your computer. Then, select the image, and tap Open.

   A placeholder appears until an image is uploaded. If you prefer, you can later add video to the gallery.

2. The Quantity field is not available because it’s determined by each product variation.

3. To assign the product to a Category, do one of the following:

   • Start typing to find a match. Then, choose the Category.
   • Tap the Show List icon to view the Category tree. Then, drill down through the available categories, and tap each category that you want to assign to the product.
   • Tap New Category. Enter the Category Name and choose the Parent Category to determine its position in the menu structure. Then, tap Create Category.

4. Enter the product Description directly into the text box, and format as needed. Then, tap Submit. You can also use the WYSIWYG Editor for additional control.

   

Step 5: Save and Continue

This is a good time to save your work. In the next step, you’ll set up the configurations for each variation of the product.

1. In the upper-right corner, tap Save.
2. Continue with Adding Configurations.

Adding Configurations

The following example shows how to add configurations for three colors and three sizes. In all, nine simple products will be created with unique SKUs to cover every possible combination of variations. The progress bar at the top of the page shows where you are in the process, and guides you through each step.

Step 1: Select Attributes

1. At the bottom of Product Details, expand the Configurations section. Then, tap Create Configurations.

   

2. Mark the checkbox of each attribute that is to be used as a configuration.
3. If you need to add a new attribute, tap Create New Attribute. Complete the attribute properties, and tap Save Attribute. Then, mark the checkbox to select the attribute.

4. In the upper-right corner, tap Next.

   

Step 2: Enter Attribute Values

1. Mark the checkbox of each variation of the product.
2. To add a new value, click Create New Value. Then, enter the new value in the input box, and tap the Enter arrow.

3. Repeat these steps for each attribute that is included as a configuration.

   You can rearrange the list of attributes by dragging the box in the upper-left corner to a new position.

4. In the upper-right corner, tap Next.

   

Step 3: Configure the Images, Price, and Quantity

This step determines the images, pricing and quantity of each configuration. The available options are the same for each, and you can choose only one. You can apply the same setting to all SKUs, apply a unique setting to each SKU, or skip the settings for now.

1. Choose the configuration options that apply.

   Configure the Images

   • Method 1: Apply a Single Set of Images to All SKUs

     1. Select Apply single set of images to all SKUs.
     2. Browse to each image that you want to include in the product gallery, or drag them to the box.

     

   • Method 2: Apply Unique Images for Each SKU

     Because we already uploaded an image for the parent product, we’ll use this option to upload an image of each color. This is the image that will appear in the shopping cart when someone buys the shirt in a specific color.

     1. Select Apply unique images by attribute to each SKU.
     2. Select the attribute that the images illustrate. For example: color.
     3. For each attribute value, either browse to the images that you want to use for that configuration, or drag them to the box.

     If you drag the an image to a value box, it appears in the sections for the other values, as well. If you want to delete an image, tap the trashcan icon.

     

   Configure the Prices

   • Method 1: Apply the Same Price to All SKUs

     1. If the price is the same for all variations of the product, select Apply single price to all SKUs.
     2. Enter the Price.

     

   • Method 2: Apply a Different Price for Each SKU

     1. If the price differs for each or for some variations of the product, select Apply unique prices by attribute to each SKU.
     2. Select the attribute that is the basis of the price difference.
     3. Enter the price for each attribute value. In this example, the XL size costs more.

     

   Configure the Quantity

   • Method 1: Apply the Same Quantity to All SKUs

     1. If the quantity is the same for all SKUs, select Apply single quantity to each SKU.
     2. Enter the Quantity.

     

   • Method 2: Apply Different Quantity by Attribute

     1. If the quantity is the different for each SKU, select Apply unique quantity by attribute to each SKU.
     2. Enter the Quantity for each.

     

2. When complete, tap Next in the upper-right corner.

Step 4: Generate the Product Configurations

1. Wait a moment for the list of products to appear. When you are ready to add the products to your catalog, tap Generate Products.

   The product variations now appear at the bottom of Product Details in the Configuration section.

2. If you want to edit any of the settings, tap Edit Configurations.

   

Step 5: Publish the Products

1. If you are ready to publish the products in the catalog, set the Product Online switch to the “On” position. Otherwise, leave the switch in the “Off” position until the product is ready to publish.

2. When complete, on the Save menu, choose Save & Close.

   

3. When prompted to refresh the cache, tap the Cache Management link in the system message, and refresh the invalid cache.

4. On the Admin sidebar, tap Products. Your new configurable product and its variations appears in the grid at the top of the list.

Step 6: Configure the Shopping Cart Thumbnails (Optional)

If you have a different image for each variation you can set the configuration to use the correct image for the shopping cart thumbnail.

1. On the Admin sidebar, tap Stores. Then under Settings, choose Configuration.
2. In the panel on the left under Sales, choose Checkout. Then, expand the Shopping Cart section.
3. Set Configurable Product Image to “Product Thumbnail Itself.”

4. When complete, tap Save Config.

   

Step 7: View the Product in Your Store

When the product is online, tap the Admin arrow in the upper-right corner, and choose Customer View to see how they look in your store.

Things to Remember

• A configurable product allows the shopper to choose options from drop-down lists. Each option is actually a separate, simple product.

• Each drop-down list values is based on an attribute of the “Dropdown” input type. The drop-down attributes must be included in the attribute set, which is then used as a template for the configurable product.

• The thumbnail image in the shopping cart can be set to display the image from the configurable product record, or from the product variation.

---

^{Source: Magento User Guide (Configurable Product, Add Configurations)}