Shopify themes, liquid, logos, and UX
Hello Team,
I have my store using the Dawn theme where I have couple menu items that I would like to open in a new tab when the customer clicks on them, for example the "Blog" link or the social media icons (Facebook, TikTok, etc.). Is it possible in the next update to give us the option to select the target to blank when creating our menu items in Online Store - Navigation?
Solved! Go to the solution
This is an accepted solution.
Yes, it is possible to have menu items in your Shopify store open in a new tab. Currently, there is no option to select the target to blank when creating menu items in the Shopify admin panel, but you can use a workaround by adding some custom code to your theme.
Find the section of code that defines your menu, which will likely look something like this:
{% for link in linklists.main-menu.links %} <a href="{{ link.url }}">{{ link.title }}</a> {% endfor %}
Modify the code to include the "target=_blank" attribute, like this:
{% for link in linklists.main-menu.links %} <a href="{{ link.url }}" target="_blank">{{ link.title }}</a> {% endfor %}
If this fixed your issue, likes and accepting as a solution are highly appreciated
| Build an online presence with our custom-built Shopify Theme: EcomifyTheme
| Check out our reviews: Trustpilot Reviews
| We are Shopify Partners: EcomGraduates Shopify Partner
This is an accepted solution.
Hello,
Thank you for your reply. Yes, I have done the workaround before the first post. I use an if else statement to test the title of the link before adding target to it because I only want some of my menus to open in a new tab, not all of them. I just want it to be an option in the Shopify admin panel for people who don't want to play with the code.
This is my code in "footer.liquid"
{
{%- for link in block.settings.menu.links -%}
<li>
<!-- wv - test menu - Add target="_blank" so they open in a new tab when the customer clicks on them-->
<!--
<a
href="{{ link.url }}"
class="link link--text list-menu__item list-menu__item--link{% if link.active %} list-menu__item--active{% endif %}"
>
{{ link.title }}
</a>
-->
{%- if link.title == "Blog" or link.title == "Facebook" or link.title=="Instagram" or link.title=="TikTok" -%}
<a
href="{{ link.url }}" target="_blank"
class="link link--text list-menu__item list-menu__item--link{% if link.active %} list-menu__item--active{% endif %}"
>
{{ link.title }}
</a>
{%- else -%}
<a
href="{{ link.url }}"
class="link link--text list-menu__item list-menu__item--link{% if link.active %} list-menu__item--active{% endif %}"
>
{{ link.title }}
</a>
{%- endif -%}
<!-- wv end test menu -->
</li>
{%- endfor -%}
This is an accepted solution.
Yes, it is possible to have menu items in your Shopify store open in a new tab. Currently, there is no option to select the target to blank when creating menu items in the Shopify admin panel, but you can use a workaround by adding some custom code to your theme.
Find the section of code that defines your menu, which will likely look something like this:
{% for link in linklists.main-menu.links %} <a href="{{ link.url }}">{{ link.title }}</a> {% endfor %}
Modify the code to include the "target=_blank" attribute, like this:
{% for link in linklists.main-menu.links %} <a href="{{ link.url }}" target="_blank">{{ link.title }}</a> {% endfor %}
If this fixed your issue, likes and accepting as a solution are highly appreciated
| Build an online presence with our custom-built Shopify Theme: EcomifyTheme
| Check out our reviews: Trustpilot Reviews
| We are Shopify Partners: EcomGraduates Shopify Partner
This is an accepted solution.
Hello,
Thank you for your reply. Yes, I have done the workaround before the first post. I use an if else statement to test the title of the link before adding target to it because I only want some of my menus to open in a new tab, not all of them. I just want it to be an option in the Shopify admin panel for people who don't want to play with the code.
This is my code in "footer.liquid"
{
{%- for link in block.settings.menu.links -%}
<li>
<!-- wv - test menu - Add target="_blank" so they open in a new tab when the customer clicks on them-->
<!--
<a
href="{{ link.url }}"
class="link link--text list-menu__item list-menu__item--link{% if link.active %} list-menu__item--active{% endif %}"
>
{{ link.title }}
</a>
-->
{%- if link.title == "Blog" or link.title == "Facebook" or link.title=="Instagram" or link.title=="TikTok" -%}
<a
href="{{ link.url }}" target="_blank"
class="link link--text list-menu__item list-menu__item--link{% if link.active %} list-menu__item--active{% endif %}"
>
{{ link.title }}
</a>
{%- else -%}
<a
href="{{ link.url }}"
class="link link--text list-menu__item list-menu__item--link{% if link.active %} list-menu__item--active{% endif %}"
>
{{ link.title }}
</a>
{%- endif -%}
<!-- wv end test menu -->
</li>
{%- endfor -%}
This is not a real solution to the request. As it states, the requirement specifies targeting blank only specific links, not all of them.
I still looking for a solution.
This is so ridiculous! How hard would it be for Shopify to include a check box to allowing opening in a new tab/window? Sheesh!!
Hello, Here is one workaround :
Link objects contain a type property. One of the types is http_link, which Shopify's documentation describes as: "The link points to an external web page, or a product type or vendor collection."
To open these links in a new tab, you can add this condition to the links you want:
{% if link.type == 'http_link' %} target="_blank"{% endif %}
Here is an example in a loop:
{%- for childlink in link.links -%}
<a
href="{{ link.url }}"
class="header__menu-item list-menu__item ..."
{% if link.type == 'http_link' %}
target="_blank"
{% endif %}
>
{{ childlink.title }}
</a>
{%- endfor -%}
Note that this will also impact "product type or vendor collection" as mentionned.
Documentation :
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025