Supported Versions
The details shared here apply to the most recent version of Flex. To keep your theme up to date, check out this helpful document.
In This Article
Flex Button Settings
Within the Flex theme, your button styles can be configured in Theme Settings > Buttons. The theme includes settings to set up three different button styles, known as primary, secondary and link style, that can be used and selected throughout the theme – as well as your 'add to cart' button.
Primary, Secondary and Link Style Button Settings
All sections that include a button option in them, will also let you choose between your primary, secondary, and link style button styles.
Within the button settings (Theme Settings > Buttons) you can configure the following settings for your primary and secondary buttons:
- base size (small, regular, large)
- background color
- background opacity
- border color
- text color
- background hover color
- background hover opacity
- border hover color
- text hover color
- border radius (0 - 35px)
You can configure the following settings for your link style button within the button settings (Theme Settings > Buttons) as well:
- base size (small, regular, large)
- text color
- text hover color
- underline style (solid, dotted, dashed)
- underline thickness (0 - 5px)
Add to Cart Button Settings
You can also configure the following settings for your add to cart button within the button settings (Theme Settings > Buttons):
- base size (small, regular, large)
- background color
- background hover color
- border color
- border hover color
- text color
- text hover color
- border radius (0 - 35px)
- Icon (choose from the Flex Icon List)
- Icon position (left/right)
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.
