Magento

How to Include Custom CSS and JS files On to All Product Pages in Magento?

Hello friends today I write an article on How to include Custom CSS and JS file on All Product Pages in Magento?

In magento it’s very easy to add our custom CSS and JS file. You didn’t add the tag for CSS and JS file to add in all pages rather than you have to just add that thing in your .xml file as I show below.

Step 1 : First find that  in your custom theme’s layout folder the local.xml file exists or not. If local.xml file is not created in your custom theme layout folder then just create as below.

<?xml version="1.0"?>
<layout>
</layout>

Step 2 : Now you created local.xml file and we add the CSS file from the skin CSS folder.

<?xml version="1.0"?>
<layout>
     <catalog_product_view>
          // this is a reference so it will add this in header part.
           <action method="addCss">// this is action for add css file
                 <stylesheet>
                           css/custom.css /*This is ur css path*/
                 </stylesheet>
              </action>
         </reference>
     </catalog_product_view>
</layout>

Now we try to add JavaScript file from the skin JS folder.

<?xml version="1.0"?>
<layout>
     <catalog_product_view>
         <reference name="head">
             <action method="addItem">
                   <type>skin_js</type>
                   <name>js/customJs.js</name>
              </action>
         </reference>
     </catalog_product_view>
</layout>

Now we try to add JavaScript file from the /js folder.

<?xml version="1.0"?>
<layout>
     <catalog_product_view>
         <reference name="head">
             <action method="addJs">
                   <script>myJs.js</script>
              </action>
         </reference>
     </catalog_product_view>
</layout>

Thanks for view this article.

Advertisements

Leave your comments

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s