CMS Data Sync

CMS data sync action is where you specify how you want your data synced into Webflow CMS collection.

Sync to CMS Library

Lets start with the first section of the action where you have to select Sync to CMS Library. In the dropdown you will have available all of your existing CMS collections. Note here that shown CMS collections are dependent on the site where you are using the Syncmate Webflow app.

Live Publish

By default items are synced into CMS as a draft, waiting to be published. But there is a toggle under the Sync to CMS library drop-down called Live publish that you can toggle on to directly sync currently published live items. If you update the live items when your site visitors refresh the page they will already see updated CMS items.

For details on how to create CMS collections in Webflow you can search for Webflow specific tutorials. It is quite straight forward on the top left in Webflow designer editor you have CMS button.

Create CMS collection

Specify the fields that you want in your CMS collection and save collection at the top right.

Now that you have the collection ready, lets start by specifying how the CMS items should be matched.

Match Collection Item

With match collection item section you specify how CMS data sync action should identify and match in your collection. This field should be referencing unique field, usually id.

Action logic here is if this expression is matched, we will check if Sync fields of existing item differ from current item and in that case update. If we do not match any existing items we will create a new item.

Collection Item Name

Collection item name is what is displayed as name in Webflow CMS when you are viewing collection items. The collection item name does not need to be unique.

Collection Item Slug

Collection item slug is the URL slug displayed for CMS item and it needs to be in specific format defined by Webflow otherwise Webflow will return the error. Slug should match pattern (^$)|^[_a-zA-Z0-9][-_a-zA-Z0-9]*$

You can use built in slug(value: string) function that will reformat your string into slug complaint format.

Sync Fields

Finally just specify a list of CMS fields that you want to sync and provide the data as a JavaScript expression. Make sure you transform the data in the correct format based on the type of field you have specified in the Webflow CMS field.