Ouvrir des liens externes dans un nouvel onglet

Attention

Les thèmes vintage ne sont pas disponibles dans la Boutique des thèmes. Ces thèmes 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 que des correctifs de sécurité.

Remarque

Si vous utilisez un thème gratuit de Shopify, vous pourrez peut-être contacter l’assistance de Shopify pour obtenir de l’aide par rapport à ce tutoriel. La conception de cette partie nécessite 15 minutes. Pour plus d’informations, voir Assistance par rapport aux thèmes.

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
• Explorez les personnalisations de thème 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 Save (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 Save (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 Save (Enregistrer).