Buttons

The outline thickness of buttons across the store. Button colors come from each color scheme, and button fonts and sizes from Typography.

Where to find it: In the theme editor, click the gear icon (Theme settings) in the left sidebar, then open Buttons.

Good for

  • Giving outlined (secondary) buttons a heavier or lighter edge

Settings

Border width The outline thickness of primary and secondary buttons. On secondary (outlined) buttons it is the only visible edge, so don't set it to 0 if you use them.

Adjustable from 0px to 10px (default 1px).

Tips

  • Change colors in the color scheme. Button colors, including hover colors, are set per scheme in Colors.
  • Round the corners in Border radius. The corner shape of buttons is set under Border radius → Buttons.
  • Button fonts live in Typography. Label font, size and capitals are set under Typography → Buttons.

Troubleshooting

My secondary buttons have no visible outline

Secondary buttons are transparent inside, so their outline is their only edge. Set Border width to at least 1px, and check that Secondary button → Border and label in the color scheme differs from the background.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.