Code personnalisé

Liens en vedette

1. Documentation Shopify sur les sections et les blocs
2. Documentation Company XYZ sur la section de code personnalisé
3. Documentation Company XYZ sur le bloc de ressource personnalisé
4. Documentation Company XYZ sur le bloc CSS personnalisé
5. Documentation Company XYZ sur le bloc JavaScript personnalisé

Vidéos utiles

Vidéo Shopify Academy : Personnaliser votre boutique

Vidéo Shopify Academy : Personnaliser votre boutique

Utilisez cette section pour placer du CSS personnalisé, du JavaScript ou des intégrations complètes d’assets directement dans un modèle. Elle est idéale pour des modifications avancées et spécifiques à une page, comme des remplacements de style, des services intégrés ou des scripts qui ne doivent se charger que dans une zone particulière.

Le code personnalisé peut affecter la mise en page, les performances, l’accessibilité et le comportement interactif. Testez-le soigneusement sur ordinateur et sur mobile avant de publier les modifications.

Paramètres de base

Cette section n’inclut aucun contrôle visuel de section. À la place, vous la construisez avec des blocs afin de garder le CSS, le JavaScript et les inclusions d’assets externes séparés et plus faciles à gérer. Pour une vue d’ensemble plus large de la structure de l’éditeur de thème, consultez documentation Shopify sur les sections et les blocs

Le texte d’aide de la section inclut la référence canonique pour Code personnalisé. En pratique, cette section est plus adaptée lorsque vous avez besoin d’un comportement personnalisé au niveau du modèle plutôt que de modifications plus larges à l’échelle du site.

Types de blocs pris en charge

1. Asset personnalisé
2. CSS personnalisé
3. JavaScript personnalisé

Référence des blocs

Asset personnalisé

Utilisez ce bloc lorsque vous devez coller une inclusion d’asset complète, comme un lien de feuille de style ou une balise de script externe. C’est le bon choix pour les services tiers qui fournissent une intégration complète ou un extrait d’asset plutôt que du simple CSS ou JavaScript brut. Pour la référence du bloc, consultez bloc Asset personnalisé.

1. Utilisez un bloc par service ou par fichier afin que les mises à jour et le dépannage restent simples.
2. Réservez ce bloc aux inclusions d’assets complètes plutôt qu’aux règles CSS autonomes ou au code JavaScript.

Paramètres de l’éditeur

Vous pouvez définir un titre d’éditeur pour le bloc afin de le rendre plus facile à identifier dans la barre latérale. C’est particulièrement utile lorsque vous ajoutez plusieurs services ou fichiers à la même section.

CSS personnalisé

Utilisez ce bloc pour ajouter des règles CSS directement dans le modèle sans les envelopper dans des balises de style. Il est utile pour de petits remplacements visuels ciblés qui doivent s’appliquer uniquement dans ce contexte de modèle. Pour la référence du bloc, consultez bloc CSS personnalisé.

Astuce

Limitez soigneusement la portée des sélecteurs afin que le CSS n’affecte que la zone visée et soit plus facile à maintenir après de futures mises à jour du thème.

1. Collez uniquement des règles CSS.
2. Préférez ce bloc pour des remplacements ciblés plutôt que pour de grandes feuilles de style personnalisées.

Paramètres de l’éditeur

Vous pouvez renommer le bloc dans l’éditeur pour refléter son objectif, comme une correction d’espacement ou un ajustement de page de destination. Des titres clairs facilitent beaucoup le nettoyage ultérieur.

JavaScript personnalisé

Utilisez ce bloc pour ajouter du JavaScript directement dans le modèle sans balises de script. Il fonctionne bien pour des widgets intégrés, l’initialisation de services ou de petits comportements interactifs liés au modèle actuel. Pour la référence du bloc, consultez bloc JavaScript personnalisé.

Attention

Une erreur JavaScript peut interrompre d’autres fonctionnalités de la page. Si quelque chose cesse de fonctionner après une modification, désactivez d’abord le bloc de script le plus récent puis testez à nouveau.

1. Collez uniquement du JavaScript.
2. Séparez les scripts sans lien entre eux dans différents blocs afin que chaque modification soit plus facile à examiner ou à supprimer.

Paramètres de l’éditeur

Utilisez le titre de l’éditeur pour nommer le script par service ou par objectif. Cela ne modifie pas le front-end, mais rend la maintenance continue beaucoup plus facile.

Paramètres standard de section

Cette section n’inclut pas de paramètres partagés pour le layout, l’espacement, l’arrière-plan, la visibilité ou la largeur. Son comportement dépend entièrement des blocs que vous ajoutez et du code placé à l’intérieur.

Notes d’utilisation

1. Associez le bloc à la tâche. Utilisez CSS personnalisé pour les règles de style, JavaScript personnalisé pour la logique de script, et Asset personnalisé lorsque vous devez coller une inclusion externe complète.
2. Gardez des modifications modulaires. Séparez les personnalisations sans lien entre elles dans des blocs distincts afin de pouvoir isoler rapidement les problèmes et supprimer une modification sans affecter les autres.
3. Nommez clairement les blocs. Utilisez des titres d’éditeur descriptifs afin que les extraits répétés restent faciles à identifier plus tard.
4. Attendez-vous à ce que le contenu du bloc détermine le résultat. L’ajout de blocs peut remplacer un contenu simple au niveau de la section ou l’enrichir avec des intégrations et des comportements supplémentaires ; vérifiez donc le modèle final après chaque modification.
5. Testez les parcours clés. Vérifiez les actions importantes de la page, les mises en page responsives et les services intégrés après chaque modification de code.
6. Limitez le code spécifique au modèle. N’ajoutez que ce dont ce modèle a besoin afin de réduire les conflits, la charge de maintenance et le poids inutile de la page.