Broadcast v6.2 has been released - Learn more about
What's new
Broadcast Documentation
NewSupport
Broadcast v5
Broadcast v5
  • About Broadcast
    • Broadcast theme documentation
    • Feature requests
  • Updates
    • What's new in Broadcast
      • Release Notes
      • About v5.8 release
      • About v5.7 release
      • About v5.6 release
      • About v5.5 release
      • About v5.4 release
      • About v5.3 release
      • About v5.2 release
      • About v5.1 release
      • About v5.0 release
      • About v4.0 release
  • Sections
    • Broadcast sections
      • Demo store sections
      • Accordion
      • Accordion group
      • Before and After
      • Blog posts
      • Collection list
      • Collection list hover
      • Countdown
      • Contact form
      • Custom code
      • Custom content
      • Divider
      • Featured blog posts
      • Featured collection
      • Featured product
      • Highlights
      • Image banner
      • Image with text
      • Image with text slider
      • Map
      • Multicolumn
      • Newsletter
      • Press logos
      • Products with image
      • Rich text
      • Rich text with columns
      • Scrolling text
      • Shop the look
      • Sidebar
      • Slideshow
      • Tab collections
      • Testimonials
      • Text columns with icons
      • Text columns with images
      • Text promo
      • Text with products
      • Timeline
      • Video
  • Theme settings
    • Theme settings
      • Colors
      • Typography
      • Buttons
      • Layout
      • Search
      • Social media
      • Product Grid
      • Product Form
      • Cart
  • Header
    • Header
      • Demo store header settings
      • Header section
      • Navigation images
      • Quantity indicators
      • Transparent header
      • Header icons
      • Social icons
      • Sticky header
      • Target settings
    • Toolbar
      • Header toolbar
      • Video walkthrough
    • Announcement bar
      • Announcement bar settings
      • Free shipping message
      • Countdown timer
      • Text announcement
      • Custom code
      • Target settings
  • Footer
    • Footer settings
    • Footer blocks
      • Link list
      • Newsletter
      • Social
      • Text
      • Page
  • Products
    • Product pages
      • Accordion section
      • Custom form field
      • FAQ Accordions
      • Final Sale
      • Free products
      • Low inventory message
      • Out-of-stock notification
      • Pre-order using metafields
      • Pre-order products using tags
      • Product Theme Blocks
        • Title
        • Price
        • Variant picker
        • Buy buttons
        • Siblings
        • Description
        • Upsell
        • Inventory countdown
        • Sharing
        • Local pickup
        • Text
        • Custom code
        • Icon
        • Divider
        • Line item property
        • Feature
        • Complementary products
        • Popup
      • Related products
      • Sale items
      • Settings and layout
      • Siblings
      • Size charts
      • Swatches (Updated)
      • Swatch collection styles
      • Tabs and accordions
      • Tab content using metafields
      • Unique image banners
      • Upselling
      • Variant images
  • Collections
    • Collection pages
      • Collection page settings
      • Swatch collection styles
      • Product badges
      • Product badges with metafields
      • Product filtering
      • Quick add
      • Sub-collections
      • Cutline second line
      • Featured image
  • Overlay
    • Popups
      • Popups Theme Blocks
      • Large newsletter
      • Text promo
      • Small newsletter
      • Cookie consent
      • Coupon codes
      • Popup Behavior and Target
  • Promotions
    • Upselling
      • Upselling with metafields
      • Upselling with tags
  • Siblings
    • Product siblings
      • About product siblings
      • How to setup siblings
      • Siblings metafields
      • Siblings color
      • Siblings collection
      • Siblings product setup
      • Siblings block
      • Customizations
  • Pages
    • Page templates
      • Demo store about page
      • Creating page templates
      • Page section
      • About page templates
  • Blogs
    • Blogs and articles
      • About blogs and articles
      • Featured posts
      • Article page
      • Product links in blog posts
      • Article theme blocks
  • FAQ
    • Frequently asked questions
      • How to update Broadcast
      • Default theme content
      • Share preview link
      • Hiding prices
      • How to use sections
      • Section blocks
      • How to remove Powered by Shopify
      • Improving the speed of your site
      • How to prevent your images from getting cropped
      • Check your theme version
      • CSS customizations
  • License
    • Theme license
  • Support
    • Contacting support
    • Missing Cart Drawer after Updating
Powered by GitBook
On this page
  • Font
  • Style
  • Colors
  • Add to Cart
  • Buy it Now
  • Video Overview
  • Secondary
Export as PDF
  1. Theme settings
  2. Theme settings

Buttons

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

PreviousTypographyNextLayout

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.

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.

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

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

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.

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:

Buy it Now

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

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

Video Overview

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

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:

  • 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.

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

Changing the button font type
Pill style
Square style
Rounded style
Uppercase toggle unchecked
Add to Cart button on Product page
Add to Cart and Buy it Now buttons together on Product pages
Primary solid colors are used for the Buy it Now button while Add to Cart uses the Outline and text colors
Second button is using the Secondary button colors from the theme settings
Block color settings for the slide
Video overview of button colors on product pages