With Color Swatches

About this block

With Color Swatches adds the one piece of variant data worth showing on a listing, the colorway dots, with a plus count for overflow rather than a dot pileup. The lede commits the dots to inventory truth, colorways in stock right now, which is what makes them useful instead of decorative.

Products are one array, swatch fills stay on theme tokens in the block and get replaced by real colorway values when wired, the same convention as the variant overview.

When to use

Reach for this block on apparel and accessories listings where color breadth drives the click. The dots answer does it come in black from the grid, saving a round trip per product.

A natural flow around it on an Ecommerce Pro page:

Before

• Category sections

After

• With variant swatches where the chosen product opens
• Cart

What you can display

One strong use is a colorful range with live colorway stock. Other dot uses:

• Material dots. Leather, canvas, nylon as textured labels.
• Finish dots. Matte, gloss, brushed for hardware.
• Print dots. Pattern thumbnails as tiny squares instead of circles.

Tip: cap visible dots at three with a plus count, a card wearing seven dots reads as confetti, not information.