The best Shopify apps help to insert custom Javascript, CSS or HTML code into your Shopify store
If you have a programming knowledge, it will be easy for you to add custom code to your Shopify store. But you consider yourself non-technical or don’t have a custom developer at your disposal, there are Shopify apps that insert custom code for you.
These apps help you add custom CSS, Javascript, HTML code to override the Shopify theme styles without touching any theme code.
Top Shopify apps for inserting code to your Shopify store:
1. XO Insert Code
XO Insert Code is a great solution that gives you the ability to add code to your Shop pages, and best of all – it’s FREE! You can add anything you want including scripts, styles, custom CSS, Google Analytics, Facebook Pixel, verify header tags and more.
It’s very easy to do: just turn it on and paste any code (Javascript, style CSS, custom HTML code) into the app’s form, click Save and you’re done! This app makes it easy for anyone to insert code into their header and footer.
Features
- Simple to insert code to your shop.
- Add Google Analytics, Google tag manager code.
- Add custom CSS code.
- Insert Facebook pixel code.
- Add verify meta tag code.
- Insert any code or script, including HTML, CSS, Liquid and Javascript.
- Add code to specific pages/products/collection
- Split to different services (easier to manage)
2. Add <HEAD> Code
This app allows you to put extra code into the head section of your store without any coding knowledge.
You can add anything you want that belongs in the HEAD section of a HTML page. You could add things like custom meta tags, custom styling, Javascript files or even custom made scripts.
This app won’t automatically add these, you just simply need to paste your code into the app, hit save and it will apply it to your store!
You can also add things like:
- Website verifications (Google, Yahoo, Bing,… etc)
- CSS Styling
- Javascript
- Scripts
- Custom meta tags
- Analytics
3. Code Customizer
Code Customizer is a simple and easy-to-use but very useful application for merchants. You can add scripts (Google Analytics, Facebook Pixel…), CSS styles, verify header tags and more easily in seconds. Code Customizer also allows you to add any HTML code to the pages, collections, product pages… you define. Everything becomes easier with just a few simple steps.
Code Customizer is a one-time application that costs just as much as a cup of coffee, but the benefits are huge.
Features:
- Simple to add custom code
- Add Google Analytics, Google tag manager, Facebook Pixel and many more…
- Add custom CSS code globally
- Add custom CSS for varied screen sizes (Desktop, Laptop, Mobile, Tablet…)
- Add custom JS code
- Auto-align JS code
- Add HTML everywhere (Products, Collections, Pages, Blogs, Homepage ….) by choose the special page and enter the HTML class/ID you want to append
- Auto validates your custom HTML, CSS, Javascript code by showing the error in the code editor.
4. HT Script
This app makes it very easy and simple to add any code/script to the header/footer of a Shopify theme without editing the theme code. It has 2 versions: Free and Pro.
- The free version allows adding custom CSS/JS to the header.
- The Pro version extends this feature to add custom codes both in the header and footer. Another remarkable feature is, it has the option to control the code on specific pages, which may very helpful to keep the website faster. Also, it can be used for specific themes.
Benefits:
- Change styles without editing the theme code.
- Add required code to header or footer.
- Insert Facebook pixel code
- Insert Live chat script
- Add Google Analytics code to any theme
- Insert any code or script, including HTML and Javascript
5. Custom JavaScript & jQuery
This is the tool allowing you to improve your store with different JavaScript tools. This app simplifies the use of JavaScript components and sets you free from tiresome code editing. What’s great about the app, is that you shouldn’t be really savvy on how Shopify operates or where to add the code. There is no need to modify the source code anymore. You just place it into the app and start enjoying the tweaks.
It is a handy tool both for tech-savvy users and those who do not know a thing about programming.
The app allows you to insert any type of script on your Shop page. This Shopify app can add script code to the “head” section, after the “body” section or before the “body” tag.
Next time you need to insert code like Google Analytics, custom CSS, Facebook Pixel, Meta Tag code, Javascript, etc, simply activate this app, paste the code, click “Save” and that’s it. You have successfully added the code across all the pages.
By default, the code you add will be “Active” on all the pages, but if you want, you can also select specific pages. It also allows you to “Deactivate” and “Delete” a script at any time.
Supports:
- Google Analytics code
- Google Tag Manager code
- Custom CSS code
- Facebook Pixel code
- Meta tag code
- HTML, CSS, Liquid, JQuery and Javascript
- Code to particular pages/products/collection
- Split code to various services to manage them better
This application is very simple to use. You just need to turn it on and paste the code you want to your Shopify page. And that’s it. This allows editing the storefront by including some changes through coding. It is open-source software.
It comes to be the perfect app for those with some coding skills. Do you have Javascript coding knowledge? Although it looks basic, with the application, you can easily tweak your site. Other than that, you can also insert a wide range of plugins.
Even though it is a coding app, it doesn’t take too much time to learn the ropes of it. If you want to add Google Analytics to your Shopify page, do it by adding code in Scripts in the Header field. This way, you will keep track of your visitors much better.
Insert code before the body closes. head can be also modified. Both the body and the head are edited separately.
To add more codes, a new window opens showing editing options. There, you will see the pages you have added and the option to change and delete them. If you don’t want a code to operate for a specific period, disable it. Some of the apps and codes you can use with the app are Facebook Pixel, Google Tag Manager and StatCounter.
Besides that, you can also use Google Adsense with this app, you have to follow the same steps and paste the Google Adsense code in the Header field.
It also works with the body tag. The application has top-notch customer support that responds quickly in case of queries.
Likewise, Insert code Header & Footer is a great tool for personalizing your store being that you don’t need to make forced changes in the store theme.
8. Add <BODY> Code
Add Body Code allows you to insert code immediately after the opening body tag and immediately before the closing body tag without needing to modify your theme.
You can add pretty much anything you want such as custom scripts, Javascript files, hidden content, site verifications that doesn’t belong in the head section and more.
You can add code to the following sections:
- Products
- Collections (also ability to apply to all products within a collection)
- Pages
- Blogs
- Blog articles
- Homepage
- Site wide
- Cart page
