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.
You can also add CSS & JavaScript files to CMS pages in Magento 2. Adding CSS & JavaScript files to Magento 2 CMS pages allows optimizing the speed performance.
Method to add external CSS and JS in Magento 2:
In your layout file you need to add the code below:
<?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!
Do share the post with fellow Magento developers via social media.
Thank you.
