Custom code in the CMS

Updated

Using the Code Editor you can add custom code to your site's Collection pages.

To add custom code to a Collection page:

  1. Go to the CMS
  2. Select the Collection using a Rich text field
  3. Then, select the Collection item to which you want to add custom code
  4. Create a new line by pressing Return (on Mac) or Enter (on Windows)
  5. Click the Plus icon
  6. Select HTML embed or Code block

This opens the code editor. This is where you can paste your custom code (like an embed snippet). Then click Save & Close to save the code to your Collection item and close the code editor.

The code editor includes the following features:

  • Find and replace — press Cmd + F (on Mac) or Ctrl + F (on Windows), or click the search button to open the search bar. You can search your code, toggle Match case and Match by word, use regular expressions, and replace individual or all matches.
  • Autocomplete — the editor suggests HTML tags as you type and auto-closes brackets and tags.
  • Prettify — click the Prettify button to auto-format your code. Prettify also validates HTML, CSS, and JS and flags syntax errors before publishing.
  • Character limit warning — a warning appears as you approach the character limit.
  • Save warning — if you close the editor with unsaved changes, a dialog prompts you to save or discard.
  • Support for Emmet abbreviations

Note

Custom code is not validated. Incorrect code may cause issues with the page in Webflow’s preview or comment modes, or when published.