‚Üź All blog posts

How to build a dynamic testimonial section with the Webflow CMS

Learn how to create a dynamic section in the Webflow CMS for product reviews, testimonials, and more. Watch the step-by-step process of designing, building, and automating a brand-new section on my profile page.

October 27, 2022

If you run a directory like I do with Unicorn Factory or you run an e-commerce store in Webflow E-Commerce, you might want to add a testimonial section for your service providers or products that filters testimonials depending on the CMS page. In this video, I show you how to build it... let's go.

‚Äć

Design and build the testimonial section with Webflow

The first thing to do is to design the section in Webflow. I typically build the section from scratch or use the Relume library. I make sure that my section and components look exactly how I want it to look before I create the CMS collection.

‚Äć

A great resource to speed up your workflow is using the Relume Component Library. You can simply browse through their component library and use whatever your component your use case fits best.

Once you have copied your component into your Webflow project, you might need to make some modification, so feel free to remove fields you no longer need or add whatever is missing.

Create the testimonial section in the Webflow CMS

Once you are happy with how your component looks it is time to add dynamic data. We can do that by setting up our Testimonial collection in the Webflow CMS.

‚Äć

Add all the fields that will be dynamic to your CMS like I did with my testimonial test, client name, client job title/company and avatar.

The next very important field that is very important to add is a link to our freelancer table, so that we can filter testimonials based on the freelancer page.

Once your CMS is setup, add some sample records to your CMS and move on to the next step where we connect our CMS records to our component in Webflow.

Map your testimonial CMS to your testimonial component

Mapping the fields from the Webflow CMS to your page is simple. Simply click on the components inside of the designer and dynamically connect the CMS fields to each component. Please note that at this point your component has to be in a CMS Collection list which you can add from the add element panel.

How to filter out CMS records by the CMS page

Once your component is connected to the CMS there is one last thing to do and that is to apply a filter where the testimonial is filtered by the page that we are on. That way not all testimonials appear on all pages, but instead only testimonials that apply to this page.

Create your Airtable Testimonial Table

Now we are pretty much good to go in Webflow. In order for us to connect the Webflow CMS to our database we have to do the three things:

  1. Create a testimonial table in our Airtable account
  2. Add all fields in the Webflow CMS to our Airtable table, so we can map them to each other
  3. Add fields for storing the Webflow ID and Slug

‚Äć

The field types need to match the field types that you have in Webflow. For example a single text field in Airtable is the same as a single line text in Webflow. A linked record in Airtable is the equivalent of a Webflow Single Reference.

We also want to create a field for our status with the values: Needs Review, Approved, Live, Remove and Archived. Once created create a new view and filter out only approved records. We are going to use this view in the next step.

Add some sample records to Airtable and let's move on to the final step which to connect Airtable to Webflow using make.com.

Set up the Make Workflow

In Make we want to define our trigger as "Watch records" filtered by the approved view. Be sure to add a last modified time field to your Airtable table to ensure that make.com knows when an update is made to a record.

From there we want to add our action steps which is to firstly create a Webflow CMS item and then once created an action step that allows us to the Airtable record with the Webflow ID and slug.

Use the code

Copy

Dive Deeper with the Webflow CMS Series using Make.com

Learn how to use make.com to send data between Airtable and the Webflow CMS. These are the workflows to create Webflow directories and marketplaces.

Learn more ‚Üí
Subscribe to the newsletter!

Get notified when I publish my next video or blog

ūüėė Got it!
Oops! Something went wrong while submitting the form.
Introducing Relume Ipsum: Revolutionize Your Web Design Process with AI-Generated Copy

Introducing Relume Ipsum: Revolutionize Your Web Design Process with AI-Generated Copy

Ready to take your web design game to the next level? Discover how Relume Ipsum's AI-powered plugin can revolutionize your content creation process. Read our blog post now!

Webflow SEO Hack: Convert Your CMS Images to WebP

Webflow SEO Hack: Convert Your CMS Images to WebP

In August, Webflow added an internal compression tool that allows you to convert images to the webP filetype for improved web performance. While this feature is available for static images, it is not yet available for CMS images. Luckily, a solution to this problem is converting your CMS images to WebP.

How to Fix Common Webflow Performance Issues with Lighthouse

How to Fix Common Webflow Performance Issues with Lighthouse

Are you experiencing performance issues on your Webflow site? Lighthouse can help you identify and fix common problems such as slow loading times, poor server response, and lack of caching. Learn how to use Lighthouse to improve your Webflow site's performance and enhance the user experience.

Building a Cover Letter Generation App with Wized, GPT-3, and Webflow

Building a Cover Letter Generation App with Wized, GPT-3, and Webflow

I'll show you how I used the power of GPT-3 by OpenAI, @Wized and Webflow to create an app that generates custom cover letters for job listings. If you are looking for GPT-3 business ideas, feel free to use the same process to set up your own site.

Optimizing Webflow Designs Using Line Clamping

Optimizing Webflow Designs Using Line Clamping

Using line clamps in Webflow allows for the creation of visually appealing layouts by limiting the number of lines of text displayed within an element.

Advanced Webflow Search & Filtering w/ Data Fetcher & Finsweet Attributes

Advanced Webflow Search & Filtering w/ Data Fetcher & Finsweet Attributes

In this post, we'll be walking through the process of using Finsweet Sort and Filter to implement search and basic filtering functionality for our book collection. We'll also be using Data Fetcher to import Google Analytics page views and incorporate them into our Webflow site, allowing us to sort our books by popularity.