Buttons

Settings to configure the default button styles and colors for call to action buttons

Choose the default style and colors for your call-to-action buttons. These button settings allow you to manage the style and appearance of the default buttons. Many sections and blocks will use the choices selected in these settings.

Font

Broadcast allows you to choose any font from the Shopify Font Library for the buttons in your theme. Use the font selector to select the font choice for your buttons.

Changing the button font type

Style

Broadcast includes different button style options. In these settings, choose a style that will be applied to all buttons throughout your shop. Button shapes included are square, rounded, and pill.

The pill shape brings a modern design to buttons, with a large radius on each corner. Shorter buttons like variant options will appear circular.

Pill style

The square shape has 90-degree corners on all sides.

Square style

Similar to the square style, the rounded style has slightly rounded corners.

Rounded style

There is an option to force uppercase lettering inside the buttons. Uncheck the option to display lettering as it is entered in the button text fields, or check the option to make all letters uppercase.

Uppercase toggle unchecked

Colors

Broadcast includes a range of color settings for the buttons used in the theme. Most sections will have button color options for style and color, including primary and secondary colors, pulled from the theme settings choices.

  • Product pages can display two buttons: an 'Add to Cart' button and a 'Buy it Now' button.

Add to Cart

The 'Add to Cart' button is the default call-to-action button. It's the only button shown unless you configure and set up to use Shopify's 'Dynamic checkout buttons.' When only the 'Add to Cart' button is shown, the primary solid colors are used from the theme settings.

When only displaying the Add to Cart button, the primary solid colors are used:

  • Primary Solid background color

  • Primary Solit text color

This is the default call-to-action button and uses the Primary solid color choices:

Add to Cart button on Product page

Buy it Now

The 'Buy it Now' button is activated when the 'Show dynamic checkout buttons' option is checked.

Add to Cart and Buy it Now buttons together on Product pages

When both buttons, 'Add to Cart' and 'Buy it Now,' are used, the 'Buy it Now' button adopts the primary solid background and primary solid text colors.

Both buttons are displayed next when the 'Dynamic checkout buttons' option is checked.

The Buy it Now button inherits the Primary solid colors:

  • Primary Solid background color

  • Primary Solid text color

The Add to Cart inherits the Primary outline and text colors:

  • Primary Outline and text color

Primary solid colors are used for the Buy it Now button while Add to Cart uses the Outline and text colors

Video Overview

This video demonstrates how to change colors for the 'Add to Cart' and 'Buy it Now' buttons on product pages in Broadcast:

Video overview of button colors on product pages

The video also covers changing the 'Add to Cart' button text.

Secondary

The secondary color options are used for sections and blocks that can choose a button color. You can pre-select secondary button colors and use them throughout the theme.

In the example below, two buttons are displayed for the slideshow slide. The second is using the color settings from the secondary color palette:

Second button is using the Secondary button colors from the theme settings
  • In the second button block settings, you can select different color options under Color. We've used the Secondary choice to quickly insert our brand colors from the theme settings.

Block color settings for the slide

The primary and secondary colors are pulled from the theme settings. The white and black options are also available as quick presets.