Magento 2 call js css file homepage
Today we discuss about Magento 2 call js css file homepage.This tutorial include how to add js file on homepage, How to add css file on home.There are two way to add css or js file on homepage.You can add js or css file from admin or you can add file from layout. So let’s start with our example.
Admin Panel
You can add js or css file from admin panel.
content->page -> edit page in design tab Layout Update XML
Add following code.
<css src="css/mystyle.css"/>
Layout File
Add Js
If you are adding js in your theme create cms_inde_index.xml in following path.
app/design/frontend/QaisarSatti/theme/Magento_Theme/layout/cms_inde_index.xml
myfile.js location will
app/design/frontend/QaisarSatti/theme/Magento_Theme/web/js
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head><link src="js/myfile.js"/></head>
</page>
If You want it to add from module xml then create cms_inde_index.xml in following path.
app/code/QaisarSatti/view/HelloWorld/frontend/layout/cms_inde_index.xml
myfile.js location will
app/code/QaisarSatti/view/HelloWorld/frontend/web/js
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head><link src="FME_GoogleMapsStoreLocator::js/myfile.js"/></head>
</page>
Add css
If you are adding cs in your theme create cms_inde_index.xml in following path.
app/design/frontend/QaisarSatti/theme/Magento_Theme/layout/cms_inde_index.xml
mystyle.css location will
app/design/frontend/QaisarSatti/theme/Magento_Theme/web/css
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head><link src="css/mystyle.css"/></head>
</page>
If you want it to add css from module xml then create cms_inde_index.xml in following path.
app/code/QaisarSatti/view/HelloWorld/frontend/layout/cms_inde_index.xml
mystyle.css location will
app/code/QaisarSatti/view/HelloWorld/frontend/web/css
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head><link src="FME_GoogleMapsStoreLocator::css/mystyle.css"/></head>
</page>
Qaisar Satti
Hi, I'm Qaisar Satti! I've been a developer for over 20 years, and now I love sharing what I've learned through tutorials and guides. Whether you're working with Magento, PrestaShop, or WooCommerce, my goal is to make your development journey a bit easier and more fun. When I'm not coding or writing, you can find me exploring new tech trends and hanging out with the amazing developer community. Thanks for stopping by, and happy coding!
2 thoughts on “Magento 2 call js css file homepage”
Leave a Reply
You must be logged in to post a comment.
Thanks for useful post, you should also mentioned where this js/myfile.js need to be placed in each this i.e for admin panel, for theme and for module.
Thanks.
Thanks for sharing your feedback. i added file location according to my post.