Change button shapes, colors, and text styles to complement your brand.

Use site styles to edit the appearance of buttons on your site and match calls to action with your site’s visual design. To help create a consistent look, style changes you make affect most buttons on your site.

These button styles are available on version 7.1 sites. Version 7.0 sites have different button styling options .

Video on button styles

Watch this video for an overview on styling buttons on your site.

Choose a button pack

In site styles, you can select a button pack to automatically apply consistent style settings to buttons on your site. Each pack divides button styles into three types.

Button packs are great if you don’t want to change more granular settings manually, but you can also use them as a starting point before you customize them more.

To set your button pack:

1. Open the Site styles panel.
2. Click Buttons.
3. Review the recommended button packs. If you hover over a pack, it displays a preview of its primary, secondary, and tertiary styles.
4. Choose from the recommended button packs, or click Customize, then click All Button Packs to review more options.
5. When you find a button pack you like, click it.

Customize your button shapes and fonts

After you choose a button pack, you can make more specific changes to your button style options. While you can set specific sizes and shapes, buttons may increase in size and change shape to accommodate text. We recommend keeping button text under 25 characters for the most control.

Some tweaks won't affect buttons on your site when it may disrupt your site's design. For example, to maintain the newsletter block layout, padding tweaks don't affect newsletter block buttons.

To style your buttons:

1. Open the Site styles panel.
2. Click ＞ next to Buttons.
3. Click Primary, Secondary, or Tertiary. As you make changes, a preview displays how buttons of this type will appear on your site. Keep in mind, if you make changes to a button type, then choose a new button pack, you’ll lose your changes.
4. Click Font to customize the text styles.
5. Click Shape to set the button shape.
6. Use the Outline slider to set the outline thickness.
7. Set the Padding to S, M, or L, or click … to set the Top & Bottom padding and Left & Right padding separately. This option won't affect button blocks set to Fill in Fluid Engine sections. Resize blocks to add padding instead.
8. Optional: To apply these style settings to all button types on your site, click Apply to all Button Types.
9. Optional: To reset the styles of the button type you’re editing to default, click Reset Button Styles.
10. Click Save.

Customize your button colors

Buttons follow your site-wide colors, so they generally match your site’s brand. You can use a wider variety of button colors by using different color themes on different sections.

To change your button colors:

1. Open the Site styles panel.
2. Click ＞ next to Colors.
3. Click the color theme where you want to change your button colors.
4. Under Button, click the tweaks to change button text color and button background color for all three button types. For buttons set to Fill, the background color fills the button. For buttons set to No Fill or buttons using the Underline shape, the button background color applies to the outline and text.
5. Optional: If a block has a button, you can sometimes change the button color independently. In the Edit Color Theme panel, check under block sections for block-specific button color tweaks.
6. Click Save.

What are button types?

Site styles divides buttons into three types: Primary, Secondary, and Tertiary. Most buttons follow primary styles and can’t change types.

You can change the type for button blocks, header blocks, and form block submit buttons, which is a great way to highlight the most important calls-to-action for your visitors, or to distinguish between different types of links.

What buttons use primary styles?

Buttons that use primary styles include:

• Add to cart buttons
• Auto layout buttons
• Header buttons, button blocks and form block buttons set to Primary
• Checkout buttons
• Accept All button on the Cookie banner
• Donation block buttons
• Pricing plan block buttons
• Newsletter block buttons

What buttons use secondary styles?

Buttons that use secondary styles include:

• Header buttons, button blocks and form block buttons set to Secondary
• Continue shopping buttons
• Decline All button on the Cookie banner

What buttons use tertiary styles?

• Header buttons, button blocks and form block buttons set to Tertiary
• Manage Cookies button on the Cookie banner