Create add-on products

Add-on products let shoppers customize or enhance their purchases with optional extras like monogramming, gift wrap, or warranties.

This section applies to both OSF and Storefront Classic. This section applies to Open Storefront Framework (OSF) and Storefront Classic.

You link an add-on product to a main product so shoppers see it on the main product’s details page and can optionally purchase it along with the main product.

If your storefront is built using Storefront Classic, you must make changes to several storefront layouts to allow your store to support add-on products. To learn how to display add-on products in Storefront Classic layouts, see Support add-on products. If your storefront is built using Open Storefront Framework (OSF), you can use the default OSF widgets that let you display add-on products in the Product, Cart, Checkout, Order History, Order Details, and Return Details pages. These widgets are described at the end of this topic.

Keep the following points in mind when working with add-on products:

  • An add-on product is available for all the main product’s SKUs. You cannot link an add-on product only to specific SKUs. For example, if monogramming is available for a tote bag, you cannot specify that monogramming is available only for canvas SKUs but not leather SKUs.
  • For an add-on product with multiple SKUs, you do not have to link all the SKUs to a main product. For example, suppose an add-on product for warranties includes SKUs for 1-year, 2-year, and 3-year protection. It may not be appropriate to offer a 2-year or 3-year warranty on inexpensive items, so you can choose to offer only the 1-year warranty on those items.
  • Any SKUs added to an add-on product after it was added to the main product are not automatically selected as add-ons. To add the new SKUs remove the product as an add-on and then add it again.
  • Add-on products can be products that you let shoppers buy separately, for example, USB cables or chargers could be sold separately and could also be sold as add-on products for phones. It does not make sense for certain types of add-ons, like monograms and gift wrapping, to be sold on their own, but for add-on products that can be purchased separately, the price is the same, whether the product is purchased on its own or as an add-on to another product.
  • Volume pricing is not supported for add-on products.
  • When a product is discounted by a promotion, add-on products linked to are also discounted. See Understand how add-on products affect promotions for more information.

Follow these steps to create an add-on product:

  1. Create a product type for the add-on product. This lets you add product, SKU, and variant properties specific to each type of add-on product, such as color, style, and text for a monogram, or length of coverage for a warranty. See Create and edit product types for more information.
  2. Create the add-on product from the product type you created in the previous step. See Create and work with products for more information.
  3. Create one or more SKUs for the new product. See Create SKUs for more information.

    Continuing with the monogram example, create a SKU for each combination of monogram colors and styles you want to offer.

  4. Add inventory for each SKU. See Manage inventory for more information.

Follow these steps to link an add-on product to a main product:

  1. On the Catalog page, select the main product to which you want to link add-on products.
  2. On the Add Ons tab, click the Include Add Ons button.
  3. Select one or more products from the list. You can filter the list by typing or pasting all or part of a product name or ID in the Add Ons box.
  4. Click Add Selected.
  5. Click Done when you finish adding products.
  6. By default, Commerce includes all an add-on product’s SKUs, but you can remove any that are not appropriate for the main product.

    Click an add-on product to display its SKUs, then click the X icon next to a SKU to remove it. If you remove all a product’s SKUs, Commerce automatically removes the add-on product.

  7. Click Save.

Import and export add-on products

You can use the import feature to create add-on products and link them to other products in your catalog. See Import and Export Catalog Items and Inventory for details about how to import and export data in Commerce.

The easiest way to format a file for importing catalogs is to start by exporting a file that you can use as a template for items you want to add or modify. See Export catalog items for more information about how to export data.

When you look at the exported spreadsheet, you can see that the second row displays column headings that contain the internal names of the exported properties. The addOnProduct column includes product IDs for the add-on products and the addOnSku column includes SKU IDs for each SKU available for the products in the corresponding addOnProduct cell.

Product data begins in the third row and continues for the remainder of the spreadsheet. If an item does not have a value for a property, the corresponding cell is blank. When an add-on product has multiple SKUs, its addOnProduct cell contains multiple entries for each product, one for each of the SKUs and its addOnSku column contains multiple entries, one for each available SKU. Multiple entries are separated with a| (vertical bar.

For example, suppose a product has optional monogramming. There are three monogramming SKUs, one for each of three colors. The addOnProduct cell in the spreadsheet might look like this:

item1:Product_19Mg|item2:Product_19Mg|item3:Product_19Mg

The addOnSku cell in the spreadsheet might look like this:

item1:Sku_19red|item2:Sku_19blu|item3:Sku_19grn

Display add-on products in Open Storefront Framework (OSF)

OSF includes default widgets that let you display add-on products on your storefront.

The product-details container widget, on the Product layout, includes a product-add-on-items widget. This widget renders a checkbox with the add-on item name. It includes a child component, add-on-item-details, that renders the additional details of each add-on item.

The add-on-item-details component has two child components:

  • add-on-item-shopper-input displays fields for shopper input, such as the message to include with a gift or the initials to use for a monogram. For details about shopper-input properties, see Create and edit product types.
  • add-on-item-variant displays the list of SKUs, a shopper can select from, such as combinations of monogram colors and styles. Each SKU is displayed with a radio button so shoppers can select it.

When the shopper selects add-on items and clicks the product-add-to-cart button, the selected add-on items are added to the cart along with the main product. The cart-add-on-items widget renders the add-on items, along with details like SKUs and shopper-input values, on the Cart, Checkout, Order Confirmation, Order History, Order Details, and Return Details pages. On the Cart, Extended Cart, and Checkout Shipping pages, a checkbox is displayed (and checked by default) for each add-on item. If the shopper unchecks a checkbox, the associated add-on item and its details are removed and the cart is repriced. (On the Checkout Review, Order History, Order Details, and Return Details pages, the checkbox is hidden and only add-on item details are displayed.)