{"id":1437,"date":"2020-12-02T12:45:47","date_gmt":"2020-12-02T12:45:47","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/add-custom-css-in-theme-from-admin-in-magento-2\/"},"modified":"2025-05-22T11:29:25","modified_gmt":"2025-05-22T05:59:25","slug":"add-custom-css-in-theme-from-admin-in-magento-2","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/add-custom-css-in-theme-from-admin-in-magento-2\/","title":{"rendered":"How to Add Custom CSS in Theme From Admin in Magento 2"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The post shows the stepwise method to&nbsp;add custom CSS&nbsp; in theme from admin&nbsp;in Magento 2.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">One can use this solution when a small change in the CSS file is required to be done in a live site that is in production mode.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example, a live site in production mode requires a minor change in design. However, you cannot edit the minified CSS file. The method to switch the site to developer mode, revert the minified CSS and then make the required change is too lengthy.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Instead, the below steps to add custom CSS from admin panel in the child theme you are using is the quick solution where you don\u2019t need to&nbsp;<a href=\"https:\/\/meetanshi.com\/blog\/magento-2-modes\/\" target=\"_blank\" rel=\"noreferrer noopener\">switch the Magento 2 mode<\/a>&nbsp;or revert minified CSS file!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Steps to Add Custom CSS in Theme From Admin in Magento 2:<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Login<\/strong>&nbsp;to admin panel<\/li>\n\n\n\n<li>Navigate to&nbsp;<strong>Content &gt; Design &gt; Configuration<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2020\/11\/1-1-1024x413.png\" alt=\"2020\/11\/1-1\" class=\"wp-image-11766\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Open the required theme in&nbsp;<strong>edit<\/strong>&nbsp;mode from Design Configuration grid<\/li>\n\n\n\n<li>Expand&nbsp;<strong>HTML Head<\/strong>&nbsp;section<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2020\/11\/2-1-1024x518.png\" alt=\"2020\/11\/2-1.png\" class=\"wp-image-11767\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add the custom CSS in the&nbsp;<strong>Scripts and Style Sheets<\/strong>&nbsp;field.<\/li>\n\n\n\n<li>Click the \u201c<strong>Save Configuration<\/strong>\u201d button<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">That\u2019s it to add custom CSS from admin panel in Magento 2 when you can\u2019t find the CSS file in a Magento 2 store. If you made a CSS change into the files of your theme and if you are not able to see those changes in pub\/static folder then try&nbsp;<a href=\"https:\/\/meetanshi.com\/blog\/regenerate-css-file-in-pub-static-folder-in-magento-2\/\">Magento 2 regenerate CSS file in pub\/static folder<\/a>&nbsp;and get a solution to your error.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Also, do share the tutorial 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 post shows the stepwise method to&nbsp;add custom CSS&nbsp; in theme from admin&nbsp;in Magento 2. One can use this solution when a small change in&#8230;<\/p>\n","protected":false},"author":29,"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-1437","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1437","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\/29"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=1437"}],"version-history":[{"count":3,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1437\/revisions"}],"predecessor-version":[{"id":14599,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1437\/revisions\/14599"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=1437"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=1437"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=1437"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}