{"id":996,"date":"2020-05-11T08:44:37","date_gmt":"2020-05-11T08:44:37","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/2020\/05\/11\/add-custom-css-and-js-in-magento-2\/"},"modified":"2025-05-22T13:10:23","modified_gmt":"2025-05-22T07:40:23","slug":"add-custom-css-and-js-in-magento-2","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/add-custom-css-and-js-in-magento-2\/","title":{"rendered":"How To Add Custom CSS and JS in Magento 2"},"content":{"rendered":"\n

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.<\/p>\n\n\n\n

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\u2019s competitive market.<\/p>\n\n\n\n

However, the unique business requirements may demand the developer to make customization in even a custom theme or simply customize a page.<\/p>\n\n\n\n

In such cases, the below code to add custom CSS and JS in Magento 2<\/strong><\/em> store can be helpful:<\/p>\n\n\n\n

Method to add custom CSS and JS in Magento 2:<\/h2>\n\n\n\n

Create extension.css<\/strong><\/em> file and extension.js<\/strong><\/em>  at app\/code\/Vendor\/Extension\/view\/frontend(for admin adminhtml)\/web\/css\/filename.css<\/p>\n\n\n\n

Create default.xml<\/strong><\/em> file at app\/code\/Vendor\/Extension\/view\/frontend\/layout\/ and in layout file, write the below code:<\/p>\n\n\n\n

<?xml version=\"1.0\"?>\n<page xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\">\n    <head>\n        <css src=\"Vendor_Extension::css\/extension.css\"\/>\n        <link src=\"Vendor_Extension::js\/extension.js\"\/>\n    <\/head>\n<\/page><\/pre>\n\n\n\n
That\u2019s it.<\/p>\n\n\n\n
Note:<\/strong> 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<\/a>.<\/p>\n\n\n\n
Feel free to share the solution with fellow Magento developers via social media.<\/p>\n\n\n\n
Thank you.<\/p>\n","protected":false},"excerpt":{"rendered":"
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….<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-996","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/996","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=996"}],"version-history":[{"count":4,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/996\/revisions"}],"predecessor-version":[{"id":14918,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/996\/revisions\/14918"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=996"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=996"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=996"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}