Articles in this section

See more

Flex Guide: Testimonials Section

  • Last updated:
  • Updated
Follow

testimonials-lead-in-image.png

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

testimonials-carousel-min.gif

In order to set up Testimonials, click into Customize (your Theme Editor) > Sections > Add Section > Testimonials.

 

Testimonials 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!

    testimonials-general-settings.png
     
    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.testimonials-show-borders-min.gif

     
    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!

    testimonials-show-images-min.gif
     
    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.

    testimonials-image-crop-shape-min.gif
     
    Alignment

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

    testimonials-alignment-min.gif
     
    Quote text/Quote background

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

    testimonials-quote-colors-min.gif
     

    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.

    testimonials-layout-settings.png
     
    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.

    testimonials-width-min.gif
     
    Top/Bottom spacing

    You can choose to add space (padding) above and below the section by adjusting the 'top spacing' and 'bottom spacing' settings.

    testimonials-top-bottom-spacing-min.gif
     
    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'.

    testimonials-animation-min.gif
     

    Advanced

    In the advanced settings, you can add in your own CSS class and custom CSS.

    More information about using the Advanced CSS feature.

    testimonials-advanced-settings.png

    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.

    testimonials-custom-css-min.gif

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

    testimonial-image-min.gif
     

    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.

    testimonials-customer-quote-min.gif
     

    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.

    testimonials-customer-info-min.gif
     

    Info text/info background

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

    testimonials-info-colors-min.gif
 

Examples

Example 1

testimonials-example-1.png

Section details:

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

Example 2

testimonials-example-2.png

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.

testimonials-mobile-min.gif

Related articles