Flex includes a multi-functional Featured Promotions section to enhance pages. Catch customer attention and direct them towards specific content in your store with this dynamic page section.
Add this section to the
Section Settings
Click the Featured promotions section to open its general settings.
Image
Click Select Image to connect an image with the block.
There are two settings you can adjust for your featured promotion images: Border radius and Crop image.
Border radius
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.
Crop image
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 opacity
You can choose the background color for the overlay here and adjust the Opacity as well (0 is completely transparent (invisible), while 100 is completely opaque).
Text
Select the Text color for your promotions with the color selector.
Show border
Enable Show border to display around the text area.
Width
The width can either be set to Standard or Wide. Selecting Wide will spread out the full width of the screen. Selecting Standard will keep the section in a container and not spread the full width.
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 feature appears as it loads. 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.
Custom CSS
Add Custom CSS to the feature for further tweaking. You can even create your own CSS class here, as well. Check out this article for more information: Flex Guide: Custom CSS Feature
Content Block Settings
Click one of the preloaded Promotion blocks to customize it (e.g. Special deal). Add the image, text, icon, and link, then adjust the overlay settings for each promotion block.
Image
Although you can crop the image in the section settings, we recommend uploading images that are 800 x 600px.
Link
You can enter an internal or external Link for promotions. Adding one will turn the whole promotion (image and text) into a link.
Overlay/Text
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.
Icon
Include an Icon for your promotion to display above the text. To add an icon, view our Flex Icon List then enter the icon name in this field.
Heading/Text
Add your Heading and Text to add text centered on top of the promotion image.