Buttons and swatches

A choice field can show its choices as a plain list, as buttons or as swatches the shopper taps: a colour, or a picture of the pattern or material. What the shopper picks reaches the cart, checkout and order exactly as any other choice does.

Add one

In an option set, click Add field and pick:

• Buttons: "Size" with Small and Large to start. Good for sizes, lengths, quantities.
• Colour swatches: "Colour" with Black and White to start.
• Image swatches: "Finish" with two choices, each waiting for an image.

Rename the field and its choices as you like. Each choice keeps its extra charge, if it has one.

You can also turn an existing Radio buttons or Checkbox group field into buttons or swatches with Show choices as.

Colours

Click the chip beside a choice to pick its colour, or type a hex code such as #1F2A44. Add a second colour splits the swatch diagonally, for two-tone products.

Images

Drop an image on the square beside a choice, or click it to browse. PNG, JPG, WebP or GIF, up to 5 MB. Images are saved in your store's Content › Files, so they stay there if you uninstall the app. A field with images saves once every choice has its image.

The first time you add an image, Shopify asks you to approve a new permission (saving files). If the app shows Allow the app to save images, click Reopen the app, approve, and save again. Colours and buttons work without it.

One choice or several

A new buttons or swatches field takes one choice. Tick Allow several to let the shopper pick more than one; their picks are saved together, separated by commas.

How they look on your store

Shape, size, spacing and the selected colour are set once for your whole store, in your theme: click Edit in theme editor (on the Option sets page or in a field's settings), then open Product options under App embeds:

• Selected colour: the ring around the picked choice. Empty uses your theme's text colour.
• Button shape: Square, Rounded or Pill.
• Swatch shape: Circle or Square.
• Swatch size: Small, Medium or Large (small swatches still have a finger-sized tap area).
• Spacing: Compact or Comfortable.
• Show the picked value next to the label: "Colour: Navy". On by default.

Each theme keeps its own settings. The app's live preview uses the default look.

Good to know

• Shoppers can pick with a mouse, a finger or the keyboard; screen readers read each choice's name, and the picked choice is marked by a ring (and a tick on buttons), never by colour alone.
• If an image can't be loaded (for example, it was deleted from Files), that field shows its choices as buttons, so the shopper can still pick.
• Dropdowns stay dropdowns: buttons and swatches are for Radio buttons and Checkbox group fields.

Need help?

Chat with us from inside the app, or write to support@datima.ai. More about the app: Datima Product Options.