How to add External CSS and JS in Magento 2

November 26, 2020

June 19, 2025

In the fast-paced world of eCommerce, creating a visually appealing and functionally robust store is paramount to staying competitive. Magento 2, being a highly flexible platform, offers countless customization options to help you achieve exactly that. One of the most effective ways to enhance the design and functionality of your Magento 2 store is by learning how to add External CSS and JS in Magento 2. By integrating these external resources, you can dramatically improve your site’s appearance and interactivity without altering the core code. This means a faster, more seamless user experience and the ability to easily incorporate advanced features such as animations, sliders, or dynamic forms.

An online store serves as a comprehensive gateway to everything you could possibly need within the Magento ecosystem. The default Magento 2 store is exceptionally functional, fulfilling its intended purpose with remarkable efficiency. Its utility leaves no room for user dissatisfaction, standing as a vast repository of indispensable resources.

However, identical features and layouts cannot cater to the diverse needs of every business. Crafting a distinct identity in your work is essential to stand out.

Everyone seeks variation in how their products are presented, along with a refreshed appearance and enhanced user experience in the versions they utilize.

Reasons for a great design are as follows

Easy navigation through the store
Establish credibility
Saves time during checkout
Unique features
Increase on-page SEO efforts
Responsible for mobile responsiveness
Affects the bounce rate.

Incorporating External CSS into your Magento 2 theme is essential when utilizing a third-party theme. It allows you to craft a bespoke and visually captivating design tailored to delight your clients.

Additionally, if you plan to use jQuery for specific custom actions, these steps will prove invaluable. For instance, if you intend to implement onclick events, adding external JavaScript in Magento 2 is essential.

For instance, upon clicking a button, a popup form should appear, or a completed form should be submitted seamlessly.

To incorporate these designs and features, specific programmatic code must be added, which necessitates the use of external CSS and JavaScript in Magento 2.

Step 1: Add External CSS

Locate the layout file

Go to your theme’s directory: app/design/frontend///Magento_Theme/layout/
If the directory does not exist, create it.

Modify the `default_head_blocks.xml` file

If it doesn’t exist, create the file: app/design/frontend///Magento_Theme/layout/default_head_blocks.xml

Add the following XML code to include the external CSS:

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
   <head>
        <css src="https://example.com/path/to/your-stylesheet.css>
    </head>
</page>

Replace https://example.com/path/to/your-stylesheet.css with the URL of your external CSS.

Step 2: Add External JavaScript

Locate the layout file Use

the same layout file (default_head_blocks.xml) in your theme.

Add the `script` tag for the external JavaScript

Include the following XML code:


<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd>
   <head>
        <script src="https://example.com/path/to/your-script.js>
    </head>
</page>

Replace https://example.com/path/to/your-script.js with the URL of your external JavaScript file.

Step 3: Clear Cache

After adding these files, you need to clear Magento’s cache for the changes to take effect.

Run the following commands in your terminal:

php bin/magento cache:clean php bin/magento cache:flush

Optional: Add CSS/JS Conditionally

If you want to load the CSS or JavaScript only on specific pages, you can specify the layout handle, such as catalog_category_view.xml or cms_page_view.xml.

Example:
For the home page (cms_index_index.xml):

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd>
   <head>
       <css src="https://example.com/homepage-styles.css>
       <script src="https://example.com/homepage-script.js>
    </head>
</page>

Tags: Magento 2, Magento Development, Magento Solution

Share this post:

Previous Post How to Override Extension File in Theme in Magento 2

Next Post How to Change Base URL in Magento 2: A Complete Guide