Skip to content

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

Theme settings → Buttons & Inputs

Four button styles

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

  • 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

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

Open 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

Troubleshooting

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