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.
In This Article
Using the Slideshow Section
The Flex theme includes a traditional 'Slideshow' section that can be used in a number of ways throughout your homepage. The 'Slideshow' section lets you add images that appear in sequence which can link to any URL (internal or external) and optional text and button fields.
This section is an excellent way to display high-quality imagery for product or lifestyle shots. Adding text and buttons onto each slide can also be a great way to invite your customers to view certain products or pages and explore your shop!
The 'Slideshow' 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 as well as mobile image cropping settings to get your image looking just right on smaller screen sizes.
Additionally, you can even upload a mobile specific image if you'd like to display a totally different image on mobile.
In order to set up the Slideshow, click into Customize (your Theme Editor) > Sections > Add Section > Slideshow.
Slideshow Settings
-
Section Settings
The section settings determine the look and layout of this section!
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.
Show navigation dots
If you'd like navigation dots to appear at the bottom of the Slideshow section, you can enable the 'show navigation dots' setting. When the dots are enabled, you can switch between the slides by selecting a dot!
Mobile - Show text below image
On mobile, you can choose between having the text and buttons display below the slideshow, or having them display on top. If you'd like the text to appear below on mobile, you can enable the show text below image setting.
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.
Top/Bottom spacing
You can choose to add space (padding) above and below the section by adjusting the 'top spacing' and 'bottom 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,' and 'slide in right.'
CSS Class/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.
More information about using the Advanced CSS feature.
-
Content Block Settings
Slides in the Slideshow section, are added as content blocks! In order to add a slide content block and insert the text and image, click into your Slideshow section and scroll down to Add slide:
Image
You can upload the image for the slide here! We recommend an image size of 1800 x 900px.
Mobile image
If you'd like an alternate image to appear only on mobile, you can upload a different image under mobile image option.
Link
If you'd like to add a link to your slide without displaying buttons, you can enter the URL in this 'link' field. Please note, this link will only be active when there are no buttons added.
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!
You can then select specific colors for each if you'd like in the color pickers below.
Text alignment
Here you can choose the alignment of your text and buttons (if you've added any!) Choose from left, center, or right.
Horizontal position
Here you can choose the horizontal position of your text and buttons (if you've added any!) Choose from left, center and right.
Text background/opacity
If you need more contrast between your text and the banner image, you can add a background color and adjust the opacity. You can select a background color from the color picker and select the opacity as well – 0 is completely transparent (or invisible), while 100 is completely opaque.
Border/Border width
A border can be enabled around your text/background and you can adjust the thickness with the 'border width' setting.
Text width
The 'text width' setting controls how wide the background for the text/buttons spans across your slide. You can choose from 40% - 100%.
Button labels/Button links/Button Styles
Two buttons can be added to the content area of the Slideshow section. You can input your button labels and button links, and choose between your primary, secondary and link button styles (which are configured under Theme Settings > Buttons) for each button
.
Examples
Example 1 - Emporium Demo Shop
Example 2 - Swagger Demo Shop
Mobile Layout
When viewed on a mobile device, the Slideshow section either stacks vertically with the banner image displaying at the top and the text and buttons display underneath, or with the text/button displaying on top of the image – depending what you've selected in the "Mobile - Show text below image" section settings.
Additionally, you can upload a 'mobile image' if you would like an alternate image to appear only on mobile.
Additionally, there are more mobile settings per slide in the content block settings.
Image cropping
By default, the section displays the entire banner image on mobile without any cropping/zooming which typically results in a narrow banner. If you'd like to allow a greater display area on mobile, you can enable 'image cropping' which will crop and zoom in on the image (left, center, right).
Preheading/Heading/Subheading
You have the option to choose specific colors for the preheading, heading and subheading text for mobile.
