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 folder1 2 3 4 5 6 7 | <default> <reference name="head"> <action method="addCss"> <stylesheet>css/custom.css</stylesheet> </action> </reference> </default> |
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> |
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 folder1 2 3 4 5 | <reference name="head"> <action method="addCss"> <stylesheet>css/custom.css</stylesheet> </action> </reference> |
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> |
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 folder1 2 3 4 5 | <reference name="head"> <action method="addCss"> <stylesheet>css/custom.css</stylesheet> </action> </reference> |
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> |
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 folder1 2 3 4 5 | <reference name="head"> <action method="addCss"> <stylesheet>css/custom.css</stylesheet> </action> </reference> |
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> |
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