# Buttons

Buttons are crucial for navigation, calls to action, and customer engagement. Customizing their appearance allows you to make them stand out or blend seamlessly with your site's design.

## How to access Button settings

{% hint style="success" %}
Steps:

1. In the theme editor (**Customize**), click **Theme settings**.
2. Locate **Buttons**.
3. Enter the tags you want to show as badges.
4. Click **Save**.
   {% endhint %}

## Buttons settings options

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FaIaB0XuETsC17im3e5XI%2Fimage.png?alt=media&#x26;token=b99d134a-9757-4328-8b05-163d2b160ed4" alt=""><figcaption></figcaption></figure>

### Font

Choose a font for your button text. Options include **Body**, **Heading**, and **Subheading**, letting you match your buttons to the rest of your store’s text style.

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FK8W43eoPlu8wL88wqjn1%2Fimage.png?alt=media&#x26;token=5b85b2c4-86fc-4f7d-9678-710353e86140" alt=""><figcaption></figcaption></figure>

### Height

Set the height of your buttons from 40px to 80px.&#x20;

Larger buttons stand out more, while smaller ones fit into compact designs.

### Corner radius

Adjust the roundness of your button corners from 0px (sharp) to 60px (rounded).&#x20;

Rounded corners give a modern look, while sharp corners keep things more traditional.

<div><figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2F9fdMgj4aFhHbXTbtgOIl%2Fimage.png?alt=media&#x26;token=8060b629-6949-4e6b-b35b-77ca391a5a96" alt=""><figcaption></figcaption></figure> <figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2Fb0jsLtDzKJqMQmGnSgE4%2Fimage.png?alt=media&#x26;token=a7842520-dc97-4c2d-b1fb-3a93aaffac95" alt=""><figcaption></figcaption></figure> <figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FQEE2f4ZKxXgByKz5sKO1%2Fimage.png?alt=media&#x26;token=c4726b9f-7641-4ce5-801c-29f38e6c03e8" alt=""><figcaption></figcaption></figure></div>

### Border thickness

Set the border thickness between 1px and 4px.&#x20;

Thicker borders make buttons more prominent, while thinner borders create a subtle, clean appearance.

<div><figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2Fqxr6NKTWbYgVQIdC2cf5%2Fimage.png?alt=media&#x26;token=9654a1c9-9fc1-4005-91de-23298c42d743" alt=""><figcaption></figcaption></figure> <figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FTUsROpF8Ri6hBH9Gyqi6%2Fimage.png?alt=media&#x26;token=3f4cb75a-dbc9-4e20-aa5c-ab52cfbb0f25" alt=""><figcaption></figcaption></figure> <figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FQhgecYSzpGsdOZIK702a%2Fimage.png?alt=media&#x26;token=135c2d15-ded5-452a-ab45-bdf4302879f0" alt=""><figcaption></figcaption></figure></div>
