Knowledge Base

Search

  • Video block
  • Video Tutorials

  • Watch our easy-to-follow video tutorials for quick tips on designing and managing your store.
  • View Video Tutorials

How to Add Custom JavaScript

Magento Go was designed to be powerful and flexible — a platform for eCommerce that can be dynamic and powerful enough for both merchants and developers.

Your web store layout, design, and functionality can be customized using our themes tools and content features. One popular tool in web development is the JavaScript programming language. JavaScript enables you to add client-side functionality — or in other words, code that runs in the user’s browser.

There are really two main ways to add custom JavaScript to your web store, and which you use depends on what you will do.

Method 1: If you want to implement custom code (a .js file), hosted scripts or JavaScript libraries (such as TypeKit, JQuery, or MooTools), the simplest way is to use the Java Script Editor in the Theme Customization section.

Method 2: If you want to add hosted scripts or invoke custom snippets of code, you can add the code to a Static Block and include it in any or all pages using Frontend Apps.

Method 1: Custom Code

  • Design > Themes Editor > Java Script Editor
  1. From the Admin panel, go to Design > Themes Editor.
  2. Click Customize under the theme you wish to add custom script to.
  3. Click Java Script Editor in the left panel to manage JavaScript assets.
  4. Click Browse Files, select the JavaScript file from your local drive, and then click Upload Files. Once the file is uploaded, the JavaScript should be available on all pages.

    NOTE If you are uploading multiple JavaScript files, first add them all one by one, then upload them all at once — you don’t have to upload them separately.

  5. A common problem people run into with JavaScript files not working has to do with the order of their execution. If you have multiple JavaScript files uploaded to your theme, be sure to sort them in the right order. You can move these orders around using drag and drop — simply click the files and drag them above and below other files.
  6. Click Save to save these changes.

Method 2: Hosted Scripts and Code Snippets

  • CMS > Static Blocks
  • CMS > Frontend Apps

To add code snippets or link to hosted scripts, you need to include the code in a new static block, and add it to your web store using a Frontend App.

First, be sure to get a thorough understanding of how to insert Static Blocks into your web store by reading How to Place a Static Block Using Frontend Apps.

  1. From the Admin panel, go to CMS > Static Blocks and click Add New Block.
  2. Fill in all the required fields. In the Content field, however, make sure to first click Show/Hide Editor. Then paste in your code snippet or script link. Click Save.
  3. Next, create a new Frontend App from CMS > Frontend Apps.
  4. Select CMS Static Block for type. Click Continue.
  5. Define a title for the block in Frontend App Instance Title.
  6. Click Add Layout Update in the Layout Updates panel.
  7. In Display On, select which pages to apply this static block to. If you wish to apply it across your entire web store, select All Pages.
  8. In the Block Reference field, select Page Footer.
  9. Click Frontend App Options from the left menu. From this panel, specify the static block that will be included — this is where you specify the static block that you inserted the code snippet into.
  10. Click Save to save these changes.
  11. Once you’ve created a static block with the javascript code (or script source link) as well as the frontend app that references this static block that will be applied to your pages, your script should be running immediately.

    How to Verify That It Works

    To verify that the JavaScript added using the Java Script Editor works, go to any page in your web store, right click within the page and select View Page Source (or a similar variation depending on your browser).  From within the page source view, click CTRL + F to bring up the find tool. Search for the file name of the JavaScript that you added. If it is included in your page source, then it’s running.

    To verify that the code snippet or script source link that you added with Frontend Apps, go to any page in your web store, or the specific type of page, if you specified one, right click and select View Page Source. Pull up the find tool and search for any line of code from the code snippet (preferably a unique line to avoid having to comb through other code to find it). If you find the code in the page, then it’s running.