The Button block shows one button with a label and a link. To add one, click Add block in a Section, Card rail, Contact form, Offcanvas drawer, Orbit, Share, Subscription or Video section, or inside a Group block or Columns block, and select Button. The Popup section accepts it too. In the Footer section, the Centered layout keeps its two buttons in a Group block, and a new button goes inside that Group block. You cannot add a Button block to the footer itself.
To put two buttons next to each other, add both to a Group block and set its Layout direction to Horizontal.
Content
Setting
What it does
Button label and Button link
The words on the button and the page it opens. With an empty label, the button does not show on your store. Without a link, the button shows but does nothing when clicked.
Trailing icon
An icon after the label. None is the default. The choices are Arrow, Chevron, Bag, Checkout, Discount, Eye, Heart, Mail, Play, Plus, Search and Share.
Icon placement
Shows when Trailing icon is not None. Beside the label, the default, puts the icon right after the words. In a disc puts it in a small round disc at the right end of the button, in the button's colors swapped. An Arrow in a disc points up and to the right, and turns to point right when the pointer is over the button. With the Plain style, the icon always sits beside the label.
Style
123456
Primary
Secondary
In a disc
Accent, S
Play icon
Plain
Setting
What it does
Button style
Primary, the default, is filled with the primary button color from Color settings. Secondary has the page's background color and a thin border. Accent has an outline in the Accent gradient and no fill, for the one action on the screen that matters most. Ghost shows the label with no fill and no border, and a light fill appears when the pointer is over it. Plain shows the label as a text link, with no fill, no border and no space around it.
Button size
S, M or L, the default. In the Popup section, every button shows at the large size, whatever you choose here.
Button size in Button settings makes all three sizes larger or smaller across the store, and Control shape there sets how round the corners are.
Layout
Setting
What it does
Width
The column the button lines up in. Text column is a centered column up to 864 px wide. Page width, the default, matches Page width in Layout settings. Full width runs from edge to edge of the section. The button keeps its own width in all three.
Inside that column, the section's Alignment puts the button at the left, in the center or at the right, as Section layout settings describes. Inside a Group block, the group's Alignment places it instead.
The Button block shows one button with a label and a link. To add one, click Add block in a Section, Card rail, Contact form, Offcanvas drawer, Orbit, Share, Subscription or Video section, or inside a Group block or Columns block, and select Button. The Popup section accepts it too. In the Footer section, the Centered layout keeps its two buttons in a Group block, and a new button goes inside that Group block. You cannot add a Button block to the footer itself.
To put two buttons next to each other, add both to a Group block and set its Layout direction to Horizontal.
Content
Setting
What it does
Button label and Button link
The words on the button and the page it opens. With an empty label, the button does not show on your store. Without a link, the button shows but does nothing when clicked.
Trailing icon
An icon after the label. None is the default. The choices are Arrow, Chevron, Bag, Checkout, Discount, Eye, Heart, Mail, Play, Plus, Search and Share.
Icon placement
Shows when Trailing icon is not None. Beside the label, the default, puts the icon right after the words. In a disc puts it in a small round disc at the right end of the button, in the button's colors swapped. An Arrow in a disc points up and to the right, and turns to point right when the pointer is over the button. With the Plain style, the icon always sits beside the label.
Style
Setting
What it does
Button style
Primary, the default, is filled with the primary button color from Color settings. Secondary has the page's background color and a thin border. Accent has an outline in the Accent gradient and no fill, for the one action on the screen that matters most. Ghost shows the label with no fill and no border, and a light fill appears when the pointer is over it. Plain shows the label as a text link, with no fill, no border and no space around it.
Button size
S, M or L, the default. In the Popup section, every button shows at the large size, whatever you choose here.
Button size in Button settings makes all three sizes larger or smaller across the store, and Control shape there sets how round the corners are.
Layout
Setting
What it does
Width
The column the button lines up in. Text column is a centered column up to 864 px wide. Page width, the default, matches Page width in Layout settings. Full width runs from edge to edge of the section. The button keeps its own width in all three.
Inside that column, the section's Alignment puts the button at the left, in the center or at the right, as Section layout settings describes. Inside a Group block, the group's Alignment places it instead.