You can use the Style Editor to edit the appearance of buttons on your site. This is a great way to match calls to action, like Submit or Add to Cart Buttons, 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.
Before you begin
Most buttons on your site follow the steps in this guide, with a few exceptions:
- Shopping Cart buttons can be styled independently on certain templates.
- Cover Page buttons have separate button options.
- Image Blocks have separate button options.
Style site-wide buttons
Follow these steps to customize:
- Button Blocks
- Form Block Submit buttons
- Add to Cart buttons
- Newsletter Block sign-up buttons
In the Pages panel, select a page that uses buttons. Then, in the Home Menu, click Design, and then click Style Editor.
Scroll down to Buttons. For Button Blocks, the section will be called Button Block (Small), (Medium), or (Large).
Button Style - Choose Solid, Outline, or Raised.
Button Shape - Choose Square, Rounded, and Pill.
- Button Color - Change the background color of the button.
- Button Text Color - Change the color of the text.
- Button Font - Change the font.
Tip: For the Outline style, the text automatically displays as either black or white on hover, depending on the Button Color.
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 box.
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.
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: Ensure your site has a Products Page and that Express Checkout is disabled.
|Brine, Aria, Basil, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Jaunt, Juke, Keene, Lincoln, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Polaris, Rally, Rover, Sofia, Sonny, Sonora, Thorne, Wav, West||
|Pacific, Charlotte, Fulton, Horizon, Naomi||
|Skye, Foundry, Indigo, Ready, Tudor||
|York, Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori||
Alternate button colors
Depending on your template and how your site is set up, you may see an Alternate Button Color tweak in the Style Editor section for your button. This option 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 Alternate Text Color and Alternate Padding tweaks.