Testimonials: Example by using homepage sections

Here's an example of a testimonials section created in Pipeline (without any code) by using two homepage theme sections:

• Image with text overlay
• Text columns with images

How to:

1

Image with text overlay

Add the section in the Theme Editor:

https://shopify.com/admin/themes/current

Under Sections, choose Add section:

Add Image with text overlay:

Example settings:

Add your background image, choose a height that works well for that image and turn on parallax scroll if you like. For some images, you might want to try the Section height set to Image height and turn off parallax scroll.

In the Text area, the Headline is the larger main text and Description is the smaller sub-text.

I've kept the link blank and not used a button for this testimonial example. 

2

Text columns with images

Add the Text columns with images section:

For the settings options, I've used a Heading which appears at the top of the section (1):

You can choose a background color that works best for your site. I've used Left Text alignment. 

For each of the Content blocks, I've configured as:

Show Image - Unchecked 
Heading - The lead title
Text - The smaller quote

Example of the content blocks:

Three content blocks per row will work best for most browsers. You can have up to four per row. These will stack on mobile:

If you want a little more space between each of the testimonials on mobile:

Simply add an extra line in the Text and in that line add a space. That will be saved and used as a blank line. 

If you need additional testimonials, try six for two rows of three:

Example of six content blocks, two per row:

Experiment with style and content. To change the sort order of your testimonials, each content block has a drag handle on the right:

Use the six dot icon to drag and drop the position of your content blocks:

Remember to Save your settings as you edit these sections. 

Hiding a section

If you'd like to hide a section, on your main sections list, there's an eye icon. You can toggle that section on and off:

For example:

That would hide the Image with text overlay banner section and only show the testimonial columns.