🔥 Just Launched! Werra Premium Template for HyväSee it in Action

How To Add Custom CSS and JS in Magento

By Sanjay JethvaUpdated on May 22, 2025 1 min read

Earlier, I posted a solution to add custom CSS and JS in Magento 2.

The below post offers the same solution for Magento 1 store owners.

One can use the below code to add custom CSS and JS in Magento store in order to customize a custom theme or a page.

I’d recommend bookmarking this post for the next time you face a crazy client requirement! 

Method to add custom CSS and JS in Magento:

Create app/design/frontend/base/default/layout/extension.xml:

<?xml version="1.0"?>
<layout version="0.1.0">
    <default>
        <reference name="head">
            <action  method="addItem">
                <type>js</type>
                <name>extension.js</name>
            </action>
            <action method="addItem">
                <type>skin_css</type>
                <name>extension.css</name>
            </action>
        </reference>
    </default>
</layout>

That’s it.

Feel free to share the solution with fellow Magento developers via social media.

Thank you.

Also Read:

Sanjay Jethva Full Image
Article bySanjay Jethva

Sanjay is the co-founder and CTO of Meetanshi with hands-on expertise with Magento since 2011. He specializes in complex development, integrations, extensions, and customizations. Sanjay is one the top 50 contributor to the Magento community and is recognized by Adobe. His passion for Magento 2 and Shopify solutions has made him a trusted source for businesses seeking to optimize their online stores. He loves sharing technical solutions related to Magento 2 & Shopify.