Design et réglages du créateur

Puis-je ajouter du code personnalisé, des scripts ou des balises meta à ma boutique (HTML, CSS, JavaScript, section head) ?

Où ajouter votre propre HTML, CSS et JavaScript dans le constructeur (section Code personnalisé, CSS personnalisé, Javascript personnalisé), pourquoi vous ne pouvez pas coller de code dans le head, et quelle application utiliser pour Google Search Console, Google Tag Manager et les pixels.

3 min de lecture

La réponse courte

Vous pouvez ajouter votre propre code à trois endroits du constructeur : une section Code personnalisé dans une page, les réglages CSS personnalisé et les réglages Javascript personnalisé. Il n'y a aucune zone pour coller du code dans la section head de votre boutique. Pour les balises du head, utilisez l'application adaptée (voir la liste ci-dessous).

Quel outil pour quel besoin

Vérifier ma boutique avec Google Search Console, ou ajouter une balise meta google-site-verification : l'application Domain Verifier. Elle gère aussi la vérification de domaine Facebook (Meta), TikTok et Snapchat.
Google Analytics, balises Google Ads ou toute balise gérée dans Google Tag Manager : l'application Google Tag Manager.
Pixels Facebook, TikTok, Snapchat, ChatGPT, Pinterest, X ou Google Ads : voir Facebook, TikTok, Snapchat, ChatGPT, Pinterest et X, ou Conversions Google Ads.
Flux de produits Google Merchant Center : voir Google Merchant Center. Utilisez Domain Verifier pour Search Console.
Cartes de chaleur et enregistrements de sessions : voir Microsoft Clarity ou Contentsquare.
Un widget ou un contenu intégré dans une page (un formulaire de réservation, une vidéo, une carte) : la section Code personnalisé ci-dessous.
Des styles pour toute la boutique ou une section : voir CSS personnalisé.
Un script sur toutes les pages : voir JavaScript personnalisé.

Pourquoi le code du constructeur ne peut pas vérifier votre site

Google, Meta et les autres plateformes cherchent leur balise dans le head de votre page lors de la vérification. Une section Code personnalisé place votre code dans le corps de la page, là où se trouve la section. Le Javascript personnalisé s'exécute dans le navigateur du client après le chargement de la page. Aucun des deux ne place une balise dans le head comme ces plateformes l'exigent, donc la vérification échoue. Domain Verifier ajoute la balise au bon endroit pour vous.

Section Code personnalisé

Une section que vous pouvez ajouter à n'importe quelle page, jusqu'à 2 par page. Ouvrez l'onglet Sections, cliquez sur Ajouter une nouvelle section et choisissez Code personnalisé. Elle a trois champs :

HTML : le balisage affiché dans cette section.
CSS : des styles qui ne s'appliquent qu'à cette section, ils ne peuvent donc pas casser le reste de votre page.
JavaScript : s'exécute chaque fois que la section est affichée. Votre code reçoit la section sous le nom container : utilisez donc container.querySelector(...) pour atteindre votre propre balisage.

Vous réglez aussi sa largeur, son schéma de couleurs et sa marge intérieure comme pour toute section. Utilisez Appliquer à toutes les pages pour la copier sur les autres pages qui ont déjà une section Code personnalisé.

Conseils

Vérifiez votre code dans l'aperçu du constructeur, puis publiez et testez votre boutique en ligne sur un téléphone et sur un ordinateur.
Si la page semble cassée après une modification, retirez le code, publiez, puis remettez-le morceau par morceau.
Les scripts tiers peuvent ralentir votre boutique. N'ajoutez que ce dont vous avez besoin.
Un assistant IA connecté à votre boutique ne peut modifier le code personnalisé que si le propriétaire de la boutique l'autorise. Voir Gérer l'accès des assistants.

Besoin d'aide supplémentaire ?

Écrivez-nous et nous vous répondrons.

Contactez-nous