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 Featured Promotions
The Flex theme includes a handy multi-functional 'Featured Promotions' section which is available on the homepage. The 'Featured Promotions' section is a great way to catch your customer's attention, and direct it towards specific content in your shop that you’d like them to see or explore further!
The featured promotions section includes layout, overlay, and advanced CSS settings. Each feature block includes image, text, overlay, and icon settings.
The section will display up to 3 promotions at a time. If you have more than three added, previous/next arrows will appear at the top right corner to click through them all in a carousel.
In order to set up the Featured Promotions, click into Customize (your Theme Editor) > Sections > Add Section > Featured Promotions.
Featured Promotions Settings
-
Section Settings
The section settings determine the look and layout of this section! The settings are divided into the following areas: image, overlay, layout, and advanced.
Image
There are two settings you can adjust for your featured promotion images: border radius and crop image
Border radiusYou can select a value on the border radius slider if you'd like your images to have rounded corners! Choose from 0 - 25 px. If you do not want rounded corners, leave the value at 0.
While we recommend uploading images that are 800 x 600px and all the same size, it may be possible you'd like to use some images that are different sizes. If that's the case, you can enable the 'crop image' setting which will crop the images to be squares and the same size.
Overlay
The featured promotions include the option to have an overlay on top of the image. This can help if you need more contrast between the image and the text.
Background/Background opacityYou can choose the background color for the overlay here and adjust the opacity as well – 0 is completely transparent (or invisible), while 100 is completely opaque.
You can choose the text color for your promotions here.
You can choose to enable or disable a border that will display around the text area. When enabled, the border will animate when a promotion is hovered.
Layout
The layout settings include options to adjust the spacing and width in this section, and enable animation for when the featured promotions section loads in.
WidthYou can choose between 'wide' and 'standard' for the width of this section. Selecting 'wide' will spread this section out full-width. Choosing '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 your promotion content blocks. If you don't want space between the promotions and want them 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.
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
Promotions are added as content blocks in the section. Within each content block, you have options to add the image, text, link, and adjust the overlay settings for each promotion.
Image
Although you can crop the image in the section settings, we recommend uploading images that are 800 x 600 px.
You can enter an internal or external link for promotions. Adding one will turn the whole promotion (image and text) into a link.
If you'd like a promotion to have specific overlay and text colors, you can override the ones you previously set in the section settings and choose specific colors here.
You can add an 'icon' to your promotion that will display above the text. To add an icon, view our Flex Icon List and enter that name in this setting. You can choose between two icon styles within the theme: solid and outline. The icon style can be chosen under Theme Settings > Elements > Icon style.
The heading and text are where you can enter the content for your promotion. The text will be centered on top of the promotion image.
Examples
Example 1
Settings
- Crop images - enabled
- Background opacity - 40%
- Show border - enabled
- Width - standard
- Show gutter - enabled
- Top/Bottom spacing - 20px
Promotion content blocks
- each promo has an icon, heading, text, and link added.
Example 2
Settings
- Crop images - enabled
- Background opacity - 70%
- Show border - enabled
- Width - standard
- Show gutter - enabled
Promotion content blocks
- each promo has an icon, heading, text, and link added.
Mobile layout
When viewed on a mobile device, 1 promotion will show on screen at a time. The previous and next arrows will be above the promotion so you can click and swipe through them.