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
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.
Slideshow with Text 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.
The settings for the text in the 'Slideshow with Text' section, will apply to all of the text in each slide (content block).
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.
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.
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.'
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!
The settings for the images in the 'Slideshow with Text' section, will apply to the images in each slide (content block).
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.
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!
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.
The layout settings include options to adjust the spacing and width for the Slideshow with Text section.
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.
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.
You can choose to add space (padding) above and below the section by adjusting the 'top spacing' and 'bottom spacing' settings.
In the advanced settings, you can add in your own CSS class and custom CSS.
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:
You can upload the image for the slide here! We recommend an image size of 1600 x 1000px.
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.
Example 1 - Trending demo shop
Example 1 - Moda demo shop
When viewed on a mobile device, the image and text content blocks in each slide will stack vertically, with the image at the top.