{"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<p class=\"wp-block-paragraph\">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<p class=\"wp-block-paragraph\">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<p class=\"wp-block-paragraph\">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<p class=\"wp-block-paragraph\">In such cases, the below code to&nbsp;<em><strong>add custom CSS and JS in Magento 2<\/strong><\/em>&nbsp;store can be helpful:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Method to add custom CSS and JS in Magento 2:<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Create&nbsp;<em><strong>extension.css<\/strong><\/em>&nbsp;file and&nbsp;<em><strong>extension.js<\/strong><\/em>&nbsp;&nbsp;at app\/code\/Vendor\/Extension\/view\/frontend(for admin adminhtml)\/web\/css\/filename.css<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Create&nbsp;<em><strong>default.xml<\/strong><\/em>&nbsp;file at app\/code\/Vendor\/Extension\/view\/frontend\/layout\/ and in layout file, write the below code:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?xml version=\"1.0\"?>\n&lt;page xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\">\n    &lt;head>\n        &lt;css src=\"Vendor_Extension::css\/extension.css\"\/>\n        &lt;link src=\"Vendor_Extension::js\/extension.js\"\/>\n    &lt;\/head>\n&lt;\/page><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">That\u2019s it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Note:<\/strong>&nbsp;There is an option to include CSS in template files, but it is recommended to avoid this practice as per the&nbsp;<a href=\"https:\/\/developer.adobe.com\/commerce\/docs\/\" target=\"_blank\" rel=\"noreferrer noopener\">official Magento 2 DevDocs<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Feel free to share the solution with fellow Magento developers via social media.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Thank you.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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\u2019s competitive market. [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34],"tags":[],"class_list":["post-996","post","type-post","status-publish","format-standard","hentry","category-magento"],"_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}]}}