Shopify uses the menu function to set links such as global navigation, but there may be times when you want to display a separate window (target: _blank) for links to brand sites or physical store sites that exist on a different domain.
Unfortunately, the menu function does not have a separate window setting option.
In this article, we will introduce a trick to use JavaScript to display a separate window (target: _blank) for links from other domains included in Shopify's default menu.
If the link in the menu has a different domain, add target="_blank"
Modify the layout/theme.liquid file.
When modifying a file from the management screen,
Go to your Shopify admin page > Sales Channels > Online Store and click the "..." button at the bottom right of the screen to "Edit Code".
*The screen used for the explanation is from Dawn version 11.0.0.
Add the following JavaScript code just before the </body> tag.
<script>
const links = document.querySelectorAll('.list-menu a');
for (let i = 0; i < links.length; i++) {
if (links[i].hostname !== window.location.hostname) {
links[i].target = '_blank';
links[i].rel = 'noreferrer noopener';
}
}
</script> Only when a link in the menu contains a different domain, the attribute values target="_blank", rel="noreferrer noopener" are added to the <a> tag, and the link will open in a new window (new tab).
* Operation has been verified using Dawn and Craft version 11.0.0.
Display a separate window icon
If you want to display a new window icon for the link, add one line to the JavaScript above.
<script>
const links = document.querySelectorAll('.list-menu a');
for (let i = 0; i < links.length; i++) {
if (links[i].hostname !== window.location.hostname) {
links[i].target = '_blank';
links[i].rel = 'noreferrer noopener';
links[i].classList.add('link_blank');
}
}
</script>The CSS is specified as follows:
a.link_blank:after {
width: 12px;
height: 12px;
margin-left: 6px;
background-image: url("別窓アイコン画像のURL");
background-repeat: no-repeat;
background-size: 12px 12px;
background-position: center;
display: inline-block;
content: "";
}
When adding CSS from the admin screen, you would normally use "Custom CSS", but this time I got an error message saying "Unable to publish online store editor session".
There seems to be a validation-related problem, or an error occurs when content: is specified. (As of August 10, 2023)
So this time, we will try adding CSS using "Custom Liquid".
On the Shopify admin screen > Sales Channels > Online Store screen, click the "Customize" button.
1. Click "Add Section" in the "Header" section on the left side of the customization screen.
2. Select "Custom Liquid".
3. Enter the following CSS into the "Liquid code" section.
<style>
a.link_blank:after {
width: 12px;
height: 12px;
margin-left: 6px;
background-image: url("別窓アイコン画像のURL");
background-repeat: no-repeat;
background-size: 12px 12px;
background-position: center;
display: inline-block;
content: "";
}
</style>
4. Set all "Section Margins" to 0px.
5. Click the "Save" button in the upper right corner of the screen.
The CSS was applied and a separate window icon was displayed.
Support for themes with different specifications
Depending on your theme and version, you may need to modify some of your JavaScript code.
In case the code introduced above doesn't work, we'll provide a quick explanation of how JavaScript works.
1. Check the class name
Let's take a look at the source code for the menu section using the browser's developer tools.
Check the class name of the element that surrounds the menu and make a note of it.
2. Rewriting the selector
The following JavaScript, which we introduced earlier, gets all <a> tags that are child elements of the specified class, and if there is a link from another domain, it adds the attribute values target="_blank" and rel="noreferrer noopener".
<script>
const links = document.querySelectorAll('.xxxxx a');
for (let i = 0; i < links.length; i++) {
if (links[i].hostname !== window.location.hostname) {
links[i].target = '_blank';
links[i].rel = 'noreferrer noopener';
}
}
</script>By replacing xxxxx with the class name you noted down earlier, you can also use themes with different specifications.
Shopify Tips How to set a new window (_blank) for menu links Summary
In this article, we introduced how to use JavaScript to display a separate window (target: _blank) for links from different domains included in Shopify's default menu.
I hope this helps you in building your Shopify website.
*Information current as of August 2023. Due to theme updates or changes to Shopify specifications, it may not be possible to set it up exactly as described in the article.
