Product Groups feature overview

Edit on GitHub

The Product Groups feature lets product catalog managers group products by attributes, like color or size. A typical use case is combining the same product in different colors into a product group (not to be confused with product variant). The feature changes the way shop users interact with products by improving accessibility and navigation.

Product Groups on the Storefront

Examplary content

By default, there is no way to display product groups on Storefront. This section describes an exemplary implementation that you can add to your project. For more details, see HowTo: Display product groups by color on Storefront.

On the Storefront, the product group is not displayed as a group. Instead, the behavior of all the UI elements related to the products in the group changes. It affects the product abstract card and Product Details page.

Product abstract card:

  1. Holding the pointer over the product abstract card opens a dialog with the colors of all the products included into the group.
  2. Holding the pointer over or clicking a color circle changes the abstract product image, title, rating, label, and the price.
  3. Having held the pointer over the needed color, a shop user clicks on the product abstract card to be redirected to the Product Details page of the corresponding product.

Product group - product abstract card

Product Details page:

  • Holding the pointer over a color circle changes the abstract product image.
  • Once you stop Holding the pointer over a color circle, the image changes back to the image of the product you are viewing.
  • Clicking on a color circle redirects the shop user to the page of the corresponding abstract product.

Product group - product details page

Product Groups in the Back Office

In the Back Office, a product catalog manager can view what product group an abstract product belongs to.

Also, they can insert product groups into CMS pages using content widgets in the WYSIWYG editor.

Creating product groups

Only a developer can create product groups by importing them or modifying the database. Only abstract products can be added to product groups.

Current constraints

The feature has the following functional constraints which are going to be resolved in the future:

  • There is no user interface to manage product groups in the Back Office.
  • Products can only be grouped by the color attribute.

Video tutorial

Check out this video tutorial on product groups:

Product Groups feature integration File details: product_group.csv HowTo: Display product groups by color on the Storefront