Add Different Javascript and CSS to Home Page or specific CMS page in Magento

By Expertwebadvisor | Last Updated: October 9, 2015 | In: Magento

Magento CMS page is used to create the static pages in Magento, suppose you want to create the About Us, Terms and Condition page for your store then you can create the Page by using the Magento CMS Page functionality. Magento CMS page allows us to choose the different page layout like 1 Column, 2 Column Left, 3 Columns etc., and you can also update the Custom Layout handler from there as well. Some times if you want to add any JavaScript or CSS files only for any specific CMS page, then you can add by using the Magento CMS page, here in this post I am describing how to do it, it is very simple and you can do it just by the steps given below:

Add Different Javascript and CSS to Home Page or specific CMS page in Magento

Step 1. Login to your store back end/admin panel.
Step 2. Navigate to the CMS > Pages and click on the page for which you want to add the Custom Javascript and Style CSS.
Step 3. Now Click on the Design Tab From the Left Side bar.
Step 4. Select your Page Layout from the drop down.
Step 5. In the Field “Layout Update XML” Put the code below as per your requirement and change the file name with your actual file name.

Adding Custom CSS:

<reference name="head">
  <action method="addItem">
    <type>skin_css</type><script>Your_CSS_File_Name.css</script>
  </action>
</reference>

<reference name="head">
  <action method="addCss">
    <type>skin_css</type>
    <stylesheet>Your_CSS_File_Name.css</stylesheet>
  </action>
</reference>

<reference name="head">
	<action method="addCss">
		<stylesheet>Your_CSS_File_Path/Your_CSS_File_Name.css</stylesheet>
	</action>
</reference>

Adding Custom JavaScript:

<reference name="head">
  <action method="addItem">
    <type>skin_js</type><script>Your_JavaScript_File_Name.js</script>
  </action>
</reference>

<reference name="head">
  <action method="addJs">
    <type>skin_js</type>
    <script>Your_JavaScript_File_Name.js</script>
  </action>
</reference>

<reference name="head">
	<action method="addJs">
		<script>Your_JavaScript_File_Path/Your_JavaScript_File_Name.js</script>
	</action>
</reference>

Hope it helps and you enjoyed reading, if you need the professional Magento Development we can help you, just Click on the Link and send me your requirements.

Please Like the Post on Facebook or Google+.