Swatches in the variant picker

Swatches replace the plain dropdown in a Hype block's variant picker with color circles, images, or text chips — so a shopper choosing a free gift or a volume discount bundle picks "Navy" by seeing navy, not by reading it in a select box.

Swatch settings are store-wide. You configure them from one campaign, but they apply wherever those variant options appear in Hype blocks.

Swatches are a beta feature and are enabled for selected stores. If you do not see the Add swatches button, your store does not have it yet — contact support to ask about access.

Where to find it

1. Open a campaign's Blocks page.
2. Click Add swatches in the page header.

The button only appears when the campaign already has a block that renders a variant picker: a Gift banner, a Progress banner, or a Volume discount selector. Add one of those blocks first.

Configure the swatches

The modal is titled Add swatches to variant picker.

1. If the campaign has no gift products of its own, pick a starting product: Pick a product whose variant options you want to style. Swatch settings apply store-wide, wherever those options appear. Click Choose product. Use Add product to bring in options from another product.
2. Under Swatches, use Option to choose which variant option you are styling — Color, Size, Material, and so on.
3. Set Display for that option:
   • Default dropdown — leave this option as a select box.
   • Swatch — render it as swatches.
4. Under Variants, set the Type for each value of the option:
   • Text — the value's name in a chip.
   • Color — a solid color you pick in the Color field.
   • Image — an image you choose with Select image. Once set, the button becomes Change image.
   • Product image — uses that variant's own product image, shown as Uses product image.
   • Values with no swatch configured are marked No swatch.
5. Under Settings, set the shape and size for every swatch:
   • Swatch size — 8px to 96px. Default is 32px.
   • Swatch shape — Circle or Square. Default is Circle.
6. Check the Preview. Use Preview product to switch which product the preview renders.
7. Click Apply. A Swatches saved confirmation appears. Cancel discards your changes.

Things to know

• Settings are shared across your store. Styling the Color option here styles it in every Hype block that shows that option, in every campaign. That is deliberate — shoppers should see one consistent picker — but it means a change made from one campaign affects the others.
• Options are matched by name. A swatch you configure for Color applies to every product whose option is named Color. If some products use Colour or Shade, configure those separately.
• Values are matched by name too. A value named Navy Blue on one product and Navy on another are two different values.
• You can mix types within a single option. A color swatch for most values and an image swatch for a patterned one is a valid setup.
• Swatches are display only. They change how the picker looks, not which variants are available or what they cost.

Related

• Gift banner
• Volume discount selector