Theme: Debut

Last version(s) tested: Debut 13.0.0

Recommended design time: 10 minutes

---

This customization allows merchants to select a nav item that they want to be able to be opened in a new tab. All that selected nav item's child nav items will also be opened in a new tab.

This customization will work for other themes, you will just need to slightly modified where you place the {% if %} statements, and change the class names in the jQuery.

What you have

All nav items open in the in same tab.

What you want

The merchant is able to choose certain nav items that will open in a new tab instead.

---

Step one: In the header.liquid file, add the following code inside the class attribute of the first <li> element in the file.

{% if forloop.index == indexOfSpecificNavItem and section.settings.make_specific_nav_items_open_in_a_new_tab %} drop-down-links-open-in-new-tab {% endif %}

So it should look like this:

<li class="mobile-nav__item {% if forloop.index == indexOfSpecificNavItem and section.settings.make_specific_nav_items_open_in_a_new_tab %} drop-down-links-open-in-new-tab {% endif %} {% unless forloop.last %} border-bottom{% endunless %}">

Step two: In the header.liquid file, add the following code to the bottom of the schema.

{
     "type":      "header",
     "content":   "Make specific nav items open in a new tab"
},
{
      "type": "checkbox",
      "id": "make_specific_nav_items_open_in_a_new_tab",
      "default": true,
      "label": "Make specific nav items open in a new tab"
},
{
     "type": "select",
     "id": "index_of_specific_nav_item",
     "options": [
        { "value": "1", "label": "First nav item"},
        { "value": "2", "label": "Second nav item"},
        { "value": "3", "label": "Third nav item"},
          { "value": "4", "label": "Fourth nav item"},
          { "value": "5", "label": "Fifth nav item"},
          { "value": "6", "label": "Sixth nav item"}  
     ],
     "label": "Underneath which nav item should links to open in a new tab"
}

Step three: In the header.liquid file, at the very top of the page, add the following code.

{% assign indexOfSpecificNavItem = section.settings.index_of_specific_nav_item | round %}

Step four: In the site-nav.liquid file, add the following code inside the class attribute of the first <li> element in the file.

{% if forloop.index == indexOfSpecificNavItem and section.settings.make_specific_nav_items_open_in_a_new_tab %} drop-down-links-open-in-new-tab {% endif %}

So it should look like this:

<li class="{% if forloop.index == indexOfSpecificNavItem and section.settings.make_specific_nav_items_open_in_a_new_tab %} drop-down-links-open-in-new-tab {% endif %} site-nav--has-dropdown{% if three_level_nav %} site-nav--has-centered-dropdown{% endif %}{% if link.active %} site-nav--active{% endif %}" data-has-dropdowns>

Step five: In the site-nav.liquid file, add the following code inside the class attribute of the very last <li> element in the file.

{% if forloop.index == indexOfSpecificNavItem and section.settings.make_specific_nav_items_open_in_a_new_tab %} drop-down-links-open-in-new-tab {% endif %}

So it should look like this:

<li class="{% if forloop.index == indexOfSpecificNavItem and section.settings.make_specific_nav_items_open_in_a_new_tab %} drop-down-links-open-in-new-tab {% endif %} {% if link.active %} site-nav--active{% endif %}">

Step six: In the theme.js file, add the following code to the very bottom of the file.

$( document ).ready(function() {
  $('.drop-down-links-open-in-new-tab .site-nav__link').each(function() {
    $(this).attr('target', '_blank');
  });
});

Note: When settings are changed, they do not take effect until the page is refreshed. It may be worth letting the merchant know about this in your email.