Button

Available on: Product page, Collection page

✨Demo product: Button (password: 1)

Button variant selector on a product

Function

Displays each option value as a clickable text button, letting customers pick a value quickly without images or a dropdown.

How it works

Each value appears as a button with text (e.g. S, M, L).
The selected button is visually highlighted.
No image or color is used — this is a text-only selector, so there's no swatch editor to set up.

Use when

Options are text-based (e.g. Size, Material, Style).
No image comparison is needed.
You want a simple, compact selector that reads clearly at a glance.

How to use Button

Change the display type to Button → Click Save

In Variants display, set the option's Product page display (and/or Collection page display) to Button. There's nothing else to configure per value.

(Optional) Adjust the look in Styling

Padding, spacing, text, border, and active/hover colors are configured in Styling.

Button without border

Available on: Product page, Collection page · Premium feature

Button without border is a separate display type that works exactly like Button but drops the button outline for a cleaner, minimal look — the label sits directly on the page background, with the selected value still highlighted.

Same text-only behavior as Button — no swatch editor to set up.
It has its own Styling settings (independent of Button), so you can tune padding, text, and active/hover colors for the borderless look.
This is a premium display type; if it's locked, it appears with a lock icon until your plan includes it.