Buttons

A container for calls to action. It holds one or more Button blocks and controls how they’re arranged — stacked or side by side, and where they sit horizontally — separately for mobile and desktop.

Almost every button in the theme lives inside one of these. A single button still goes in a Buttons block; that’s what gives it its spacing and alignment.

Settings

Setting	What it does
Direction	How buttons stack on desktop: Horizontal (default) side by side, or Vertical one above the other.
Mobile Direction	Same, for small screens. Default Vertical — two buttons side by side rarely fit on a phone.
Mobile Horizontal Alignment	Start (default), Center, End, or Space Between.
Desktop Horizontal Alignment	Start (default), Center, End, or Space Between.
Wrap Buttons	Lets buttons flow onto a second line instead of squeezing when they don’t fit. Off by default.
Block ID	Optional anchor ID, for linking directly to this group.

Blocks it holds

Only Button blocks. A new Buttons block starts with one Button already in it; add more from the block list.

A Button can’t be added on its own — it has to go inside a Buttons block.

“Space Between” does nothing when stacked

Space Between spreads buttons across the full width of the row. In a vertical stack there’s no row to spread across, so the setting is ignored. Since mobile defaults to Vertical, a Space Between mobile alignment usually has no visible effect.

Tips

• Match alignment to the section. If the heading and copy above are centred, centre the buttons too. Mismatched alignment reads as a mistake.
• Two buttons is the practical limit side by side on desktop, one on mobile. Three competing calls to action means none of them wins.
• Turn on Wrap Buttons for long labels. Without it, a pair of long labels on a narrow desktop window will compress rather than wrap.

Where it’s used

Hero, Text & Image Split, Features, Featured Products, Featured Banner, Featured Collections, Rich Text, Teaser, 404, and inside the Content, Feature and Accordion Item blocks.