[Tutorial] - Are you putting your custom code in the right place?

Targeted at beginners, although you might want to refresh your knowledge.

I put together a quick rundown of the various places you can put custom code in Webflow and the various pros and cons.

In a nutshell;

Site settings:
Imported on each and every page. Good for global libraries and a single source of truth.

Page settings
As the name suggests, imported on the page you define them. Good to isolate things to a specific page but this can cause problems finding the code. In both head and footer, they load below their respective counterparts defined in the site settings.

Great for downloading things before the page loads. Body HTML has not loaded by this point. unless using a page load event listener. No HTML elements allowed.

Has access to pretty everything including the HTML of the page and jQuery and can include actual HTML. Good for non essential libraries and code.

Has access to any HTML above where it’s defined, good for reusable component code and defining elements that Webflow doesn’t give you.

If you’re interested you can find it here: