Open external links in a new browser tab or window

According to most usability experts, opening links in a new browser tab is considered bad practice. If you still want to open external links in a new window, follow the instructions in this tutorial.

The steps for this tutorial differ depending on whether you are using a sectioned or a non-sectioned theme. To figure out whether your theme supports sections, go to the theme's Edit HTML/CSS page. If there are files in the Sections directory, you are using a sectioned theme. Non-sectioned themes were released before October 2016, and do not have files in the Sections directory.

If you are using a sectioned theme, then click the Sectioned themes button and follow the instructions. If you are using non-sectioned theme, then click the Non-sectioned themes button and follow the instructions.

For Sectioned Themes:

  1. Find the theme you want to edit, click Actions, and then click Edit HTML/CSS.

  2. In the Assets folder, click theme.js or theme.js.liquid file to open it.

  3. Paste the following code at the bottom of the file:

    
    $(document).ready( function() {
    jQuery('a[href^="http"]').not('a[href^="'+$(location).attr('hostname')+'"]').attr('target', '_blank');
    });
    
    
  4. Click Save.

For Non-Sectioned Themes:

  1. Find the theme you want to edit, click Actions, and then click Edit HTML/CSS.

  2. In the Layout folder, click the theme.liquid file to open it.

  3. Locate the closing body tag </body>, which should be near the bottom of the file.

  4. Paste the following code above the closing body tag:

    
    <script>
      jQuery('a[href^="http"]').not('a[href^="{{ shop.url }}"]').attr('target', '_blank');
    </script>
    
    
    Add before closing body tag
  5. Click Save.

Want to discuss this page?

Visit the Shopify Community