Flex Guide: Testimonials Section

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

• Testimonials Settings
• Examples
• Mobile Layout

Using the Testimonials Section

The Flex theme includes a 'Testimonials' homepage section which is a quick and captivating way to add customer feedback and reviews to your site! Testimonials build confidence with shoppers and showcase real-life examples of your products in use by satisfied customers, which can be a great source of endorsement.

While the this section is ideal for highlighting actual testimonials and reviews, it can also be creatively used to showcase other information as well such as press mentions, staff favourites or promotions.

The testimonials section includes layout and advanced CSS settings. Each testimonial block includes image, text and color options.

The section will display up to 3 testimonials 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 Testimonials, click into Customize (your Theme Editor) > Sections > Add Section > Testimonials.

Testimonials Settings

• Section Settings
• Content Block Settings

• Section Settings

  The section settings determine the look and layout of this section! The settings are divided into general design settings, layout settings and advanced settings.

   

  General settings

  For the testimonials, there are some general design settings that you can configure first!

  
   
  Show border

  A border can be added to each testimonial block by enabling the 'show border' setting. The color for the borders can be selected under Theme Settings > Colors.

   
  Show images

  If you'd like each testimonial block to display an image, you can enable the 'show images' setting. You'll choose the actual images in each testimonial content block!

  
   
  Image crop shape

  If you have images enabled, you can choose to crop them to a circle or a square. We recommend uploading square images for best cropping results.

  
   
  Alignment

  You can choose to have the text and images aligned to the left, or center.

  
   
  Quote text/Quote background

  You can choose colors for the testimonial quote text and background.

  
   

  Layout

  The layout settings include options to adjust the spacing and width in this section, and enable animation for when the testimonials 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.

  
   
  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

  Testimonials are added as content blocks in the section. Within each content block, you have options to add the image, customer quote, customer info, and adjust the customer info color settings for each promotion.

  Image

  For each testimonial, you can upload an image! We recommend choosing a square image of 500 x 500 size.

  
   

  Quote

  You can enter the customer quote/feedback for the actual testimonial here! Since this is a rich text field, you can insert links in your quote text as well. This text will appear at the top of the testimonial.

  
   

  Customer info

  You can enter the customer/company information for each testimonial as well. This is also a rich text field, so you can insert links in the customer info such as adding a website link! This text will appear at the bottom of the testimonial.

  
   

  Info text/info background

  You can select colors for the customer info text and background here for each testimonial.

  

Examples

Example 1

Section details:

• Show images - enabled
• Image crop shape - circle
• Alignment - left
• Width - standard
• Both testimonials have images, quote and customer info.

Example 2

Section details:

• Show border - enabled
• Alignment - center
• Width - wide
• All testimonials have a quote and customer info

Mobile Layout

When viewed on a mobile device, 1 testimonial will show on screen at a time. The previous and next arrows will be above the testimonial so you can click and swipe through them.