Target blank option in Menu Dawn Theme

[vwade15]

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?

[EcomGraduates · 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 %}

[EcomGraduates · 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 %}

[vwade15 · 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 -%}

[Claudee]

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.