---
title: Buttons and inputs
url: https://support.troopthemes.com/guide/beyond/buttons-and-inputs/
theme: Beyond
theme_styles: Fleur
---

# Buttons and inputs in Beyond

Buttons work in two steps: In **Edit theme** → **Theme settings** → **Buttons & Inputs**, styles 1 through 4 define how buttons look storewide, including hover colors. On each section, the **Button** block picks style 1–4. Changing a style in Theme settings updates every button that uses it.

![Beyond Buttons and Inputs in Theme settings](https://support.troopthemes.com/_images/beyond/buttons--settings.jpg)

## Theme settings → Buttons & Inputs (Beyond)

### Four button styles (Beyond)

Each style has **Background**, **Text**, **Border**, **Hover background**, and **Hover text**.

- **Style 1**: primary: Shop, Add to cart
- **Style 2**: secondary on light backgrounds
- **Style 3**: outline on light surfaces
- **Style 4**: light text and border on dark or image backgrounds

Keep “Shop the collection” on style 1. Brand statement can use a quieter style 3 so the words stay primary.

**Buttons corner radius**: a small radius is the Beyond default; fully round buttons change the voice more than a new accent.

### Inputs (Beyond)

- **Inputs corner radius**: rounds newsletter fields, contact forms, search, and cart notes
- **Inputs background**: fill color behind the field
- **Inputs text**: color of the text customers type

Match input radius to button radius so newsletter fields on story pages match the buttons.

> **Fewer buttons on story pages**
>
> If About us, Brand statement, and a featured collection each have a solid button, the page is a list of CTAs. Prefer one shoppable button per view, and text links or no control on the story blocks.

## On each section (Beyond)

The **Button** block picks style 1–4 from the set you defined in **Buttons & Inputs**. Keep “Shop the collection” and Add to cart on style 1 storewide.

## Ask Sidekick <img src="/_images/sidekick-icon.png" alt="" class="sidekick-icon"> (Beyond)

Open [Sidekick](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/sidekick) from the theme editor toolbar (top right, next to the device preview icon), or press `⌘.` (`Ctrl+.` on Windows). Ask it to suggest a button style.

> "Suggest Background, Text, Border, Hover background, and Hover text values for Style 1 (primary) and Style 3 (outline) that fit an editorial, story-led brand."

It'll reason through contrast and hierarchy with you before you touch Theme settings → Buttons & Inputs. Useful when you have four button styles to fill in and aren't sure how to differentiate them.

![Opening Sidekick from the theme editor toolbar](https://support.troopthemes.com/_images/beyond/sidekick--theme-editor.png)

## Troubleshooting (Beyond)

- **Too many solid buttons**: remove the button block from Brand statement or About us, or switch those to style 3. Keep style 1 for the collection.
- **Add to cart didn’t change**: confirm **Buttons & Inputs** and style 1 on the product form.
- **Checkout is unchanged**: Shopify checkout, not the theme.