How to Add External CSS and JS in Magento 2
The default Magento 2 store serves the purpose of an online store pretty well.
But, no business in today’s 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:
- Make it easy for the visitors to navigate through the store
- Establish credibility
- Quick checkout
- Stand apart from the competition
- Boost the on-page SEO efforts
- Responsible for mobile responsiveness
- Plays a role in brand awareness and a good first impression
- Affects the bounce rate.
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 CSS in Magento 2.
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.
For example, on the click of a button, a popup form is displayed or a filled up form is submitted.
All these customizations in design and features can be possible with the programmatic method to add external CSS and JS in Magento 2.
Method to add external CSS and JS in Magento 2:
In your layout file you need to add the code below:
1 2 3 4 5 6 7 |
<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <head> <script src="https://js.stripe.com/v3/" src_type="url"/> <css src="https://meetanshi.com/custom.css" src_type="url"/> </head> </page> |
That’s it and now you are all set to improve the layout of your store!
Any doubts can be mentioned in the Comments section below and I’ll help you out.
Do share the post with fellow Magento developers via social media.
Thank you.
Also Read:
Jignesh Parmar
An expert in his field, Jignesh is the team leader at Meetanshi and a certified Magento developer. His passion for Magento has inspired others in the team too. Apart from work, he is a cricket lover.
Prev
How to Change PDF Invoice Logo in Magento 2
How to Disable Magento 2 Content Security Policy
Next