Flex Guide: Logo List

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.

Using the Logo List Section

The Flex theme includes a versatile 'Logo List' section available on the homepage. This section is essentially a row (or rows) of small images with an optional link field. The 'Logo List' section can display up to 8 logos or images per row and allows up to 20 of them.

In addition to adding logos, you can also configure the background color, layout and include custom CSS in this section as well.

This section can be used to display logos of brands that you carry and link to their Collections pages, or partner and vendor logos and link to their own sites. It's also a great way to integrate any press mentions or awards your company may have! Add logos of publications, broadcast programs, or organizations that have featured your company and link them up to the resource.

In order to set up the Logo List, click into Customize (your Theme Editor) > Sections > Add Section> Logo List.

Section Settings

The 'Logo List' section settings determine the look and layout of this section! In addition to the logo settings, the settings are divided into the following areas: background, layout, and advanced.

Logos Per Row/Logo Size

Within the Logo Settings, you can determine the 'logos per row' (choose between 1 -8) and 'logo size' (small, medium, large).

Background

In the Logo List 'Background' settings, you can select the background color, add a gradient to the background and if you've added a gradient, choose the gradient rotation.

Layout

The layout settings include options to adjust the spacing and width in this section, and enable animation for when the 'Logo List' section loads in.

Width

The options under the 'width' setting include: 'half,' 'standard' and 'wide.' Selecting 'wide' will spread out the section full-width of the screen. Selecting 'standard' will keep the section in a container and not spread the full-width. Selecting 'half' will resize this section to be half of the 'wide' option.

With the 'half' width option, if you have set the Logo List section to 'half', and the Section following it set to 'half', they will sit next to each other side-by-side – for example, here is a section heading section followed by the logo list section:

Top/Bottom spacing

You can choose to add space (padding) above and below the section by adjusting the 'top spacing' and 'bottom spacing' settings.

Left/Right spacing

For even further control, you can choose to move the section over more to the left or to the right side of the page by adjusting the 'left spacing' and 'right spacing' settings.

Animation

The 'animation' setting will determine how the section 'loads in' . The options for animation are: 'none,' 'fade in,' 'fade in down,' 'fade in left,' 'fade in right,' 'slide in left,' 'slide in right,' and 'zoom in'.

Advanced

In the advanced settings, you can add in your own CSS class and custom CSS.

More information about using the Advanced CSS feature.

In the 'CSS Class' field, you can create a new class to apply to the section, or you can add a class that already exists to apply those styles as well!

The 'Custom CSS' field is where you can add in the actual CSS code.
Content Block Settings

Within the content block settings (Logo List > Add Logo), you can upload your 'image' for the logo and add a 'link' if you'd like!