Dialog n'est pas visible
Si le widget Dialog ne s’affiche pas sur votre store, la solution dépend du chemin d’installation. Allez directement à la section correspondante — et si vous ne savez pas quel chemin votre boutique utilise, identifiez-le d’abord : toutes les vérifications ci-dessous en dépendent.
Ces vérifications s’appliquent aux stores Shopify uniquement (install via l’app Shopify — Online Store 2.0 ou thème legacy).
Pas visible du tout
Section intitulée « Pas visible du tout »- L’embed Dialog est activé. Dans le customizer de thème Shopify, vérifiez la section Embed apps (en haut à gauche).
- L’app block est ajouté au template product page. Éditez votre thème, ouvrez le template produit, vérifiez que l’app block Dialog est là.
- Pas de conflit CSS. Ouvrez les devtools du navigateur sur la page produit et inspectez la zone du widget. Quelque chose peut le cacher (
display: none,visibility: hidden, conflit de z-index).
L’app block est ajouté, mais ne se rend pas correctement
Section intitulée « L’app block est ajouté, mais ne se rend pas correctement »Vous avez ajouté l’app block Dialog dans l’éditeur de thème Shopify, mais sur le storefront il ne se rend pas du tout ou se rend au mauvais endroit. Signes typiques :
- il est visible dans l’éditeur mais complètement absent sur la page produit en ligne
- il apparaît au-dessus ou en dessous de la zone produit attendue
- il se rend dans un wrapper générique Apps au lieu d’être dans la section produit
- l’emplacement sur le storefront ne correspond pas à l’emplacement de section choisi dans l’éditeur
C’est généralement un souci de thème, pas de Dialog. Un thème peut ressembler à de l’Online Store 2.0 et quand même ne pas supporter correctement les app blocks dans sa section produit. L’éditeur vous laisse ajouter le block dès que le schema de la section l’autorise, mais le block ne se rend que si le Liquid de la section génère réellement les app blocks.
La cause la plus fréquente est un appel de rendu manquant. Si la section produit n’inclut jamais {% content_for 'blocks' %} (ou un {% render block %} par block), le block est accepté dans l’éditeur mais ne se rend nulle part sur le storefront — c’est le cas qu’on confond le plus souvent avec un bug de Dialog. Si cet appel de rendu existe mais se trouve en dehors du layout produit, le block se rend au mauvais endroit.
Selon les exigences app blocks de Shopify, la section produit doit :
- déclarer un block générique de type
{"type": "@app"}dans son schema — pour que l’éditeur puisse ajouter le block - rendre réellement ces blocks avec
{% content_for 'blocks' %}ou{% render block %}— pour qu’ils apparaissent sur le storefront - garder cet appel de rendu dans le layout produit, pas dans une section rendue statiquement à part
Vérification rapide. Dans l’éditeur de thème, ouvrez le template produit et essayez d’ajouter Dialog à l’intérieur de la section produit principale — pas comme section de premier niveau — puis sauvegardez et prévisualisez le storefront. Si Dialog est absent du storefront alors qu’il est ajouté dans la section produit, la section déclare des blocks @app sans les rendre. S’il atterrit seulement au mauvais endroit, l’appel de rendu existe mais est en dehors du layout produit. Dans tous les cas, le thème ne supporte pas complètement les app blocks pour cette zone.
Quoi faire ensuite — choisissez une voie :
- Fix thème / agence. Demandez à votre développeur de thème de mettre à jour la section produit pour qu’elle supporte correctement les app blocks Shopify (référence Shopify). Il doit confirmer que la section concernée déclare
{"type": "@app"}dans son schema, qu’elle rend réellement ces blocks avec{% content_for 'blocks' %}(pas seulement les déclare), et qu’elle ne repose pas sur un pattern de section statique pour cet emplacement. - Fallback sur le snippet manuel Dialog. Si le thème ne peut pas supporter les app blocks correctement, utilisez l’intégration manuelle du thème Dialog (
instant.liquid,instant.js,instant.css). C’est le fallback recommandé pour les thèmes legacy, les thèmes partiellement compatibles, et les thèmes custom qui exposent les app blocks dans l’éditeur mais ne les rendent pas correctement sur le storefront.
Prestashop
Section intitulée « Prestashop »- Le module Dialog est activé dans Module Manager.
- La config du module affiche des clés API valides (recollez-les en cas de doute).
- Ouvrez une page produit avec les devtools navigateur et confirmez que le tag script Dialog est dans le HTML.
Install GTM
Section intitulée « Install GTM »- Le tag Dialog est publié dans votre container GTM (pas juste en preview).
- Le trigger du tag matche le pattern d’URL de vos pages produit.
Dialog Product IDrésout vers une vraie valeur sur la page (panneauVariablesen mode preview GTM).
Install React, Vue ou SDK vanilla
Section intitulée « Install React, Vue ou SDK vanilla »- Le composant (
<DialogProductBlock>,<DialogInput>) est rendu sur la page — confirmez dans votre console dev. - Le SDK a été instancié avec une clé API publique valide.
- Le
productIdque vous passez correspond à un produit de votre catalogue uploadé.