{"id":1112,"date":"2020-07-11T05:07:00","date_gmt":"2020-07-11T05:07:00","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/2020\/07\/11\/add-external-css-and-js-in-magento-2\/"},"modified":"2025-06-16T14:33:51","modified_gmt":"2025-06-16T09:03:51","slug":"add-external-css-and-js-in-magento-2","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/add-external-css-and-js-in-magento-2\/","title":{"rendered":"How to Add External CSS and JS in Magento 2"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The default Magento 2 store serves the purpose of an online store pretty well.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">But, no business in today\u2019s market can strive only with the default features and layout.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Each business is different and demands unique features and design.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Design is important in an online store to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Make it easy for the visitors to navigate through the store<\/li>\n\n\n\n<li>Establish credibility<\/li>\n\n\n\n<li>Quick checkout<\/li>\n\n\n\n<li>Stand apart from the competition<\/li>\n\n\n\n<li>Boost the on-page SEO efforts<\/li>\n\n\n\n<li>Responsible for mobile responsiveness<\/li>\n\n\n\n<li>Plays a role in brand awareness and a good first impression<\/li>\n\n\n\n<li>Affects the bounce rate.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">However, if you are using default Magento 2 theme or in that case, any third party theme for your store and need to tweak the design as per your business requirement, you need to include external <a href=\"https:\/\/meetanshi.com\/blog\/add-custom-css-and-js-in-magento\/\" data-type=\"link\" data-id=\"https:\/\/meetanshi.com\/blog\/add-custom-css-and-js-in-magento\/\">CSS in Magento 2<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Also, if you want to implement jQuery for custom actions, this post will be helpful. For example, you want to perform a certain action on the click of a button, you need to include external JS In Magento 2.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example, on the click of a button, a popup form is displayed or a filled up form is submitted.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">All these customizations in design and features can be possible with the programmatic method to&nbsp;<em><strong>add external CSS and JS in Magento 2<\/strong><\/em>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can also add <a href=\"https:\/\/meetanshi.com\/blog\/add-css-javascript-files-to-cms-pages-in-magento-2\/\" data-type=\"link\" data-id=\"https:\/\/meetanshi.com\/blog\/add-css-javascript-files-to-cms-pages-in-magento-2\/\">CSS &amp; JavaScript files to CMS pages<\/a> in Magento 2. Adding CSS &amp; JavaScript files to Magento 2 CMS pages allows optimizing the speed performance.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Method to add external CSS and JS in Magento 2:<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In your&nbsp;<em><strong>layout file<\/strong><\/em>&nbsp;you need to add the code below:<\/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;script src=\"https:\/\/js.stripe.com\/v3\/\" src_type=\"url\"\/>\n        &lt;css src=\"https:\/\/meetanshi.com\/custom.css\" src_type=\"url\"\/>\n    &lt;\/head>\n&lt;\/page><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">That\u2019s it and now you are all set to improve the layout of your store!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Do share the post 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>The default Magento 2 store serves the purpose of an online store pretty well. But, no business in today\u2019s market can strive only with the default features and layout. Each business is different and demands unique features and design. Design is important in an online store to: However, if you are using default Magento 2 [&hellip;]<\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34],"tags":[],"class_list":["post-1112","post","type-post","status-publish","format-standard","hentry","category-magento"],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1112","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\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=1112"}],"version-history":[{"count":5,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1112\/revisions"}],"predecessor-version":[{"id":16896,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1112\/revisions\/16896"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=1112"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=1112"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=1112"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}