How to Add CSS & JavaScript to a Magento CMS Page

Sharing is Caring

Magento is an insanely flexible system that has a lot of potential, but of course with this flexibility comes a lot of learning.

Adding a JavaScript file and a CSS file to a specific CMS page isn’t very difficult. We should always consider adding the JavaScript file or CSS file to the theme if we’re going to use it on more than one specific page.

We setup a reference and use the name=”head” and then we’re able to add whatever actions that we would like. It’s fairly simple and makes use of XML, so be careful with closing tags. 🙂

By default CSS files are looked for in /skin/frontend/base/default/css and javascript files are looked for in /skin/frontend/base/default/js but you are able to specify different paths and really should! For CSS files just change the type to css.

<reference name="head">
  <action method="addItem">
    <type>js</type><script>yourjsfile.js</script>
  </action>
</reference>

Hope this helps!

Sharing is Caring

Brian is a software architect and technology leader living in Niagara Falls with 13+ years of development experience. He is passionate about automation, business process re-engineering, and building a better tomorrow.

Brian is a proud father of four: two boys, and two girls and has been happily married to Crystal for more than ten years. From time to time, Brian may post about his faith, his family, and definitely about technology.