Button

Overview

The Button block lets you add a clickable call-to-action (CTA) to your content, such as Shop now, Learn more, or View details.
It supports multiple styles, sizes, and optional custom colors.

---

Where to use this block

You can add the Button block inside any section or block area that supports theme blocks, such as:

• Content sections

• Accordion Rows

• Promotional layouts

• Hero / banner sections (where blocks are supported)

---

How to add this block

1. Open the Theme Editor

2. Navigate to a section that supports blocks

3. Click Add block

4. Select Button

---

Block settings

Content

• Label
  The button text shown to customers.

• Link
  The destination URL (for example, a collection, product, page, or external link).

• Open link in new tab
  Opens the link in a new browser tab/window.

---

Layout & behavior

• Button style

  • Solid (primary)

  • Outline (secondary)

  • Link

• Size (not available when Button style = Link)
  Small / Medium / Large / Extra large

• Font size scale (50%–150%)
  Scales the button text size.

• Wrap text in button
  Allows long labels to wrap onto multiple lines instead of staying on one line.

---

Style

• Custom color
  Enables manual color customization for the selected button style.

  When enabled, available color options depend on Button style:

  Solid (primary)

  • Button label

  • Button background

  Outline (secondary)

  • Button label

  • Button border

  Link

  • Color

---

Tips

• Use short, action-oriented labels (e.g., Shop now, View collection, Learn more)

• Prefer Solid for primary CTAs, and Outline for secondary actions

• Use Wrap text in button for long labels on mobile

• Only enable Custom color when you need the button to stand out from the current color scheme (otherwise, keep it consistent)

---

Limitations

• Size is not available when Button style is set to Link

• If Label is too long, the button may look crowded (consider shorter text or enable wrapping)

---

Common use cases

• Link to a collection or featured product

• Link to a policy page (shipping, returns, warranty)

• Add a CTA inside an Accordion Row

• Add “Learn more” links in content sections

---

Need help?

If the button does not navigate correctly, verify the Link setting and test in the live preview before saving.