Skip to main content
Button settings shape two things customers interact with on every page: the buttons themselves and the arrow controls on sliders. Corners are set globally so that Add to cart, Checkout, newsletter submit and every Button block share one silhouette, while slider arrows get their own shape and spacing because they sit over images rather than in text.

​
What these settings control

  • Corner rounding of all buttons in the theme, including Button blocks, product forms, cart actions and form submits
  • Whether slider previous and next arrows are round or square
  • The distance between the two arrows of every slider
Button colors come from the color schemes, and whether a given button is Filled or Outlined is chosen on each Button block.

​
How to access

1

Open the Theme Customizer

From your Shopify admin, go to Online Store, then Themes, and select Customize.
2

Open Theme settings

Select the Theme settings icon at the bottom of the left sidebar.
3

Select Buttons

Expand the Buttons group to see the button corner and slider arrow settings.
Buttons group in the Theme settings sidebar

​
Settings

​
Button corners

Button corners: The corner rounding of all buttons in the theme. Default: Slightly rounded.
  • Sharp: Right-angled corners for a formal, minimal look.
  • Slightly rounded: A small radius that softens the edges without changing the rectangular shape. Default.
  • Fully rounded: Pill-shaped buttons. Friendly and prominent, but long labels make very wide pills.
  • Diagonal: The top-left and bottom-right corners are rounded and the other two stay sharp, matching the Diagonal corner style available for cards and media.
Button corners are independent of the Corner style in Corners. For a coherent look, we recommend Sharp with Sharp, Slightly rounded with Soft, Fully rounded with Rounded, and Diagonal with Diagonal.

​
Slider arrows

Slider button shape: The shape of the previous and next arrow buttons on every slider, including product sliders, testimonials, featured collections and the announcement bar slideshow. Default: Round.
  • Round: Circular arrows that sit comfortably over images.
  • Square: Square arrows that align with grid edges and bordered cards.
Space between slider arrows: The gap between the previous and next arrows of each pair, from 0 to 32 pixels in steps of 2. Default: 8 pixels. At 0 with Square arrows, the two buttons sit flush and share a single border, forming one compact control. With Round arrows a small gap is needed so the circles do not overlap.
Slider arrows are always rendered as a pair; there is no theme setting to hide them. Individual sections decide whether they show arrows at all.

​
Best practices

  • Prefer Slightly rounded or Sharp for text-heavy buttons: Fully rounded pills look best with short labels such as Shop now; long labels like Add to cart with a price can look stretched.
  • Keep arrows consistent with cards: Square arrows suit bordered cards and Sharp corners; Round arrows suit Soft or Rounded corners.
  • Use a 0 gap with Square arrows on purpose: The flush pair is a distinctive control that works well on editorial sliders; for product sliders a small gap makes each arrow an easier tap target.
  • Check contrast in every scheme: Arrows use the color scheme of their section, so preview sliders in dark and bright schemes after changing the shape.
  • Test on mobile: Pill buttons take more horizontal space; confirm that side-by-side buttons in hero banners still fit on phones.