Comment ouvrir un lien externe dans un nouvel onglet sur Shopify

Vous avez ajouté dans votre menu un lien externe qui pointe vers un autre site que le votre et vous souhaitez ajouter un attribut _blank à celui-ci ?

Cela peut être bénéfique car cela aide à empêcher les clients de quitter votre boutique en ligne.

Par défaut Shopify ne propose que d’ajouter le nom et le lien lorsqu’on souhaite ajouter un nouvel élément à son menu et on n’a pas d’autre personnalisation possible à faire depuis la Navigation.

 

Pour contourner ce comportement il suffit d’ajouter un bout de code javascript qui va faire en sorte d’ajouter automatiquement l’attribut _blank à tous les liens externes du site.

Pour cela, il faut éditer le code de votre thème puis allez dans le répertoire Assets et recherchez le fichier qui gère le js ; généralement c’est theme.js ou custom.js et ajoutez le code suivant :

    // on récupère tous les liens
    var links = document.links;
    for (let i = 0, linksLength = links.length ; i < linksLength ; i++) {
        // si le hostname du lien est différent du hostname actuel alors on ajoute l'attribut _blank
        if (links[i].hostname !== window.location.hostname) {
            links[i].target = '_blank';
            links[i].rel = 'noreferrer noopener';
        }
    }

N’oubliez pas d’Enregistrer vos modifications.

Avec ce petit hack, désormais tous les liens externes que ce soit dans le menu ou dans le contenu du site (articles de blogs, fiches produits ou pages de contenus) s’ouvriront dans un nouvel onglet et vous ne perdrez plus de visiteurs.

A noter que cette astuce fonctionne aussi sur les autres sites autres que Shopify, il suffit simplement de mettre ce code javascript dans votre fichier qui gère le js.