{"id":287,"date":"2019-08-24T14:28:54","date_gmt":"2019-08-24T14:28:54","guid":{"rendered":"https:\/\/www.magetrend.com\/blog\/?p=287"},"modified":"2022-05-29T08:38:41","modified_gmt":"2022-05-29T08:38:41","slug":"how-to-add-custom-js-code-in-head-magento-2-beginners-guide","status":"publish","type":"post","link":"https:\/\/www.magetrend.com\/blog\/how-to-add-custom-js-code-in-head-magento-2-beginners-guide\/","title":{"rendered":"How to add custom js code in head – Magento 2 beginners guide"},"content":{"rendered":"\n

There are several different ways how to include custom javascript code into a head part of your page. But in this article I would like to cover the easiest one – the way which lets us to make it via Magento 2 admin side and doesn’t require programming skills or additional access. This method can be used to integrate 3rd party services, such as live support chat, some monitoring tool and etc.<\/p>\n\n\n

<\/a>
The Most Popular PDF Designer for Magento 2<\/a><\/div>
with user-friendly PDF editor to build your own PDF look<\/a><\/div>
Read More<\/a> <\/div> <\/div>\n\n\n\n

Bellow is the path of Magento 2 admin panel, where you can add your code snippet:<\/p>\n\n\n

Content > Design > Configuration > Edit > HTML Head > Scripts and Style Sheets<\/span><\/div>\n\n\n\n

Step by step guide for beginners<\/h2>\n\n\n\n

It seems simple, but for those, who aren’t very familiar with Magento, might cause some questions. So here is the completely, step by step, guide how to add your code snippet<\/p>\n\n\n\n

1. The first thing what we have to do is to go to admin panel and login. Usually Magento admin is hidden under \/admin.<\/p>\n\n\n\n

https:\/\/www.example.com\/admin<\/span><\/p>\n\n\n\n

2. Then, in Magento menu, navigate to:<\/p>\n\n\n

Content > Design > Configuration<\/span><\/div>\n\n\n\n

3. Click “Edit<\/strong>” link on store view. Usually it will be the last one if your Magento has only one store view. If there are more, chose a website on which you need to include your script.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

4. Then click on the “HTML Head<\/strong>” tab.<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

5. Enter your code to ” Scripts and Style Sheets”<\/strong> field and click on “Save Configuration” button<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

If there are some other code already, your code should go after all other code.<\/p>\n\n\n\n

Troubleshooting<\/h2>\n\n\n\n

A Code was added but no changes in store<\/h3>\n\n\n\n