Example - Adding a product with variants

✖
Copy to clipboard

The example on this page demonstrates how you can add a product with variants to an Xperience site. The product is based on the Brewer product type, and has seven product options in two Attribute option categories. 

The example uses the sample Dancing Goat MVC site.

Adding a new product

First, you need to add a new product of the required type and representation to a selected part of your on-line store.

  1. Open the Products application.

  2. Select Brewersin the product sections tree and click New ().

    • The system opens a page where you can specify product properties.
    • If the system doesn’t offer any product type (for example, if you deleted the default product types), create a new product type as described in Configuring product page types.

  3. Enter the following values for the product’s properties:

    • Product name: Xperience Brewer
    • Price: 39.99
    • Department: Brewers
    • Image: upload an image file
    • Representing: Standard product
    • Allow for sale: Yes (selected)
    • Track inventory: By variants

  4. Click Save.

The system adds the product to the selected part of your on-line store. Now you can add product option categories to the product.

Adding product option categories to the product

Add to the product two product option categories of the Attribute type.

  1. Switch to the product’s Options -> Option categories tab and click Add categories.
  2. Select Brewer material (Material) and Color (Color).
  3. Click Select.

The system adds the two selected product option categories to the product.

Selecting available options

Selecting available options while defining product variants is optional.

If you allow all options, you can later allow only selected variants made from these options (when defined).

Currently, all six possible options are available for the product. However, you want your customers to be able to buy the Xperience Brewer in certain colors only. 

  1. Click Select available options () for the Color (Color) option category.

    Product option customization

    • The system opens the Select available ‘Color (Color)’ options dialog. Here you can specify which options from this option category are available to your on-line store users.

  2. Select Allow only selected options.

  3. Enable the Red and Whiteoptions.

  4. Click Save & Close.

The system indicates that only two options from the Color (Color) option category are available to your on-line store users. Now you can add variants to the product using the available options.

Adding the variants

  1. Switch to the product’s Option categories -> Variants tab.

  2. Click Define available variants.

  3. Select the following option categories:

    • Color
    • MaterialThe system offers combinations of available options from the two option categories as variants of the product.

  4. Select the following variants:

    • Red-Ceramic
    • Red-Glass
    • White-Ceramic
    • White-Plastic

    Defining product variants

  5. Click Save.

On the product’s Option categories -> Variants tab, you can see that the product has four available variants.

On creating the variants, the system automatically assigned each variant its name and SKU (product number). The system also set the price of each variant according to the price of the product.

Now you can modify the variants’ properties.

Configuring product variants

Configure product variants if you want to change their properties, for example, the price, or name.

  1. Set the value of the Price property of the Xperience Brewer (Red, Ceramic) variant to 49.99.
  2. Click .
  3. Set the value of the Price property of the Xperience Brewer (White, Plastic) variant to 59.99.
  4. Click .
  5. For each variant, specify also the Stock property: 10.

If your customers purchase the large or medium-sized Xperience Brewer, they will be charged accordingly.

Reviewing the product on the live site

  1. Open the live site.

  2. Select Store -> Brewers in your on-line store main menu.

    • The system displays a list of all brewers that you offer in your on-line store.

  3. Click Xperience Brewer to view the product’s details page.

    • The system offers the brewer in the specified variants. Unavailable product option combinations cannot be added to the shopping cart.

  4. Select the ceramic red brewer.

  5. Click Add to cart.

The system adds the product (product variant) to the shopping cart.