Magento 2 Marketplace Vendor Product Addon

3.2.Add a Configurable Product

↑ Back to Top

Magento 2 Configurable product feature is used to create a single item with different variations. For example, a coffee cup available with different variations such as different colors and sizes. The creation process is similar to the Simple Product creation with the option to create the Configurations.

Hence, Configurable products enable customers to choose the options such as the shirt color. Vendors need to add a simple product for each configuration, that is, a product for each color.

To add a configurable product

Go to the Vendor Panel.
On the left navigation bar, click the New Product menu.
The menu appears as shown in the following figure:
Click Add Configurable Product.
The New Product page appears as shown in the following figure:
Click the Enable icon to switch to the enable the Product creation feature of the add-on.
In the Attribute Set list, select the required option.
Note: Based on the selection, other relevant fields appear.
Enter the required values in the respective fields.
In the Product Name box, enter the name of the product.
In the SKU box, enter the product SKU.
In the Price box, enter the product price.
In the Tax Class list, select the required option.
In the Quantity box, enter the required number of products.
Click the Advanced Inventory link.
The Page appears as shown in the following figure:
On the page, do the following steps:
1. In the Qty box, enter the required value.
2. Select the corresponding Use Config Settings checkbox, to use the default value.
  Or
  Clear the check box to activate the corresponding field, and then enter the required value in the respective box.
Scroll down to the Content tab, and then click the tab.
The tab is expanded and the relevant fields appear as shown in the following figure:

This section is used is used to provide some common information related to the product such as the product Name, SKU, Price, Tax Class, Images & Videos, Quantity, Weight, Category, Description, and so on.
The Description and the Short Description fields in the Vendor Product add-on are supported by WYSIWYG editor through which the vendor can provide a formatted description of the product using the font-style, font-size, text-alignment, text-color, images, tables and so on. The vendors (sellers) can choose the layout to display the description of the products in the front-end view.
Under Content, do the following steps:
1. In the Description box, enter the product description in detail.
  - Click the Show/Hide button to show or hide the editor respectively.
2. In the Short Description box, enter the short description of the product.
  - Click the Show/Hide button to show or hide the editor respectively.
Scroll down to the Configurations tab, and then click the tab.
The tab is expanded and the relevant fields appear as shown in the following figure:
Under Configurations, do the following steps:
1. Click the Create Configurations button.
  A page appears as shown in the following figure:
  ed with
2. Select the check box associated with the required attribute and then click the Next button.
  A page appears as shown in the following figure:
3. Select the check box associated with the required attribute values.
  If the required values is not available, then the vendor can create a new value.
4. To create a new value, do the following steps:
  1. Click the Create New Value link.
    A text box appears as shown in the figure.
  2. Enter the required value.
    The value is listed and selected on the page.
5. Click the Next button.
  A page appears as shown in the following figure:
6. Click to select the required option and then click the Next button.g
  A page appears as shown in the following figure:
  
  The summary appears in this step.
  Note: Click the Back button to go back to the previous steps and make the changes if required.
7. Click the Next button.
  The configurations are created and listed on the New Product page under the Configurations section as shown in the following figure:
  A vendor can do the following tasks on the current variations:
  - Choose a different product: Choose a new product to delete and replace the current product configuration.
  - Disable Product: Disable the selected configurable product.
  - Remove Product: Delete the selected configurable product.
  - Add Products Manually: Choose a new product
8. To choose a different product, do the following steps:
  1. Scroll down to the required variation.
  2. Click the Select link.
  3. Click Choose a different Product.
    A page appears as shown in the following figure:
  4. Click the respective row of the required product to select a new product to delete and replace the current product configuration, that is, the current variation.
    The current variation is replaced with the selected one and appears under the Configurations section.
9. To disable the current variation, do the following steps:
  1. Scroll down to the required variation.
  2. Click the Select link.
  3. Click Disable Product.
    The product is disabled and the Disabled status appears in the Status column of the respective product row.
10. To delete or remove the current variation, do the following steps:
  1. Scroll down to the required variation.
  2. Click the Select link.
  3. Click Remove Product.
    The selected product is removed from the Current Variations table.
Scroll down to the Images And Videos tab.
The tab is expanded and the section appears as shown in the following figure:
Use this section to display the videos showcasing the products, features or benefits, and so on. This tab has been customized in the Vendor Product Addon to include mass image upload feature. The vendor can upload multiple images simultaneously and choose to decide the image to set as the default image.
1. Under Images And Videos, do the following steps:
  1. Click the Browse area to upload or drag the image from the local system.
  2. Click the Add Video button to add the product relevant video if required.
2. Scroll down to the Search Engine Optimization tab, and then click the tab.
  The tab is expanded and the section appears as shown in the following figure:
  
  The Search Engine Optimization page of the basic product settings includes the primary fields used by search engines to index the product. It is used to provide the keywords or tags, which makes the searching process easier. It means while searching any product with the keywords listed in the Meta Keyword box, the customers are redirected to the page that includes those keywords.
3. Under Search Engine Optimization, do the following steps:
  1. In the URL Key box, enter the required URL link.
  2. In the Meta Title box, enter the required title.
  3. In the Meta Keywords box, enter the required title.
  4. In the Meta Title box, enter the required title.
4. Scroll down to the Related Products, Up-Sells, and Cross-Sells tab and then click the tab.
  The tab is expanded and the section appears as shown in the following figure:
  - Related products are shown to the customers in addition to the item they can look for.
  - An up-sell item is offered to the customer as a pricier or higher-quality alternative to the product the customer is looking for.
  - The Cross-Sell products are the impulse buy products that appear next to the shopping cart as the cross-sells to the items already existing in the shopping cart.
5. Under Related Products, Up-Sells, and Cross-Sells, do the following steps:
  1. To add the Related Products, do the following steps:
    1. Click the Add Related Products button.
      The page appears as shown in the following figure:
    2. Select the check boxes associated with the required products, and then click the Add Selected Products button.
      The selected products are added under Related Products as shown in the following figure:
  2. To add the Up-Sell Products, do the following steps:
    1. Click the Add Up-Sell Products button.
      The page appears as shown in the following figure:
    2. Select the check boxes associated with the required products, and then click the Add Selected Products button.
      The selected products are added under Up-Sell Products as shown in the following figure:
  3. To add the Cross-Sell Products, do the following steps:
    1. Click the Add Cross-Sell Products button.
      The page appears as shown in the following figure:
    2. Select the check boxes associated with the required products, and then click the Add Selected Products button.
      The selected products are added under Cross-Sell Products as shown in the following figure:
6. Scroll down to the Customizable Options tab, and then click the tab.
  The tab is expanded and the section appears as shown in the following figure:
7. Under Customizable Options, do the following steps:
  1. Click the Add Option button.
    The Option Title and the Option Type fields appear.
  2. In the Option Title box, enter the required value.
  3. In the Option Type list, select the required option.
    Based on the selected Option Type, the related fields appear as shown in the following figure:
  4. Enter the required values in the respective fields.
    Note: To remove the option, click the respective Delete icon.
8. Scroll down to the Product in Websites tab, and then click the tab.
  The tab is expanded, and the relevant fields appear as shown in the following figure:
  All the created websites, if any, are listed in this section.
9. Under Product in Websites, do the following step:
  - Select the checkbox associated with the required website.
10. Scroll down to the Design tab, and click the tab.
  The tab is expanded, and the relevant fields appear as shown in the following figure:
  
  The vendor can set the layout for the product page.
11. Under Design, do the following steps:
  1. In the Layout list, select the required option.
  2. In the Display Product Options In list, select the required option.
  3. In the Layout Update XML box, enter the layout update in the XML format.
12. Scroll down to the Schedule Design Update tab, and then click the tab.
  The tab is expanded, and the relevant fields appear as shown in the following figure:
13. Under Schedule Design Update, do the following steps:
  1. In the Schedule Update From and To boxes, click to select the date range from the calendar.
  2. In the New Theme list, select the required theme.
  3. In the New Layout list, select the required layout.
14. Scroll down to the Gift Options tab, and then click the tab.
  The tab is expanded, and the relevant fields appear as shown in the following figure:
15. Under Gift Options, do the following step:
  - In the Allow Gift Message list, select the required option to enable or disable the Gift message option.
16. Click the Save button.
  The Configurable product is created and a success message appears on the created product page. The created product is listed on the Manage Product page.