How to Make a link Open in a New tab

In this post, I'll give a fairly detailed tutorial and explanation for how to modify a Shopify theme section to modify a link to open in the same or a new tab. This is useful when you're linking offsite and the user will likely want to return. A standard use case for this would be a press page where you're linking to publications which have mentioned your ecommerce brand, and you're using a section (optionally with blocks) to link to the articles in question. 

First things first, go into the Online Store menu from the Shopify Admin Dashboard, and the themes tab should open by default. The themes for your Shopify store are listed here. If you're feeling lucky, you can do it in the live (aka "production") theme, but generally I'd recommend duplicating the theme and working there.

In your chosen theme, click Actions and then Edit HTML/CSS to open the online theme editor. Hopefully you know what the name of the section you want to modify is, and the section's file name is the same or similar. For example, "Slideshow" or "Feature Row" being the name when viewed through the customizer, and "slideshow.liquid" and "feature-row.liquid" the names of the files in the theme (under the Sections folder).

Then, go down to the schema settings at the bottom and add into the json the following code:

,{
"type":"checkbox",
"id":"new_link",
"label": "Open link in new tab?",
"default": false
}

Care with the commas, JSON is unforgiving when it comes to formatting (tools like JSONLint can help debug it). What this setting does it create a checkbox in the sidebar of the theme customizer (accessed via clicking Customize Theme rather than actions>edit html/css. The settings defined through this UI are stored in the config/settings_data.json file of the theme, which is important to note when setting up local theme development or version control workflows).

The section's data can be accessed in the section file (above the schema) with liquid tags like so:

{{ section.settings.setting_id }}

And they can also be used in logical operations like so:

{% if section.settings.boolean %}
  ...
{% endif %}

which is how we'll utilize the checkbox to toggle the link target. Go on down and find the line in the section (or repeated block within a {% for %} loop) starting with the html a tag, "<a". CTRL-F is your friend. It should look something like this:

<a href="{{ section.settings.button_link }}" class="btn feature-row__btn">
  {{ section.settings.button_label }}
</a>

Add a new line like this inside the opening a tag:

{% if section.settings.new_link %} target="_blank" {% endif %}

so the final result should look something like this:

<a href="{{ section.settings.button_link }}" class="btn feature-row__btn" {% if section.settings.new_link %} target="_blank" {% endif %}>
  {{ section.settings.button_label }}
</a>

So, if the setting is true, inject (or "output") the text 'target="_blank"' into the html doc. When the browser parses this attribute, it will know to open this link in a new tab or window depending on the device and browser. 

That's pretty much it, cheers.