Layouts in pictures

Every layout option, with the exact setting that produces it. For advice on which to choose, see Layouts & which to use.

Two settings shape how a bundle looks, and they work independently:

Both live at the top of the Bundle Items tab. Below is each option, the setting that produces it, and how it looks (shown with a real hoodie that has colours and sizes). For when to pick which, see Layouts & which to use.

Where you set these

When you edit a bundle, the controls sit at the top of the Bundle Items tab: pick the page Layout on the right, and Multiple items (how a repeated item is shown) on the left. Every option below is just one choice in these dropdowns.

The Layout and Multiple items dropdowns at the top of the Bundle Items tab in the admin
The admin controls. The "To get this" note under each example tells you which option to choose here.

Page layout

List

To get this: set Layout to List.

A bundle in the List layout, items stacked down the page
Items stacked top to bottom. The default, and the right choice for most bundles.

Grid

To get this: set Layout to Grid.

A bundle in the Grid layout, items shown as cards side by side
Items as cards side by side. Good when a bundle has several items to scan as a set.

Step by step Pro

To get this: set Layout to Step by step.

A bundle in the Step by step layout, one item in focus with Back and Next
One item at a time, with numbered steps and Back / Next. Best for long or involved builds.

How a multi-quantity item shows

When one item is bought in several units (a three-pack, say), Multiple items controls how those units appear. It only changes a variable product bought in quantity; simple and single-unit items always look the same.

Stacked

To get this: set Multiple items to Stacked.

Three hoodie units shown as stacked cards, each with colour and size pickers
One card per unit. The default; clear and roomy.

Compact cards

To get this: set Multiple items to Compact cards.

Three hoodie units shown as compact cards
Tighter cards with no sideways scrolling. The best choice when each unit is [personalised](/docs/personalisation/).

Table

To get this: set Multiple items to Table.

Three hoodie units shown as rows in a table with colour and size dropdowns
One compact row per unit. A spreadsheet-style view for fast entry.

Quantity grid Pro

To get this: set Multiple items to Quantity grid.

A hoodie shown as a quantity grid of colour tiles
Tap a colour and type how many of each size. Best for bulk size runs. See [Quantity grid](/docs/quantity-grid/).

Different kinds of product

Every shot above uses a product you choose (a variable hoodie), which the customer configures. Two other cases are worth seeing:

A choice slot Pro

To get this: add the item as a choice slot instead of a fixed product.

A choice slot where the customer picks the garment from candidate cards
The customer picks the product from a pool you define, then configures it. See [Choice slots](/docs/choice-slots/).

Colour swatches

To get this: give the colour attribute swatch colours, or let them fill in from the name.

Colour options shown as swatch circles with sizes as pills
Colours show as circles instead of text. See [Colour swatches](/docs/swatches/).

Mix and match

Because the two settings are independent, you can combine them freely: a List page with a Quantity grid item, a Grid page with Compact cards, and so on. Pick the page layout for how the bundle reads as a whole, then the Multiple-items display for how a repeated item is filled in. Not sure which? The Layouts & which to use page has a quick recommendation table.

Still stuck? Email a human. The person who reads it is the person who builds the plugin.