Home > Shopify Development > How to insert some code to your theme's JavaScript file

How to insert some code to your theme's JavaScript file in Shopify

Sam Nguyen
Sam Updated: April 22, 2024

Share:

Drive 20-40% of your revenue with Avada
avada email marketing

Developed by Netscape, JavaScript is a mean of web languages to display dynamic and interactive content to a website. While the syntax is similar to C, JavaScript which is used by Java is based on ECMAScript. This type of programming language which provides the Shopify users the free practices space. Because of these benefit ability, this JavaScript is commonly used by millions of developers.

A JavaScript file includes the JavaScript codes which are used to execute JavaScript and plays as a source code file format in web pages. Besides, there are other functions that help the users to open and close windows, to modify form fields. Especially, the admins can rollover images and create drop-down menus. Therefore, JavaScript file usually contains all the HTML from head and body parts.

Table of Content

About JavaScript files

JavaScript file is referenced by web pages, which allows different pages to reference the code in the one external file. The multiple pages, as well as multiple stores, can have the external links when opening the multiple-purpose stores. In addition, this JavaScript file can add some codes into their themes. In the new browser tab, the causes external links on your online store. Therefore, it helps the Shopify store owners to stop customers from navigating away from their websites online store. The external links as well as URLs, it allows the customers to switch directly to different websites or in social media.

In this guiding article How to insert some code to your theme’s JavaScript file in Shopify, we hope that the simple procedure can be easily approached by the users.

How to insert some code to your theme’s JavaScript file in Shopify

Step 1: Go to Themes

After entering the Shopify app, on the admin’s dashboard, the store owners firstly click to Online Store and Themes.

Step 2: Edit code

In this step, the users need to choose the theme they want to edit, after that, tap Actions and ` Edit code`.

how to insert code to theme javascript file in shopify

Step 3: Click the theme

In the Assets section, the admins can click to choose one of these options following:

theme.js theme.js.liquid custom.js

how to insert code to theme javascript file in shopify

Step 4: Paste the code

In addition, in this step, the user can copy and paste following code at the bottom of the file:

var links = document.links;
for (let i = 0, linksLength = links.length ; i < linksLength ; i++) {
  if (links[i].hostname !== window.location.hostname) {
      links[i].target = '_blank';
  }
}

Step 5: Click Save

Click Save.

Conclusion

For the website developers, the JavaScript is so important for them to contribute their success. In addition, the Shopify store owners are easy to build their additional functionalities by inserting codes into their theme settings. Moreover, it helps online sellers to display beautiful and attractive content. This article How to insert some code to your theme’s JavaScript file in Shopify includes all the basic steps to add the other codes to their stores. To better understanding of Liquid, online merchants in Shopify can read these following articles such as:


Sam Nguyen is the CEO and founder of Avada Commerce, an e-commerce solution provider headquartered in Singapore. He is an expert on the Shopify e-commerce platform for online stores and retail point-of-sale systems. Sam loves talking about e-commerce and he aims to help over a million online businesses grow and thrive.

Stay in the know

Get special offers on the latest news from AVADA.