Created
October 19, 2015 17:29
-
-
Save ryarwood/85e63084f64c6ae86933 to your computer and use it in GitHub Desktop.
Add CSS & JS to Magento XML Field
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- 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> | |
<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 | |
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 | |
--> | |
<reference name="head"> | |
<action method="addCss"> | |
<stylesheet>css/custom.css</stylesheet> | |
</action> | |
</reference> | |
<!-- To add a Javascript file residing in the skin JS folder --> | |
<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 --> | |
<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 | |
--> | |
<reference name="head"> | |
<action method="addCss"> | |
<stylesheet>css/custom.css</stylesheet> | |
</action> | |
</reference> | |
<!-- To add a Javascript file residing in the skin JS folder --> | |
<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 --> | |
<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 | |
--> | |
<reference name="head"> | |
<action method="addCss"> | |
<stylesheet>css/custom.css</stylesheet> | |
</action> | |
</reference> | |
<!-- To add a Javascript file residing in the skin JS folder --> | |
<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 --> | |
<reference name="head"> | |
<action method="addJs"> | |
<script>custom.js</script> | |
</action> | |
</reference> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment