Appearance
Buttons
This guide describes the Theme settings > Buttons menu options. Use the setting to specify how buttons are displayed throughout your store. Refer to Shopify help: Buttons
In the previous video, a button is displayed, inside a Newsletter section, on a store's homepage. To add a rounded border to the button, in Theme settings > Buttons, the Border radius dropdown option is changed from None to Rounded full.
For general guidance with adjusting a theme setting, refer to Settings overview and Shopify help: Theme settings
Apply styles to buttons
To apply styles to buttons:
Go to Theme settings > Buttons.
Select a setting described in the following table.
| Setting name | Description |
|---|---|
| Border radius | Use the Border radius dropdown to set the shape of the button borders to None (off), Rounded small, Rounded medium, or Rounded full. |
| Border > Width | Adjust the Width slider to set a width for the button borders. The slider ranges from 0 to 5 px (pixels). |
| Shadow > Size | Adjust the Size slider to set a size for the button shadow effect. The slider ranges from 0 to 10 px (pixels). |
| Shadow > Color | Use the Color dropdown to set a color for the button shadow effect. Set the shadow effect to Transparent, set it to use the same color as the Card, or to the current color scheme's Text, Accent 1, Accent 2 or Gradient color. |
| Shadow > Shadow direction | Use the Shadow direction dropdown to set a position for the button shadow effect. The dropdown options are:
|
| Show border on shadow | Select the checkbox Show border on shadow to show/hide borders around the button shadow effect. The button border color and width settings are applied to the shadow effect's borders. |