How to Add CSS &
Javascript Files to
CMS Pages in
Magento

Author: Rowan Burgess

  • 13 Feb 2021
  • 20 minutes

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 folder

<default>
<reference name="head">
<action method="addCss">
<stylesheet>css/custom.css</stylesheet>
</action>
</reference>
</default>

To add a Javascript file residing in the skin JS folder

<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

<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.

To add a CSS file residing in the skin CSS folder

In the area labelled ‘Layout Update XML’, add the following:

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

To add a Javascript file residing in the skin JS folder

<default>
<reference name="head">
<action method="addItem">
<type>skin_js</type>
<name>js/custom.js</name>
<params/
</action>
</reference>
</default>

0

To add a Javascript file residing in the{magentoroot}/js folder

<default>
<reference name="head">
<action method="addItem">
<type>skin_js</type>
<name>js/custom.js</name>
<params/
</action>
</reference>
</default>

1

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="addJs">
<stylesheet>css/custom.css</stylesheet>
</action>
</reference>

To add a Javascript file residing in the skin JS folder

<default>
<reference name="head">
<action method="addItem">
<type>skin_js</type>
<name>js/custom.js</name>
<params/
</action>
</reference>
</default>

0

To add a Javascript file residing in the{magentoroot}/js folder

<default>
<reference name="head">
<action method="addItem">
<type>skin_js</type>
<name>js/custom.js</name>
<params/
</action>
</reference>
</default>

1

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="addJs">
<stylesheet>css/custom.css</stylesheet>
</action>
</reference>

To add a Javascript file residing in the skin JS folder

<default>
<reference name="head">
<action method="addItem">
<type>skin_js</type>
<name>js/custom.js</name>
<params/
</action>
</reference>
</default>

0

To add a Javascript file residing in the{magentoroot}/js folder

<default>
<reference name="head">
<action method="addItem">
<type>skin_js</type>
<name>js/custom.js</name>
<params/
</action>
</reference>
</default>

1

Let’s talk about how
I can help you