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.
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!
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.
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!
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.
You can choose to have the text and images aligned to the left, or center.
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.
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.
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
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.