How To Add Custom CSS and JS in Magento 2

Magento 2 CMS allows the store owners to customize the core features in order to improve the store functionality as well as the customer experience.

Also, the custom themes are available for Magento 2 that adds attractive layouts and features in the default store, making it suitable for an online shop in today’s competitive market.

However, the unique business requirements may demand the developer to make customization in even a custom theme or simply customize a page.

In such cases, the below code to add custom CSS and JS in Magento 2 store can be helpful:

Method to add custom CSS and JS in Magento 2:

Create extension.css file and extension.js  at app/code/Vendor/Extension/view/frontend(for admin adminhtml)/web/css/filename.css

Create default.xml file at app/code/Vendor/Extension/view/frontend/layout/ and in layout file, write the below code:

That’s it.

Note: There is an option to include CSS in template files, but it is recommended to avoid this practice as per the official Magento 2 DevDocs.

Any doubts? Mention them in the Comments section below and I’d be happy to help.

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

Thank you.

(based on 24 Reviews)
How To Add Custom CSS and JS in Magento 2Author Magento Badge

Sanjay Jethva

Sanjay is a co-founder at Meetanshi. He is a Certified Magento Developer who loves creating Magento E-commerce solutions. Owing to his contributions in Magento Forums and posting solutions, he is among the top 50 contributors of the Magento community in 2019. When he is not engrossed with anything related to Magento, he loves to play cricket.

Leave a Reply

Your email address will not be published.