How to Add Javascript And CSS To Home Page or specific CMS page in Magento .?

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

Magento is a complete package and allows custom changes to its layout with easy addition of custom CSS and JS files respectively. Even if you want to add specific Custom CSS and JS to any particular CMS page then you can use these steps to change the design. Here are the steps by which you can add custom CSS or JS to any Magento CMS page or Homepage to override from the default one.

---

Steps for adding Custom CSS or JS in Magento

• Step 1. Login to your store back end/admin panel with suitable credentials
• Step 2. Navigate to the CMS > Pages and click on the page for which you want to add the Custom Javascript or Style CSS for making specific changes.
• 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.

---

Magento Add Custom CSS:

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

OR

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

OR

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

---

Magento Add Custom JavaScript:

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

OR

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

OR

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

---