Ajout de code personnalisé au Site Instantané

Le code personnalisé vous permet de vérifier la propriété d'un Site instantané et d'ajouter une grande variété de nouveaux éléments et de nouveaux contenus tels que les widgets de chat ou un formulaire de contact à votre site Web Ecwid. Vous pouvez également intégrer des services tiers (par ex. : réservation) au Site instantané de cette façon.

Il y a deux endroits sur le Site instantané où vous pouvez ajouter du code : la section d'en-tête et la section du corps. Si vous utilisez le Site Instantané nouvelle génération, vous pouvez également remplacer les sections spécifiques du site par votre contenu via du code JavaScript.

Disponible pour les abonnements : Venture, Business et Unlimited.

Mettre à niveau

Choisir où ajouter du code

Lorsque vous choisissez entre l'en-tête du Site instantané et le corps comme un endroit pour ajouter votre code personnalisé, considérez le code lui-même et votre cas d'utilisation.

Généralement, l'implémentation de JavaScript dans le corps du site est recommandée car elle est meilleure en termes de vitesse de page. Cependant, il y a des cas (par exemple, la vérification de propriété de domaine) où votre code doit être ajouté à la section d'en-tête.

Assurez-vous de lire les instructions pour le code/widget tiers que vous souhaitez ajouter à votre Site instantané pour des conseils sur où il est préférable d'ajouter cet élément de code particulier.

Ajouter du code à la section d'en-tête de votre Site Instantané

L'insertion de code dans l'en-tête du Site instantané est la bonne option si vous voulez ajouter une icône de favori ou si vous avez besoin de vérifier la propriété du site ou du domaine (par ex., lorsque vous vendez ou faites de la publicité sur Facebook). Vous pouvez ajouter plusieurs codes à la section d'en-tête.

Pour ajouter un code personnalisé à la section d'en-tête du Site instantané :

Depuis votre interface d'administration Ecwid, allez dans Site Web (ou dans Aperçu → Gérer le Site instantané).
Faites défiler jusqu'à la section « Paramètres de référencement » et cliquez sur Ajouter un code sous « Balises méta de l'en-tête et vérification du site » :
Dans le champ qui apparaît, saisissez votre code.
Enregistrez les modifications.

Actualisez la page du Site instantané dans votre navigateur pour voir les changements.

Ajouter du code à la section de corps votre Site Instantané

Insérer du code dans le corps du Site instantané est la solution si vous avez besoin d'implémenter un script personnalisé. Par exemple, vous voulez avoir une fenêtre de discussion Zendesk ou un widget de contact sur votre site Web. Vous pouvez ajouter autant de codes dans la section du corps que vous souhaitez.

Pour ajouter un code personnalisé à la section de corps du Site instantané :

Depuis votre interface d'administration Ecwid, allez dans Site Web (ou dans Aperçu → Gérer le Site instantané).
Faites défiler vers le bas jusqu'à la section « Paramètres avancés du site Web » et cliquez sur Ajouter du code sous Code JavaScript personnalisé :
Dans le champ qui apparaît, saisissez votre code (pas plus de 4000 symboles).
Enregistrez les modifications.

Actualisez la page du Site instantané dans votre navigateur pour voir les changements.

Remplacer les sections du Site instantané nouvelle génération par votre script

Vous pouvez remplacer une section d'un Site instantané nouvelle génération existante avec votre contenu via du code JavaScript personnalisé. Par exemple, si vous souhaitez ajouter Google Calendar pour que les clients puissent réserver un de vos cours de musique. Après avoir remplacé le contenu de la section, vous pouvez l'ajouter au menu de navigation afin que les clients puissent la localiser immédiatement.

Pour remplacer une section de Site instantané par votre contenu :

Depuis votre interface d'administration Ecwid, allez dans Site Web (ou Aperçu → Gérer le Site instantané).
Cliquez sur l'adresse de votre Site instantané pour l'ouvrir :
Faites défiler la page jusqu'à la section que vous souhaitez remplacer, cliquez dessus avec le bouton droit de la souris, puis choisissez Inspecter et copiez l'identifiant de la section :

En savoir plus sur trouver des sélecteurs Ecwid →
Vous ne pouvez remplacer que les sections avec les ID suivants :
tile-text-...
tile-image-text-...
tile-call-to-action-...

Copiez ce code :

<script>
  document.addEventListener("DOMContentLoaded", function(){
  document.getElementById("tile-text-H2KtzB").innerHTML = '
      <div>VOTRE CODE ICI</div>';
   });
  </script>

Remplacez « tile-text-H2KtzB » par l'identifiant de la section de votre site instantané et « VOTRE CODE ICI » par votre code personnalisé.
Sur le Site Web (ou la page Aperçu → Gérer le Site instantané) de votre interface d'administration Ecwid, défilez jusqu'à la section « Paramètres avancés du site Web » et cliquez sur Ajouter du code sous Code JavaScript personnalisé.
Dans le champ qui apparaît, saisissez votre code.
Enregistrez les modifications.

Actualisez la page du Site instantané dans votre navigateur pour voir les changements.

Vous ne pouvez remplacer que les sections déjà publiées. Les modifications ne seront pas affichées lors de la visualisation de votre site dans l'éditeur du Site instantané.