Within the Flex theme, your button styles can be configured in the Buttons portion of the Theme settings.
Primary Buttons
Use the settings below Primary to control the appearance for the Primary Button Style.
Base size
Select a Base size for the Primary buttons. The options are Small, Regular, and Large.
Background
Use the provided color selector to control the Background color. Adjust the Background opacity with the slider below.
Select a color for Background hover and adjust the Background hover opacity.
Border
Select colors for the Border and Border hover.
Rounded or square corners
Use the Border radius setting to control the corners of the buttons. Select a value between 0px (square) and 35px (rounded).
Text
Select a color for Text and Text hover.
Secondary Buttons
Use the settings below Secondary to control the appearance for the Secondary Button Style.
Base size
Select a Base size for the Secondary buttons. The options are Small, Regular, and Large.
Background
Use the provided color selector to control the Background color. Adjust the Background opacity with the slider below.
Select a color for Background hover and adjust the Background hover opacity.
Border
Select colors for the Border and Border hover.
Rounded or square corners
Use the Border radius setting to control the corners of the buttons. Select a value between 0px (square) and 35px (rounded).
Text
Select a color for Text and Text hover.
Link Style
Use the settings below Link style to control the appearance of the Link style button.
Base size
Select a Base size for the ATC buttons. The options are Small, Regular, and Large.
Text
Select a color for Text and Text hover.
Underline
Select Solid, Dashed, or Dotted for the Underline style, then adjust the Underline thickness.
Add-to-Cart Button
Use the settings below "Add to cart" button to control the appearance of the add-to-cart (ATC) button style.
Base size
Select a Base size for the ATC buttons. The options are Small, Regular, and Large.
Background
Use the provided color selector to control the Background color. Adjust the Background opacity with the slider below.
Select a color for Background hover and adjust the Background hover opacity.
Border
Select colors for the Border and Border hover.
Text
Select a color for Text and Text hover.
Icon
Select an icon from the Flex Icon List to add to the Icon field. Select Left or Right from the Icon position setting to control the icon placement.
Rounded or square corners
Use the Border radius setting to control the corners of the buttons. Select a value between 0px (square) and 35px (rounded).
Please note: if you enable Shopify's dynamic checkout button, the add to cart color settings will then apply to the unbranded "buy it now" button instead.