The Flex theme includes settings for the theme's Elements which can be accessed by going into your Theme Editor (customize) > Theme Settings > Elements.
Within the Elements settings, you can configure styles for small components throughout the theme. These settings will include options for the following elements:
- Icons
- Breadcrumbs
- Drop-down menus
- Forms
- Heading dividers
- Sidebar
- Tables
- Quantity box
- Tags
Icons
The Flex theme includes options to add icons to certain elements throughout the theme. Within the Icons settings, you can choose an icon style, which can either be set to solid or outline.
In the Icons settings, you can also choose the accordion icon type for the accordions in the FAQ page template and Sidebar (if you have the toggle enabled). The accordion icon type can either be set to plus and minus or carets.
The social media share icon border setting can be configured within the Icons settings as well! If you have the social media share icons enabled on your product pages, you can choose whether you'd like the border around them appear squared or rounded.
Breadcrumbs
If enabled, breadcrumbs can be seen throughout the theme in your product pages, collection pages and blog posts. Within the Breadcrumbs settings, you can choose the capitalization, separator and size.
Capitalization
The options for breadcrumbs capitalization are: none, lowercase and uppercase.
Separator
The options for the breadcrumbs separator are: arrow, bullet, caret, or slash.
Size
The options for the breadcrumbs size are: small, regular and large.
Drop-down menus
These settings will apply to any drop-down menus in your header's navigation.
Drop-down style
Within the drop-down style setting, you can select either vertical or horizontal. The vertical drop-down style stacks the drop-down items vertically within the drop-down menu. The horizontal drop-down menu style will line-up the drop-down items horizontally/side by side within the drop-down menu. Please note: the drop-down style does not apply to the vertical header.
Drop-down position
The drop-down position setting will only apply to the vertical drop-down style. You can select either below parent link or below header. Below parent link position will have the drop-down menu display directly below the parent link. Below header position will have the drop-down menu display below the entire header.
Vertical spacing
The vertical spacing setting controls the amount of space between each drop-down menu item. You can choose from small, medium or large.
Forms
These settings will apply to all forms throughout the theme: contact form section, contact page, newsletter section, and popup (if newsletter form enabled). Within the forms settings, you can choose to use placeholders for the fields within all forms and select the button style for the submit button.
Use placeholders
If you want the labels for the form fields to display within the field, you can enable the 'use placeholders' setting. This will move the text from above the field, to inside it.
Button style
With the 'button style' setting, you can choose between your primary, secondary and link button styles (which are configured under Theme Settings > Buttons).
Heading Dividers
The heading dividers settings will apply to headings in the following areas: featured collection section, blog posts section, Instagram feed section, heading section, recommended products section, and internal page titles.
You can select the color for the heading dividers by going into Theme Settings > Colors > Headings divider.
Show dividers
The dividers for the headings are optional! If you want to enable them, keep the "show dividers" setting checked off. If you do not wish for the dividers to display below the headings, you can uncheck this setting.
Divider animation
The divider animation setting lets you select an animation style for how the divider will 'load in' – choose from none, fade in, fade in down, fade in left, fade in right, slide in left, slide in right, and zoom in.
Divider style
You can choose between short horizontal, long horizontal or vertical for the divider style.
Divider thickness
You can decide how thick you'd like the divider to be with the divider thickness slider. Choose from 1 - 5 pixels.
Sidebar
The sidebar's toggle sidebar content setting will apply to all sidebars throughout the theme. Sidebars can be enabled in the following places: blog page, blog post, collection page, page.sidebar, and product page.
Toggle sidebar content
If you'd like all the content in your sidebars to be hidden by default and only displayed when toggled, you can enable the toggle sidebar content setting. Otherwise, all the sidebar content will be visible by default!
Tables
Enable styled tables
The enabled styled tables setting will apply to any tables added throughout the theme.
If you enable this setting, borders and padding will get added to your tables.
Quantity box
The quantity box settings will apply to all quantity boxes throughout the theme: product page (if enabled through Theme Settings > Product Form), cart page (if enabled) and mini cart/drawer cart types (if enabled).
Style
Within the style setting, you can choose whether you'd like your quantity boxes to appear as box or stacked.
Border radius
If you'd like your quantity boxes to have rounded corners, you can adjust the border radius slider from 0 - 25 pixels.
Tags
Tags style
The tags style setting will apply to any instances of tags throughout the theme: product page (if enabled) and blog page/blog posts (if enabled). For the tags style, you can select either solid or outline.
