Open all external links in a new tab/window

Open all external links in a new tab/window

Every website has a link to external content. There are many different pages/sites that you can link to and normally you will link to your social media accounts at a minimum. External links are a great way to provide additional information about your products/brand but each external link means users will navigate away from site and they may not be able to find their way back to you. If a user clicks on your facebook page link, they will see your page but also all their facebook notifications. It is very easy to get distracted, start messaging people or checking your timeline and then forget what you were looking for in the first place. 


The standard solution for this is to open links in a new window/tab. Thus means that your site will still be in the background and, using the example above, your page will appear when they close the facebook tab. It is quite simple to have a link open in a new tab by adding a small piece of html code to each link. Normally this is done for you using a checkbox in the editor or a setting on the theme. But what happens if you forget to do this? You could potentially be loosing business.   


A couple of lines of extra lines of JavaScript added to your theme files will check and make sure that all external links open in a new tab/window. 


IMPORTANT: This involves editing the theme files for your site. Knowledge of web design languages such as HTML, CSS, Javascript and Liquid is recommended. If you are not comfortable editing the themes files we can do this for you. Just use the Contact Us page or Live Chat.

  1. From your Shopify admin, click Online Store, then click Themes :
    Click Online Store then Themes
  2. Find the theme you want to edit, click the ... button, then click Edit HTML/CSS:
    Click Edit HTML CSS button
  3. Create a new asset (if it doesn't already exist) called expertshopify.js.
    • In the left-hand side pane, scroll down and left-click Assets. Then, scroll further and click on the add a new asset button:
    • Name your asset “expertshopify.js”.
    • Click on expertshopify.js to open the asset in the online code editor.
    • Copy the content of this bitbucket file  into your asset, and click save.
  4. Include your asset in theme.liquid
    • Still on the Edit HTML/CSS page in your shop admin, click on theme.liquid under Layouts to open the layout in the online code editor. Scroll t the bottom of the file and just above the </body> tag add the following code:
             <script src="{{ 'expertshopify.js' | asset_url }}"></script>
    • Click Save.