Ajouter du CSS personnalisé, du code head ou des scripts
Dans l'éditeur de thème, cliquez sur l'icône engrenage pour ouvrir Paramètres généraux → Code personnalisé: collez le CSS sous CSS de la boutique (toutes les pages) ou CSS de la page (cette page uniquement), les balises pour le head sous Code personnalisé dans la balise head, et les scripts sous Code Javascript personnalisé. Pour du balisage à l'intérieur d'une page, utilisez le bloc Code Html.
Étapes
- Ouvrez Boutique en ligne → Paramètres du thème et sélectionnez la page dans Sélectionner une page. Cliquez sur l'icône engrenage pour les Paramètres généraux et dépliez Code personnalisé.
- CSS personnalisé: choisissez l'onglet CSS de la boutique (« Le CSS de la boutique s'applique à toutes les pages de la boutique. ») ou CSS de la page (« Le CSS de la page n'affecte que cette page. »). Collez uniquement votre code CSS, sans balises
<style>. - Code personnalisé dans la balise head: collez le code avec ses balises complètes (par exemple une balise
<script>ou<meta>entière). Cette zone est par page. - Code Javascript personnalisé: collez le code complet sans balises
<script>; ces scripts s'exécutent après le chargement du contenu de la page. Également par page. - Cliquez sur Enregistrer. Le code personnalisé est enregistré avec la page, par langue.
- Pour placer du HTML dans la mise en page, ouvrez Ajouter des blocs, faites glisser un bloc Code Html à l'endroit voulu et modifiez son Contenu.
- Sur une landing page, le même panneau Code personnalisé existe, mais le CSS ne s'applique qu'à cette page (il n'y a pas d'onglet CSS de la boutique).
Problèmes courants
- Le CSS n'a aucun effet → retirez les balises
<style>, puis vérifiez que vous l'avez collé dans CSS de la boutique s'il doit s'appliquer partout, et cliquez sur Enregistrer. - Le script ne s'exécute que sur une seule page → les zones head et JavaScript sont par page; ajoutez le code sur chaque page qui en a besoin.
- Le script ne s'exécute pas du tout → retirez les balises
<script>dans Code Javascript personnalisé; elles n'ont leur place que dans la zone head. - Le bloc Code Html affiche moins que ce que vous avez collé → certaines balises sont nettoyées avant l'affichage; tenez-vous-en au HTML standard.
- Le code fonctionne dans une langue de la boutique mais pas dans une autre → le code personnalisé est enregistré par langue; changez la langue de l'éditeur et enregistrez à nouveau.
Voir aussi
- Comment changer le thème de ma boutique et modifier ses sections
- Puis-je voir les UTM sur les commandes ou ajouter du code perso ?
- Ajouter des pixels Meta, TikTok, Google ou Snapchat
- Définir le titre, la description et les mots-clés SEO d'une page