Using the Code Editor you can add custom code to your site's Collection pages.
To add custom code to a Collection page:
- Go to the CMS
- Select the Collection using a Rich text field
- Then, select the Collection item to which you want to add custom code
- Create a new line by pressing Return (on Mac) or Enter (on Windows)
- Click the Plus icon
- 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.