How can I make menu items open in a new tab in the Dawn theme?

Solved

How can I make menu items open in a new tab in the Dawn theme?

vwade15
Shopify Partner
8 1 11

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?

Accepted Solutions (2)

EcomGraduates
Shopify Partner
795 68 114

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



View solution in original post

vwade15
Shopify Partner
8 1 11

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 -%}

View solution in original post

Replies 5 (5)

EcomGraduates
Shopify Partner
795 68 114

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



vwade15
Shopify Partner
8 1 11

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 -%}

Claudee
Visitor
1 0 1

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. 

siric
Shopify Partner
26 1 11

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!!

loptimisator
Shopify Partner
1 0 0

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 :

Liquid objects : link

Liquid objects : link / link-type