> For the complete documentation index, see [llms.txt](https://broadcast.presidiocreative.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://broadcast.presidiocreative.com/broadcast-v5/theme-settings/theme-settings/buttons.md).

# 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.&#x20;

<figure><img src="https://content.gitbook.com/content/j8jzXN4KKXAfQhgbN5lO/blobs/e1aCc693bciWqdauOlSy/btn-font-change.gif" alt=""><figcaption><p><strong>Changing the button font type</strong></p></figcaption></figure>

### 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.&#x20;

<figure><img src="https://content.gitbook.com/content/j8jzXN4KKXAfQhgbN5lO/blobs/TLwxbossE0qkx1NQblu3/updated-pill-style-btn.jpg" alt=""><figcaption><p><strong>Pill style</strong></p></figcaption></figure>

The **square** shape has 90-degree corners on all sides.&#x20;

<figure><img src="https://content.gitbook.com/content/j8jzXN4KKXAfQhgbN5lO/blobs/7fOVKiMEn4FC5qCnZPgS/Square-btn.jpg" alt=""><figcaption><p><strong>Square style</strong></p></figcaption></figure>

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

<figure><img src="https://content.gitbook.com/content/j8jzXN4KKXAfQhgbN5lO/blobs/RdaeuF96jlLjsXZWRkXt/Rounded-btn.jpg" alt=""><figcaption><p><strong>Rounded style</strong></p></figcaption></figure>

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.&#x20;

<figure><img src="https://content.gitbook.com/content/j8jzXN4KKXAfQhgbN5lO/blobs/0VngnBkolFpOW8cDy8mE/uppercase-off-smaller.jpg" alt=""><figcaption><p><strong>Uppercase toggle unchecked</strong></p></figcaption></figure>

## 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. &#x20;

* Product pages can display two buttons: an '**Add to Cart**' button and a '**Buy it Now**' button.&#x20;

### 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.&#x20;

{% hint style="info" %}
When only displaying the **Add to Cart** button, the primary solid colors are used:

* Primary Solid background color
* Primary Solit text color
  {% endhint %}

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

<figure><img src="https://content.gitbook.com/content/j8jzXN4KKXAfQhgbN5lO/blobs/jJETqEY8A0HjDfqLHdEf/upd-add-to-cart%20button%20choice.jpg" alt=""><figcaption><p><strong>Add to Cart button on Product page</strong></p></figcaption></figure>

### Buy it Now

The '**Buy it Now**' button is activated when the '**Show dynamic checkout buttons**' option is **checked**.&#x20;

<figure><img src="https://content.gitbook.com/content/j8jzXN4KKXAfQhgbN5lO/blobs/cEJBuhUUm1CiKgS0Tqlj/the%20two%20buttons%20on%20pdp.jpg" alt=""><figcaption><p><strong>Add to Cart and Buy it Now buttons together on Product pages</strong></p></figcaption></figure>

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.

{% hint style="info" %}
Both buttons are displayed next when the 'Dynamic checkout buttons' option is checked.&#x20;

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
  {% endhint %}

<figure><img src="https://content.gitbook.com/content/j8jzXN4KKXAfQhgbN5lO/blobs/XHqKrKm3P9Gb8nbon0Gu/upd-primary%20button%20with%20two%20buttons.jpg" alt=""><figcaption><p><strong>Primary solid colors are used for the Buy it Now button while Add to Cart uses the Outline and text colors</strong></p></figcaption></figure>

### Video Overview

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

{% embed url="<https://www.loom.com/share/9f41f05882d44bd3b4a4768446f0598c?sid=0df2d054-04d1-4cb5-bf4b-1d75530ef8d8>" %}
**Video overview of button colors on product pages**
{% endembed %}

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.&#x20;

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

<figure><img src="https://content.gitbook.com/content/j8jzXN4KKXAfQhgbN5lO/blobs/CLcE6xN1Ih5ULXd0yJ5h/secondary-colors-second-button.jpg" alt=""><figcaption><p><strong>Second button is using the Secondary button colors from the theme settings</strong></p></figcaption></figure>

* 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.&#x20;

<figure><img src="https://content.gitbook.com/content/j8jzXN4KKXAfQhgbN5lO/blobs/kI1xmDFnxMG5oNzzIM6J/upd-secondary-btn-color-full.jpg" alt=""><figcaption><p><strong>Block color settings for the slide</strong></p></figcaption></figure>

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://broadcast.presidiocreative.com/broadcast-v5/theme-settings/theme-settings/buttons.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
