How to Create Configurable Products in Magento | Adobe Commerce Stores

Magento | Adobe Commerce is one of the most flexible eCommerce platforms when it comes to default product types. The platform allows online merchants to create six types of products without any extensions: Simple products, Configurable Products, Grouped Products, Virtual Products, Bundle, and Downloadable Products. Today, we’ll find out how to create configurable products in Magento | Adobe Commerce.

What is a configurable product? For example, you sell T-shirts of 5 sizes and 5 color variations. All in all, you need to create 25 simple products, which is extremely time-consuming. This is the time when configurable products walk onto the stage as they allow to create one product with several options. Simply put, a configurable product is a more complicated version of a simple product that has several options.

How to Create Magento | Adobe Commerce Configurable Products

Step 1. Create Configurable Attributes

You can’t create a configurable product without creating configurable attributes like color, size, etc.

1. Go to Stores > Attributes > Product > add a new attribute.
2. Configure default label, catalog input type, values required.
3. Move to Advanced Attribute Properties and configure the settings.
4. Go to Storefront Properties and specify whether the attribute can be used in the search, layered navigation, or can be comparable on the storefront.
5. Save the attribute and move to Stores > Attributes > Attribute Set > add a new attribute set.
6. Go back to the list of available attributes and select the necessary one. Find the configurable attribute you’ve just created in the ‘Unassigned Attributes’ section and drag’n’drop it to the ‘Groups’ section.

Step 2. Create a Configurable Product

1. Admin sidebar > Catalog > Products
2. Under the Add Product button, select Configurable Product
3. Fill in the details:
4. Enter the main and short product descriptions

Step 3. Add Configurations

It’s the main part of any configurable product as here you have to add product options. In this example, we’ll be adding three different colors and prices.

1. Expand the Configuration tab > Create Configurations
2. Create a new attribute or select a default one from the list
3. Select a color attribute and press Next
4. Add the colors and press Next.
5. In the third step, you have to customize images and prices for your new products.

Image Options

If you want to apply the same image to every option select Apply single set of images to all SKUs.

If you want to set different images for your product options select Apply unique images by attribute to each SKU. Then, select the color attribute and add images for each option.

If you want to skip image loading select the Skip image uploading at this time button.

Price Options

If you want to set a single price for all product options select Apply single price to all SKUs.

To apply different prices to your product options, select Apply unique prices by attribute to each SKU.

You can skip adding the price by selecting Skip price at this time.

Quantity Options

The options are the same:

Apply single quantity to each SKU to apply a single quantity for all attributes.

Apply unique quantity by attribute to each SKU to differentiate the quantity of colored items if you have a limited quantity of these items ( e.g., twenty white T-shirts, five red T-shirts, and seven blue ones).

Select Skip quantity at this time to skip entering quantity.

When you finish the configuration, you’ll see a summary:

Step 3: Finish the Configuration

1. Add images and videos > fill up Alt text and Role.Here you should choose the main product image to display on the product page. By default, this image will be also used on the checkout page. For example, when you set the image of a red T-shirt as the main one and customers add to cart a blue one, they will see the red one on the checkout page.Do the following to fix it:Finish the configuration of your product > save config > go to the Admin Sidebar > Stores > Configuration > Sales > Checkout > Shopping Cart > Configurable Product Image > select Product Thumbnail Itself
2. Search Engine Optimization > Enter the URL Key, Meta Title, Meta Keyword, Meta Description.
3. Configure Related Products, Up-Sells, and Cross-Sells:Related Products — add products that are supposed to be purchase in addition
   Up-Sells — add similar products but of a higher quality
   Cross-sells — add products offered as last-minute purchases before the checkout
4. Configure Customizable Options to offer customers a selection of options with a variety of text, selection, and date input types.
5. Product in Websites. If your Magento | Adobe Commerce installation has multiple websites, you can edit the scope to use the product on specific sites.
6. Design. Choose a layout from the dropdown > Select where the product options appear on the product page from the drop-down menu (Display Product Options In) > Enter XML code in case of customizing the theme (Layout Update XML).

On the screen below you can see the result.

 

Mobecls team offers fixed-price service packages for Magento store support. Moreover, we’ll help you to choose a plan according to your business needs and specifics. The starting price is $2000. You can also select the number of working hours and the range of services. A service package may include updates, the installation of modules, bug fixing, SEO support and many more. Contact us and we’ll help you.