External Links in Navigation

Highlighted
Tourist
52 0 1
Hi, I have some external links (links to other websites) in my Navigation and was wondering, how do I get them to open up in a new window? Currently when I click the link, it opens up in the same window as the shopify solution. I am assuming I have to edit the liquid theme...if anyone can point me to the right direction, that would be great!
0 Likes
Highlighted
Shopify Expert
4117 27 378

Hi,

In your theme.liquid, you might have a Liquid code using the link_to method. This builds your links for you from the Navigation you setup in Shopify. Unfortunately, when you view your source, you’ll see your <a> element created without a target attribute. If you set target=”_blank” in your <a> element, your link will open in a new browser window.

You have two choices… maybe someone can add more for you.
1) hard code your link and insert the target attribute yourself on links you want external.. this means, you can use Shopify to auto-build your internal navigation links, but you simply add in your external ones yourself.. into the <ul> or whatever you use.

2) you can grab each <a> element you want external with a small bit of Javascript, and add the attribute target with a value of ”_blank” and you should be good to go…

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
0 Likes
Highlighted
Tourist
52 0 1

Bill,

Thanks for the quick reply, I have done this sucessfully in the navigation bar at the TOP of the page, although the how about the links on the side of the templete? I can find it in the theme.liquid

Any ideas?

0 Likes
Highlighted
New Member
16 0 0

Am I correct in assuming Liquid still doesn’t have a filter option to add a target tag? Does anyone have generic javascript snippet that would accomplish option 2?

-J

0 Likes
Highlighted
Shopify Staff
Shopify Staff
5704 0 313

You don’t need JavaScript for this.


<ul>{% for link in linklists.MENU-HANDLE.links %}
  <li{% if forloop.first %} class="first"{% endif %}>
    <a href="{{ link.url }}"{% if link.url contains 'http' %} target="_blank"{% endif %} title="{{ link.title | escape }}"{% if page_title == link.title %} class="current"{% endif %} id="{{ link.title | handleize }}">{{ link.title | escape }}</a>
  </li>{% endfor %}
</ul>    

Above snippet of code gives you all:

1. If it’s the first link, you get a special class. Helpful for your CSS.
2. If it’s the active link, you get a special class name too. (Will not work for all types of links. The page_title is not always equal to the link title, for the current page.)
3. If the link url contains ‘http://’... hence, is an external link… page will open in a new window.
4. Special id attribute for each link.

And more.

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
0 Likes
Highlighted
New Member
2 0 0

I am trying to do the opposite here.  I have "external" links to my nav but they are actually to the rest of my website which hasn't migrated over to Shopify.  Need a stop gap to keep a seamless experience (have modified nav, header and footer to match).

 

My theme.liquid didn't have any of the links other than one - I changed the "_blank" to "_self" and it didn't work.

I can't find the coding for the nav anywhere though.  Any suggestions?

0 Likes
Highlighted

Any progress on this? Looking for the same here ;)

0 Likes
Highlighted
New Member
2 0 0

I found someone on Storetasker that was able to fix it.  Don't ask me how though.  I was desperate.

0 Likes