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
<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
<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
<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
<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.
To add a CSS file residing in the skin CSS folder
In the area labelled ‘Layout Update XML’, add the following:
<reference name="head">
<action method="addCss">
<stylesheet>css/custom.css</stylesheet>
</action>
</reference>
To add a Javascript file residing in the skin JS folder
<default>
<reference name="head">
<action method="addItem">
<type>skin_js</type>
<name>js/custom.js</name>
<params/
</action>
</reference>
</default>0
To add a Javascript file residing in the{magentoroot}/js folder
<default>
<reference name="head">
<action method="addItem">
<type>skin_js</type>
<name>js/custom.js</name>
<params/
</action>
</reference>
</default>1
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
<reference name="head">
<action method="addJs">
<stylesheet>css/custom.css</stylesheet>
</action>
</reference>
To add a Javascript file residing in the skin JS folder
<default>
<reference name="head">
<action method="addItem">
<type>skin_js</type>
<name>js/custom.js</name>
<params/
</action>
</reference>
</default>0
To add a Javascript file residing in the{magentoroot}/js folder
<default>
<reference name="head">
<action method="addItem">
<type>skin_js</type>
<name>js/custom.js</name>
<params/
</action>
</reference>
</default>1
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
<reference name="head">
<action method="addJs">
<stylesheet>css/custom.css</stylesheet>
</action>
</reference>
To add a Javascript file residing in the skin JS folder
<default>
<reference name="head">
<action method="addItem">
<type>skin_js</type>
<name>js/custom.js</name>
<params/
</action>
</reference>
</default>0
To add a Javascript file residing in the{magentoroot}/js folder
<default>
<reference name="head">
<action method="addItem">
<type>skin_js</type>
<name>js/custom.js</name>
<params/
</action>
</reference>
</default>1