Flex: Elements settings

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.

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.

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.