JavaScript personnalisé

Liens en vedette

1. Documentation Shopify sur les sections et les blocs
2. Documentation Company XYZ sur le bloc JavaScript personnalisé

Vidéos utiles

Vidéo de Shopify Academy : personnaliser votre boutique

Vidéo de Shopify Academy : personnaliser votre boutique

Utilisez ce bloc lorsque vous devez placer du JavaScript personnalisé à un point précis de la page, par exemple pour un formulaire intégré, un widget ou un service tiers. Il convient particulièrement aux ajouts petits et ciblés, plus faciles à gérer lorsqu’ils restent proches du contenu qu’ils affectent. Pour une vue d’ensemble plus large du fonctionnement des blocs dans l’éditeur de thème, consultez documentation Shopify sur les sections et les blocs

Paramètres de base

Le champ de code est l’endroit où vous collez le JavaScript que vous souhaitez voir exécuter par ce bloc. Collez uniquement le JavaScript lui-même, sans balises script autour. Pour plus de conseils, consultez JavaScript personnalisé.

Saisissez uniquement du JavaScript. Si vous collez des balises script avec le code, il se peut que le bloc ne se comporte pas comme prévu.

Utilisez ce bloc uniquement lorsqu’une fonctionnalité intégrée ne peut pas obtenir le même résultat. Les scripts personnalisés peuvent modifier la façon dont la page se charge, se comporte ou réagit sur différentes tailles d’écran. Testez donc soigneusement après chaque mise à jour.

Attention

Du code tiers ou non testé peut affecter la vitesse de la page, l’accessibilité, la stabilité de la mise en page et les interactions client.

Paramètres standard du bloc

Paramètres de l’éditeur

Ces paramètres vous aident à organiser le bloc dans l’éditeur. Utilisez le titre de l’éditeur pour donner à chaque bloc de code personnalisé un libellé interne clair, surtout si vous en utilisez plusieurs dans le même modèle.

Un titre descriptif facilite ensuite la maintenance. Nommez le bloc selon son objectif ou son emplacement, par exemple formulaire de newsletter, widget de guide des tailles ou suivi de page produit.

Notes d’utilisation

1. Conservez chaque bloc ciblé. Utilisez un bloc par tâche afin qu’il soit plus facile à tester, à dépanner et à supprimer si nécessaire.
2. Collez le code proprement. Supprimez toutes les balises script autour du code avant d’enregistrer, afin que le bloc ne reçoive que le contenu JavaScript.
3. Nommez les blocs clairement. Définissez un titre d’éditeur qui reflète l’objectif ou l’emplacement du script lorsque plusieurs blocs de code personnalisé sont utilisés.
4. Testez sur des pages réelles. Vérifiez le chargement, le style et l’interaction sur ordinateur et mobile après avoir ajouté ou modifié le code.
5. Utilisez le code personnalisé avec discernement. Choisissez ce bloc lorsque vous avez besoin d’un comportement précis que les paramètres standard du thème ne peuvent pas fournir.