{"id":884,"date":"2020-03-14T08:53:38","date_gmt":"2020-03-14T08:53:38","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/2020\/03\/14\/add-css-javascript-files-to-cms-pages-in-magento-2\/"},"modified":"2025-05-22T14:44:52","modified_gmt":"2025-05-22T09:14:52","slug":"add-css-javascript-files-to-cms-pages-in-magento-2","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/add-css-javascript-files-to-cms-pages-in-magento-2\/","title":{"rendered":"How To Add CSS &#038; Javascript Files To CMS Pages In Magento 2"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Magento 2 is a flexible E-commerce platform with the potential to customize the features for a feasible performance. One of the examples to do so is to&nbsp;<em><strong>add CSS &amp; Javascript files to CMS pages in Magento 2<\/strong><\/em>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Adding CSS &amp; Javascript files to Magento 2 CMS pages allows optimizing the speed performance. For example, you want to implement a feature on a single CMS page, you can do so using the below code.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It is recommended to add the relevant JS and CSS files to the specific CMS pages only. For example, you want to implement a popup on one page and add slider on any other page, say, homepage, etc.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Such particular features to be implemented on not all but specific pages require applying custom CSS and Javascript files to Magento 2 CMS pages.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">And here\u2019s the easy method to do so:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Steps to add CSS &amp; Javascript files to CMS pages in Magento 2:<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Add the following code to&nbsp;<strong>Admin &gt; Content &gt; Elements &gt; Pages &gt; CMS Page &gt; Design &gt; Layout Update XML<\/strong><\/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;head>\n&lt;css src=\"Vendor_Extension::css\/custom.css\"\/>\n&lt;script src=\"Vendor_Extension::js\/custom.js\"\/>\n&lt;\/head><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">That\u2019s it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Also, I\u2019d be grateful if you can help spread the solution among the Magento community via social media.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Thank you.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Also Read:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/meetanshi.com\/blog\/enable-merge-css-javascript-in-magento-2\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Enable Merge CSS, Javascript in Magento 2<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Magento 2 is a flexible E-commerce platform with the potential to customize the features for a feasible performance. One of the examples to do so&#8230;<\/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-884","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/884","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=884"}],"version-history":[{"count":2,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/884\/revisions"}],"predecessor-version":[{"id":15031,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/884\/revisions\/15031"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=884"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=884"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=884"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}