Flex Guide: Featured Promotions

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

• Featured Promotions Settings
• Examples
• Mobile Layout

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
• Content Block 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 radius

  You 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.
  
  

   
  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 (or invisible), while 100 is completely opaque.

  
  
   
  Text

  You can choose the text color for your promotions here.

  
  
   
  Show border

  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.

  
  
  Width

  You 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.

  
  
   
  Show gutter

  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.

  
  
   
  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,' '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.

  
  
   
  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

  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.

  
  
   
  Heading/Text

  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.