Flex Guide: Slideshow with Text Section

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 Slideshow with Text Section

The Flex theme includes a 'Slideshow with Text' section that utilizes a unique design and alternate approach to the typical 'slideshow' section and can be used for a variety of purposes on your store’s homepage. The 'Slideshow with Text' section lets you add content blocks of text and images for each slide that appear in sequence which can link to any URL (internal or external) and optional text and button fields. This section is an easy way to grab your customer's attention with eye-catching imagery and accompanying text to get them to engage more with your store, find out more information or explore your products.

The 'Slideshow with Text' section can be used to promote new collections, sales, or specials, simply as a 'gallery' to showcase some high-quality images with complementary text, or to display introductory content that links out to more informative pages - just to name a few!

This section also includes additional layout settings and advanced CSS fields for further flexibility.

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

Section Settings

The section settings determine the look and layout of this section! These are grouped into settings and options for: text, images, layout, and advanced CSS.

Text

The settings for the text in the 'Slideshow with Text' section, will apply to all of the text in each slide (content block).

Background/Text

You can select specific colors for the background and text of the 'text' area within the Slideshow with Text section with these color pickers. If you do not select specific colors in these color pickers, they will default to the general theme colors set in Theme Settings > Colors.

Text alignment

Here you can choose the alignment of your text and buttons for your the text area within the slides. Choose from left, center, or right.

Text transition

The 'text transition' setting will determine how the text 'loads in'. You can choose from: 'none,' 'fade in,' 'fade in down,' 'fade in left,' 'fade in right,' and 'zoom in.'

Button style

If you've included a button in the text area of the Slideshow with Text section, you can choose between your 'primary' and 'secondary' button styles(which are configured under Theme Settings > Buttons).

Show navigation dots

If you'd like navigation dots to appear below the text area of the Slideshow with Text section, you can enable the 'Show navigation dots' setting. When the dots are enabled, you can switch between the slides by selecting a dot!

Images

The settings for the images in the 'Slideshow with Text' section, will apply to the images in each slide (content block).

Image position

The 'image position' setting allows you to choose whether you'd like the images in every slide to appear on the left or the right.

Image transition

The 'image transition' setting will determine how the image in each slide 'loads in'. You can choose either 'fade' or 'slide' for the transition.

Change image every

With the 'change image every' setting, you can adjust how quickly your slides change. Choose from 0 - 12 seconds. Setting to 0 will disable the slideshow from autoplaying, so the user will have to click the arrows to switch slides!

Show arrows

If you'd like arrows to display on top of the images in each slide, you can enable the 'show arrows' setting. If you'd like to hide the arrows, simply disable this setting.

Layout

The layout settings include options to adjust the spacing and width for the Slideshow with Text section.

Width

The options under the 'width' setting include '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.

Show gutter

When enabled, the 'show gutter' setting will add space (margin) in between the images and text in each slide. If you don't want space between them want the images and text to be flush with each other, you can disable this setting.

Top/Bottom spacing

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

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

Slides in the Slideshow with Text section, are added as content blocks! In order to add a slide content block and insert the text and image, click into your Slideshow with Text section and scroll down to Add slide:

Image

You can upload the image for the slide here! We recommend an image size of 1600 x 1000px.

Preheading/Heading/Text

In each slide, you can enter text in the 'preheading,' 'heading' and 'text' fields. The preheading and text fields are rich text editors, so you can insert links or bold/italicize the text as well!

Button label/Slide link

If you'd like to add a button under the text in your slide, you can enter text in the 'button label' field and then enter the link/URL in the 'slide link' field.