Buttons and Inputs

Customize the appearance of buttons and form inputs across your store.

Accessing These Settings

1. Open the theme editor
2. Click Theme settings (gear icon)
3. Click Buttons or Inputs

Button Settings

Corner Radius

Control how rounded button corners are:

1. Find the Button corner radius slider
2. Adjust between 0-24 pixels
3. 0px = sharp corners (modern, editorial)
4. 24px = fully rounded (friendly, soft)
5. Default is 0px

Text Transform

Control button text capitalization:

• Uppercase - "ADD TO CART" (default, bold and clear)
• Normal - "Add to cart" (softer, more approachable)

Toggle with the Uppercase button text checkbox.

Button Styles in Sections

When adding buttons to sections, you can choose from:

• Primary - Solid background using button color
• Outline - Transparent with border
• Underline - Text link with underline
• Arrow - Some buttons include an arrow icon

Input Settings

Corner Radius

Style form inputs (email fields, search, etc.):

1. Find the Input corner radius slider
2. Adjust between 0-16 pixels
3. Default is 0px
4. Should generally match or complement button radius

Design Consistency

For a cohesive look:

• Minimal/Editorial: 0px radius on both buttons and inputs
• Modern: 4-8px radius for subtle rounding
• Soft/Friendly: 12-24px for rounded appearance

Button Colors

Button colors are controlled in the Colors settings:

• Primary button uses the Button color
• Button text uses Button label color
• Outline buttons use Secondary button label color

Change these in Theme settings > Colors for your active color scheme.