Buttons and form controls
Theme settings > Buttons sets the size, shape and animation of every button, the add to cart and checkout buttons, and the round arrow (chevron) controls. Form controls sets the look of text fields, selects and inputs.
How to set it up
Step 1: Shape the buttons
- Go to Theme settings > Buttons.
- Set the Button size (1), Corner radius, Border thickness and padding.
- Turn on Enable add to cart animation to fly the product image to the cart when a product is added.
Step 2: Style the buy buttons
- Under Product buy buttons, choose Fill or Outline for add to cart (on product pages and in Quick view) and for the dynamic checkout button.
- Pick a label animation (Default, Rolling or Cascade) and its direction, and turn on the fill background animation if you want the button to fill on hover.
- Set the Purchase options heading shown above selling plans.
Step 3: Style the arrow controls
- Under Chevron controls, set the background, icon color, border and corner radius of slider arrows.
Step 4: Style input fields
- Go to Theme settings > Form controls.
- Choose a Field style (Underline or Outline), corner radius, field height and border thickness.
- Keep Prevent iOS zoom on input fields on so iPhones don't zoom in when a shopper taps a field.
Settings reference
Buttons
| Button size | Options: Small, Medium, Large. |
|---|---|
| Corner radius | Slider. |
| Border thickness | Slider. |
| Horizontal padding | Slider. |
| Vertical padding | Slider. |
| Enable add to cart animation | Animate the selected product image to the cart and show a confirmation burst when an item is added. |
| Product buy buttons | |
| Add to cart style | Options: Fill, Outline. |
| Quickview add to cart style | Options: Fill, Outline. |
| ATC animation | Options: Default, Rolling, Cascade, None. |
| ATC direction | Options: From top, From left, From right, From bottom. |
| ATC Fill Background Animation | Turns this on or off. |
| ATC fill direction | Options: From top, From left, From right, From bottom. |
| Dynamic checkout style | Options: Fill, Outline. |
| Dynamic checkout animation | Options: Default, Rolling, Cascade, None. |
| Dynamic checkout direction | Options: From top, From left, From right, From bottom. |
| Purchase options heading | |
| Chevron controls | |
| Background color | |
| Icon color | |
| Show border | Turns this on or off. |
| Corner radius | Slider. |
Form controls
| Field style | Options: Underline, Outline. |
|---|---|
| Corner radius | Slider. |
| Field height | Slider. |
| Border thickness | Slider. |
| Prevent iOS zoom on input fields | Keeps text-entry controls at 16px or larger on touch-based WebKit devices without disabling page zoom. |
How it works
- Button colors come from the section's color scheme. Button hover animations for the rest of the store are set in Theme settings > Animations.
- Sections with a form (Contact form, Newsletter) can turn off Use global form controls to style their fields differently.