Use the Site Styles panel to edit the appearance of buttons on your site. You can change the color, shape, and text style, which is a great way to match calls to action to your site's visual design.
To help you create a consistent design, any style changes you make to buttons affect most buttons on your site.
To learn more about adding buttons to your site, visit Using the Button Block.
Before you begin
See Style site-wide buttons to edit these buttons:
- Add to Cart buttons
- Button Blocks
- Donation Block buttons
- Form Block Submit buttons
- Newsletter Block buttons
See Style other buttons to edit these buttons:
- Cover page
- Image Blocks
- Shopping Cart
- Template-specific banner or navigation buttons
Style site-wide buttons
To edit the appearance of most buttons on your site:
- In the Pages panel, select a page that uses buttons.
- In the Home Menu, click Design, and then click Site Styles.
- Scroll down to Buttons. For Button Blocks, the section will be called Button Block (Small), (Medium), or (Large).
Button Style - Choose style:
Button Shape - Choose shape:
- Button Color - Change the background color of the button.
- Button Text Color - Change the color of the text.
- Button Font - Change the font. The text size can't be changed for Form Block and Newsletter Block buttons.
Tip: For the Outline style, the text automatically displays as either black or white on hover, depending on the Button Color.
Style other buttons
There are a few types of buttons that have different style options:
- Shopping Cart buttons have separate options in certain templates.
- Cover Page buttons have separate button options.
- Image Blocks have separate button options.
- Bedford family banner buttons can be styled in the Banner section of Site Styles.
- Bedford family's navigation button can be styled in the Site Navigation section of Site Styles.
- Brine family's navigation buttons can be styled in the Header: Primary Navigation and Header: Secondary Navigation sections of Site Styles.
Change the button text
To create your own calls to action, you can change the default text for most buttons on your site.
Form Block and Newsletter Block
- Double-click a Form or Newsletter Block to open the Block Editor.
- In the Advanced tab, edit the text in the Submit Button Label field.
Add to Cart button
- Double-click a product to open the product editor.
- In the Options tab, check Use Custom Add Button Label and then edit the text.
- Click an Insert Point to add a Button Block.
- In the Text box, enter your label.
In the Brine and Bedford families, change the navigation button's text by updating the navigation title.
Style the Cart button
All templates support a shopping Cart button that shows the number of items in a customer's cart and leads to the checkout page.
You can customize the shopping cart's display in the templates listed below. Templates are grouped by family.
Note: If your cart isn't appearing, see our troubleshooting tips.
Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West
Charlotte, Fulton, Horizon, Naomi, Pacific
Foundry, Indigo, Ready, Skye, Tudor
Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York
Alternate button colors
Depending on your template and how your site is set up, you may see an Alternate or (Overlay) tweak in the Site Styles section for your button. These options appears for buttons that display over:
- Background images, such as Index section banners
- Background areas with colors separate from the main background, such as footers or prefooters.
Use this option to help buttons stand out over these unique backgrounds. Depending on your button's style, you may also see other Alternate and (Overlay) tweaks.