How To Add CSS & Javascript Files To CMS Pages In Magento 2
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 add CSS & Javascript files to CMS pages in Magento 2.
Adding CSS & 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.
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.
Such particular features to be implemented on not all but specific pages require applying custom CSS and Javascript files to Magento 2 CMS pages.
And here’s the easy method to do so:
Steps to add CSS & Javascript files to CMS pages in Magento 2:
Add the following code to Admin > Content > Elements > Pages > CMS Page > Design > Layout Update XML
|
1 2 3 4 |
<head> <css src="Vendor_Extension::css/custom.css"/> <script src="Vendor_Extension::js/custom.js"/> </head> |
That’s it.
Any doubts on the topic? Please feel free to mention them in the COmments section below. I’d be happy to help them.
Also, I’d be grateful if you can help spread the solution among the Magento community via social media.
Thank you.
Also Read:
2 Comments
“Layout update field” is not available for recent magento versions. There is no field available to add suggested code.
How can I add it for recent versions using magento admin?
Hello Kade,
You can add your file in the media folder
then in content, you can add external CSS using that media link.
Thank You