If you’re creating a custom Magento theme, you’re probably going to want to include some custom CSS or Javascript files. This simple task can, however, be quite a convoluted headache. So here’s a summary of all you need to know:

Ideally, you should have a local.xml file setup in yourtheme/layout folder. If you haven’t managed this step, have a Google. I’ll probably get a local.xml guide up soon.

Skip to:

Adding CSS or Javascript files to All pages

Adding CSS or Javascript files to all CMS pages

Adding CSS or Javascript files to all Category pages

Adding CSS or Javascript files to all Product pages

Adding CSS or Javascript files to specific CMS pages

Adding CSS or Javascript files to specific Category pages

Adding CSS or Javascript files to specific Product pages

Adding CSS or Javascript files to All pages

In your local.xml file, add the following below the opening layout tag:

To add a CSS file residing in the skin CSS folder
1
2
3
4
5
6
7
<default>
   <reference name="head">
      <action method="addCss">
         <stylesheet>css/custom.css</stylesheet>
      </action>
   </reference>
</default>
To add a Javascript file residing in the skin JS folder
1
2
3
4
5
6
7
8
9
<default>
   <reference name="head">
      <action method="addItem">
         <type>skin_js</type>
         <name>js/custom.js</name>
         <params/>
      </action>
   </reference>
</default>
To add a Javascript file residing in the {magentoroot}/js folder
1
2
3
4
5
6
7
<default>
   <reference name="head">
      <action method="addJs">
         <script>custom.js</script>
      </action>
   </reference>
</default>

Adding CSS or Javascript files to all CMS pages

See ‘Adding CSS or Javascript files to all pages’, but change the <default> tag to: <cms_page>

Adding CSS or Javascript files to all Category pages

See ‘Adding CSS or Javascript files to all pages’, but change the <default> tag to: <catalog_category_view>

Adding CSS or Javascript files to all Product pages

See ‘Adding CSS or Javascript files to all pages’, but change the <default> tag to: <catalog_product_view>

Adding CSS or Javascript files to specific CMS pages

In Magento admin, navigate to CMS > Pages and select your desired CMS page to add CSS or Javascript to. Select the design tab on the left.

In the area labelled ‘Layout Update XML’, add the following:

To add a CSS file residing in the skin CSS folder
1
2
3
4
5
<reference name="head">
   <action method="addCss">
      <stylesheet>css/custom.css</stylesheet>
   </action>
</reference>
To add a Javascript file residing in the skin JS folder
1
2
3
4
5
6
7
<reference name="head">
   <action method="addItem">
      <type>skin_js</type>
      <name>js/custom.js</name>
      <params/>
   </action>
</reference>
To add a Javascript file residing in the {magentoroot}/js folder
1
2
3
4
5
<reference name="head">
   <action method="addJs">
      <script>custom.js</script>
   </action>
</reference>

Adding CSS or Javascript files to specific Category pages

In Magento admin, navigate to Catalog > Manage Categories and select your desired category to add CSS or Javascript to.

Click the ‘Custom Design’ tab on the left, and in the area labelled ‘Custom Layout Update’, add the following:

To add a CSS file residing in the skin CSS folder
1
2
3
4
5
<reference name="head">
   <action method="addCss">
      <stylesheet>css/custom.css</stylesheet>
   </action>
</reference>
To add a Javascript file residing in the skin JS folder
1
2
3
4
5
6
7
<reference name="head">
   <action method="addItem">
      <type>skin_js</type>
      <name>js/custom.js</name>
      <params/>
   </action>
</reference>
To add a Javascript file residing in the {magentoroot}/js folder
1
2
3
4
5
<reference name="head">
   <action method="addJs">
      <script>custom.js</script>
   </action>
</reference>

Adding CSS or Javascript files to specific Product pages

In Magento admin, navigate to Catalog > Manage Products and select your desired product to add CSS or Javascript to.

Click the ‘Design’ tab on the left and in the area labelled ‘Custom Layout Update’, add the following:

To add a CSS file residing in the skin CSS folder
1
2
3
4
5
<reference name="head">
   <action method="addCss">
      <stylesheet>css/custom.css</stylesheet>
   </action>
</reference>
To add a Javascript file residing in the skin JS folder
1
2
3
4
5
6
7
<reference name="head">
   <action method="addItem">
      <type>skin_js</type>
      <name>js/custom.js</name>
      <params/>
   </action>
</reference>
To add a Javascript file residing in the {magentoroot}/js folder
1
2
3
4
5
<reference name="head">
   <action method="addJs">
      <script>custom.js</script>
   </action>
</reference>

“Expert in all things Magento, Shopify and Ecommerce."

Get In Touch
Rowan Burges
Visit me on Linkedin linkedin