Ouvrir des liens externes dans un nouvel onglet

Attention

Les thèmes vintage ne sont pas disponibles dans Theme Store. Les thèmes vintage ne disposent pas des fonctionnalités incluses dans les thèmes Online Store 2.0 de Shopify, et les thèmes vintage gratuits de Shopify ne reçoivent pas d’autres mises à jour, à l’exception des correctifs de sécurité.

Remarque

Si vous utilisez un thème gratuit de Shopify, vous pouvez contacter l’assistance Shopify pour obtenir de l’aide avec ce tutoriel. La conception de cette partie nécessite 15 minutes. En savoir plus sur la politique en matière de conception de Shopify.

Remarque

Cette personnalisation est faite pour les thèmes vintage de Shopify, et ne s’applique pas aux thèmes Online Store 2.0.

• Découvrez la version de l'architecture de votre thème
• Explorer les personnalisations des thèmes Online Store 2.0

Vous pouvez ajouter du code à votre thème de façon à entraîner l’ouverture de liens externes présents sur votre boutique en ligne dans un nouvel onglet du navigateur. Cela peut être utile pour empêcher les clients de quitter votre boutique en ligne lorsqu'ils naviguent. Les liens externes sont des URL qui dirigent les clients vers différents sites web. C'est le cas des liens inclus dans les icônes de médias sociaux, par exemple.

Ajouter du code au fichier JavaScript de votre thème

Pour que des liens externes s’ouvrent dans un nouvel onglet du navigateur, vous devez modifier le fichier JavaScript de votre thème.

Étapes :

Bureau

1. Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.

2. Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.

3. Dans le répertoire Ressources, cliquez sur l’un des éléments suivants :

   • theme.js
   • theme.js.liquid
   • custom.js

4. Collez le code suivant au bas du fichier :

var links = document.links;
for (let i = 0, linksLength = links.length ; i < linksLength ; i++) {
  if (links[i].hostname !== window.location.hostname) {
    links[i].target = '_blank';
    links[i].rel = 'noreferrer noopener';
  }
}

1. Cliquez sur Enregistrer.

iPhone

1. Dans l’application Shopify, appuyez sur le bouton …

2. Dans la section Canaux de vente, appuyez sur Online Store (Boutique en ligne).

3. Appuyez sur Manage themes (Gérer les thèmes).

4. Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.

5. Dans le répertoire Ressources, cliquez sur l’un des éléments suivants :

   • theme.js
   • theme.js.liquid
   • custom.js

6. Collez le code suivant au bas du fichier :

var links = document.links;
for (let i = 0, linksLength = links.length ; i < linksLength ; i++) {
  if (links[i].hostname !== window.location.hostname) {
    links[i].target = '_blank';
    links[i].rel = 'noreferrer noopener';
  }
}

1. Cliquez sur Enregistrer.

Android

1. Dans l’application Shopify, appuyez sur le bouton …

2. Dans la section Canaux de vente, appuyez sur Online Store (Boutique en ligne).

3. Appuyez sur Manage themes (Gérer les thèmes).

4. Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.

5. Dans le répertoire Ressources, cliquez sur l’un des éléments suivants :

   • theme.js
   • theme.js.liquid
   • custom.js

6. Collez le code suivant au bas du fichier :

var links = document.links;
for (let i = 0, linksLength = links.length ; i < linksLength ; i++) {
  if (links[i].hostname !== window.location.hostname) {
    links[i].target = '_blank';
    links[i].rel = 'noreferrer noopener';
  }
}

1. Cliquez sur Enregistrer.