‚Üź 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.
Relume's Class Sync: A Game-Changer for Webflow Designers

Relume's Class Sync: A Game-Changer for Webflow Designers

Relume has launched a chrome extension called Class Sync which aims to streamline the use of component libraries in Webflow projects. The Class Sync feature automatically applies styles to copied components to avoid issues with duplicate classes and lost styles.

How to use Whalesync for two-way syncing between Airtable and Webflow

How to use Whalesync for two-way syncing between Airtable and Webflow

I checked out Whalesync, a tool for two-way syncing between tools like Airtable, Webflow, Bubble, Noton and more, to see how useful two-syncing is.

Memberstack 2.0 - Is it worth switching?

Memberstack 2.0 - Is it worth switching?

Memberstack 2.0 is officially launched - I had a play with it to figure out whether or not it is worth switching from 1.0 to 2.0, how easy or hard it is to migrate Memberstack 1.0 sites to 2.0, and if what my thoughts are on alternative options like Webflow Memberships or Wized?

How to allow clients to manage your no-code builds with Airtable Interfaces

How to allow clients to manage your no-code builds with Airtable Interfaces

I help a lot of people set up bases for their marketplaces or sometimes even for clients, and a question that keeps coming up is how can you allow your clients to safely manage their Airtable base without overwhelming them with the complex setup?

How to instantly trigger Airtable workflows in make.com using webhooks

How to instantly trigger Airtable workflows in make.com using webhooks

If you want to run a make.com workflow that triggers when something happens in Airtable, you typically have to wait for 5 - 15 minutes depending on how you set your schedule - unless you use a webhook fired from inside Airtable Automations.

How (and why) to use output.set in Airtable Automations

How (and why) to use output.set in Airtable Automations

Output.set is a must-know function for anyone setting up workflows in Airtable Automations. It allows us to reuse variables in automation steps that we get from JSON responses.