Miriam sells the whole look, and every customer picks their own sizes.

Miriam sells menswear and photographs looks every season: quilted jacket, flannel shirt and chinos. Until now the photos said "Shop the look" with three links underneath, and usually only the jacket was bought. Now the look hangs off the jacket as one package: the customer picks the jacket size on the product page as usual, and the sizes of shirt and chinos right inside the package, without leaving the page.

The look in the shop

Three pieces, three sizes, one click.

On the jacket's product page the look appears as one package: all three pieces with their unit price, and below them the price for all. The customer adds it to the cart in full with one button, without opening three pages.

1

The jacket

The customer picks the jacket size on the product page, as with any product. The package shows exactly that size, here the quilted jacket in M.

2

Shirt and chinos

One selection field per piece with every size and its price. The customer takes the shirt in M and the chinos in 32 without leaving the page.

3

No size forgotten

While a size is still missing, the button adds nothing to the cart but opens the details with the note to select the desired variant.

4

In the cart

There the look is one line item, with every piece underneath in its size and with its own product number.

The package belongs to the jacket because Miriam builds her looks around the jacket. It could just as well hang off the chinos: one piece of the look is always the product on whose page the package appears.

Setting it up

Created once on the jacket, it applies to every size.

You maintain the bundle on the jacket's parent product in the "Bundles" tab. Every size of the jacket without a bundle of its own takes it from there. So you create the look once, not separately for S, M, L and XL.

1

Add Bundle

Open the quilted jacket in the administration, switch to the "Bundles" tab and click "Add Bundle".

2

Shirt and chinos with all sizes

Under "Add products to the bundle" you choose shirt and chinos as the parent product, not as a single variant. Only then does the customer get the selection field.

3

The price advantage

In the "Discount" tab the "Type of discount" stays on "Percental rebate", here 10 percent on the whole look.

4

Details expanded

In the "Options" tab you set "Details" to "Expanded (visible)". The selection fields sit in the details; collapsed, the customer only sees them after the first click.

The sizes

Which sizes the selection field lists, and in which order.

Two settings of the plugin configuration in the "Product detail page" card decide what the selection field looks like. Both apply to every bundle of the sales channel.

"Sort variants" is set to "By name" out of the box. For letter sizes that means alphabetical: L, M, S, XL. With "By display order of the storefront display" the sizes follow the size selection on the product page.

"Behaviour when products are not available" decides what happens to sold-out sizes. Out of the box ("Remove bundle") a size drops out of the selection field as soon as it is a clearance sale item and its stock no longer covers the quantity. If no size of the shirt is left, the package disappears.

Order of the shirt sizes in the selection fieldShirt in S, M, L, XL and XXL
Sort variantsOrderSuits
By nameL, M, S, XL, XXLnumber sizes such as 46 to 56, colours
By display order of the storefront displayS, M, L, XL, XXLletter sizes in the order of your product page

The selection field lists every size as "Size: M (€49.90)", that is property, value and price. Per piece the field shows up to 150 variants; a shirt in six sizes and four colours needs 24.

Worked through

What the look costs.

Quilted jacket, flannel shirt and chinos, each in the customer's size, with 10 percent off everything.

Quilted jacket, size M129.90 €
Flannel shirt, size M49.90 €
Chinos, size 3279.90 €
Total of the pieces259.70 €
Bundle discount, 10 %− 25.97 €
Price for all233.73 €

If one size costs more than the others, say the shirt in XXL, the selection field shows its price. As long as no size has been chosen, unit price and package price carry a "from"; once chosen, the package immediately calculates with the selected size.

What applies

One package on one piece, put together by you.

The look appears as a package on the product page of one of its pieces, below the image or at the buy box. Markers in the photo that let the customer click individual pieces are not part of it. If you show several looks with the same jacket, you create several bundles on it; they appear one below the other, each with its own price.

You decide what goes in. If the customer is to build their own outfit from groups such as jackets, shirts and trousers, that is the job of a product configurator such as the Product configurator for sets. If a customer only wants to leave out one piece, the "Selection" "Selectable bundle" is enough: they take the shirt out and do not have to choose a size for it.

Common questions

Can the customer pick a different size for every piece in the bundle?

Yes. If you add a piece as a parent product with all its variants, it gets its own selection field in the package. Shirt in M and chinos in 32 are therefore no contradiction within the same look. If you add a single variant instead, that size is fixed.

How does the customer pick the size of the jacket the package hangs off?

As with any product, through the size selection on the product page. The package takes the size currently selected as its first piece. You create the bundle on the parent product for this; every size without a bundle of its own takes it over.

Why are the sizes listed as L, M, S?

Because "Sort variants" is set to "By name" out of the box and letters are sorted alphabetically. Set it to "By display order of the storefront display" and the selection field follows the order of your product page.

What happens when a size is sold out?

Out of the box it drops out of the selection field as soon as it is a clearance sale item and its stock does not cover the quantity. If no size of a piece is left, the package is hidden or, with "Remove product from bundle", offered without that piece. With "Oversell product" every size stays selectable.

What does the package show when one size costs more?

The selection field gives every size its price. As long as no size has been chosen, unit price and package price carry a "from"; after the choice the package calculates with the price of the selected size.

Can the customer put the look together themselves?

With a selectable bundle they can take individual pieces out, but not add others. You decide the pieces and their quantity. An outfit the customer builds freely from groups is the job of a product configurator.

Try it in the demo shop.

Look at a bundle on the product page and add it to the cart yourself.