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!

Author: Brian Cline

Brian is a programmer living in Niagara Falls with ten years of development experience. He is passionate about automation, business process re-engineering, and gamification. For the last six years or so, he has been working with Salesforce and JavaScript.

Related Posts

Sharing is Caring