Skip to content

Colour swatches

A colour choice reads far better as a swatch of that colour than as a word in a list. AddOnBoss shows any colour option set as a row of swatches, and the customer taps the colour they want.

A colour set shown as coloured circles and a size set shown as pills, with the 2XL pill carrying a plus two pounds price
Colours show as swatches, sizes as pills, in one balanced row.

On a colour option, set its swatch colour. That is all it needs: the storefront shows a swatch in that colour, with the option’s name and any price sitting plainly beneath it, never tucked into a hover tooltip.

Leave a swatch blank and AddOnBoss fills it in from the option’s name for common colours. Name an option “Navy” or “Forest green” and the right colour appears without you picking one. Set a swatch by hand only where the name is not a standard colour, or where your brand’s “Navy” is a particular shade.

For a split or heather colour, a swatch can carry two colours, so a “Navy and white” option shows a swatch split between the two. Handy for sports kit and marl fabrics where one colour never tells the whole story.

Each set carries a Swatch shape choice that decides how its choices draw on the product page:

  • Square is the usual.
  • Circle suits plain colours.
  • Photo card shows each choice as a small card with its picture and price, the right shape for a set whose options carry photos. A set whose options have photos uses the photo card by itself until you choose otherwise.

The shape is presentation only: whatever you pick, the same options, prices and picks flow through unchanged.

A set that is not colours, sizes, finishes, materials, shows as pills rather than swatches, the same tidy row of choices. You do not set anything for this; a set simply shows swatches when its options carry colours and pills when they do not. The two share one balanced row component, so a mixed page stays neat.

The same swatches everywhere

Swatches work the same on a product's own page, in the quantity grid, and inside a BundleBoss bundle, because both plugins share one option-set library.

Was this page helpful?