The Buttons settings change every button in the store at once: its font, its size and the shape of its corners. To find them, open the theme editor. In the editor sidebar, click Theme settings, then select Buttons. A button's color comes from Color settings, and each button's style, such as Primary or Accent, is set where the button is added.
Settings
Setting
What it does
Button font
Body font and Display font use the fonts from Typography settings. Custom lets you pick a separate font in Custom button font, which shows only when Custom is selected. All three styles use Body font.
Text link and price font
The font of links that look like text rather than buttons, and of prices. These are View all links, the Links of the Hero section, the read links on blog post cards, the links in a mega menu, and the prices on product cards and in the cart. Display is the default, and these links then show in capitals when Uppercase headings is on. Button matches them to your buttons, as the Lair style does.
Button font size
The size of button text, from 10 to 18 px. Large buttons, such as the buttons on the not found page, show it 2 px larger. The Checkmate style uses 14 px, Lair and Fang 12 px.
Control shape
The corners of buttons, form fields and dropdowns. Square has sharp corners. Round rounds them slightly: 10 to 16 px on buttons, depending on their size, and 12 px on fields. Pill makes both ends fully round. Checkmate and Lair use Round, Fang uses Pill.
Button size
How much space a button has around its text, and so how tall it is. S is an eighth smaller than M, and L an eighth bigger. The text size stays the same. Fang uses L.
Carousel arrows
The previous and next arrows of carousels, such as Card rail, Blog posts and product carousels, and of the Timeline section. Each choice is described below.
The Button block has a Button size setting of its own. It picks one of the theme's button sizes for that one button, and this theme setting then makes all of them smaller or larger.
Carousel arrow styles
Choice
What it looks like
Ghost
Small square arrows with rounded corners and no background. A light fill appears when the pointer is over one. The default.
Light
Larger round arrows on a light gray fill.
Dark
Larger round arrows filled with the palette's Primary color, like a primary button.
Ghost and dark
Larger round arrows. The previous arrow has a thin outline and no fill, and the next arrow is filled like Dark. The Fang style uses it.
Pagination arrows under a collection or a blog keep the Ghost look whatever you choose.
The Buttons settings change every button in the store at once: its font, its size and the shape of its corners. To find them, open the theme editor. In the editor sidebar, click Theme settings, then select Buttons. A button's color comes from Color settings, and each button's style, such as Primary or Accent, is set where the button is added.
Settings
Setting
What it does
Button font
Body font and Display font use the fonts from Typography settings. Custom lets you pick a separate font in Custom button font, which shows only when Custom is selected. All three styles use Body font.
Text link and price font
The font of links that look like text rather than buttons, and of prices. These are View all links, the Links of the Hero section, the read links on blog post cards, the links in a mega menu, and the prices on product cards and in the cart. Display is the default, and these links then show in capitals when Uppercase headings is on. Button matches them to your buttons, as the Lair style does.
Button font size
The size of button text, from 10 to 18 px. Large buttons, such as the buttons on the not found page, show it 2 px larger. The Checkmate style uses 14 px, Lair and Fang 12 px.
Control shape
The corners of buttons, form fields and dropdowns. Square has sharp corners. Round rounds them slightly: 10 to 16 px on buttons, depending on their size, and 12 px on fields. Pill makes both ends fully round. Checkmate and Lair use Round, Fang uses Pill.
Button size
How much space a button has around its text, and so how tall it is. S is an eighth smaller than M, and L an eighth bigger. The text size stays the same. Fang uses L.
Carousel arrows
The previous and next arrows of carousels, such as Card rail, Blog posts and product carousels, and of the Timeline section. Each choice is described below.
The Button block has a Button size setting of its own. It picks one of the theme's button sizes for that one button, and this theme setting then makes all of them smaller or larger.
Carousel arrow styles
Choice
What it looks like
Ghost
Small square arrows with rounded corners and no background. A light fill appears when the pointer is over one. The default.
Light
Larger round arrows on a light gray fill.
Dark
Larger round arrows filled with the palette's Primary color, like a primary button.
Ghost and dark
Larger round arrows. The previous arrow has a thin outline and no fill, and the next arrow is filled like Dark. The Fang style uses it.
Pagination arrows under a collection or a blog keep the Ghost look whatever you choose.