Installer Dialog sur Shopify

Ce guide s’adresse aux marchands dont la boutique tourne sur Shopify — dans ce cas, l’app Shopify est toujours la bonne installation, quel que soit votre thème. Allez dans votre back office Shopify, cherchez Dialog sur le Shopify App Store, installez l’app et suivez l’onboarding.

L’app Shopify couvre les deux sujets : elle synchronise votre catalogue automatiquement (ingestion de data) et fournit l’embed frontend pour votre thème. Le fonctionnement de l’embed frontend dépend de votre thème :

Thème Online Store 2.0 → utilisez l’app block dans le customizer de thème.
Thème legacy (< Online Store 2.0) → collez le snippet instant.liquid de Dialog plus les fichiers JS / CSS dans votre thème manuellement.
Shopify headless (Hydrogen ou storefront custom) → installez l’app pour la synchro catalogue, puis embeddez l’assistant sur votre frontend via le SDK ou les composants React / Vue. L’app block n’est pas utilisable en dehors du renderer Online Store.

Thème compatible avec Online Store 2.0

C’est le chemin facile. Ajoutez l’app block Dialog à votre page produit depuis le customizer de thème Shopify. Suivez l’onboarding in-app après avoir installé l’app — il vous guide pas à pas.

Démo en anglais
Démo en français

L’app block ne se rend pas correctement

Un thème peut être étiqueté Online Store 2.0 et quand même ne pas supporter correctement les app blocks dans sa section produit. Si le block Dialog apparaît dans l’éditeur de thème mais est absent du storefront — ou se rend en dehors de la zone produit / dans un wrapper générique Apps — la section ne supporte pas complètement les app blocks Shopify.

Pour que le block se rende tout court, la section produit doit supporter explicitement les app blocks : déclarer un block {"type": "@app"} dans son schema et le rendre réellement avec {% content_for 'blocks' %} ou {% render block %}, à l’intérieur du layout produit. Une section qui déclare @app mais ne rend jamais les blocks acceptera Dialog dans l’éditeur mais n’affichera rien sur le storefront.

Demandez à votre développeur de thème de corriger la section produit, ou basculez sur le snippet manuel plus bas. Voir L’app block est ajouté, mais ne se rend pas correctement pour le diagnostic complet.

Thème non compatible avec Online Store 2.0

Si votre thème n’est pas compatible Online Store 2.0, vous ne pouvez pas utiliser les app blocks. Vous devrez ajouter les snippets Dialog manuellement.

Vous devrez aussi activer le script Dialog dans le customizer Shopify (section Embed apps, en haut à gauche).

Téléchargez les snippets

instant.liquid À placer dans le dossier snippets/ de votre thème.

instant.js À placer dans le dossier assets/ de votre thème.

instant.css À placer dans le dossier assets/ de votre thème.

Ajoutez les clés de traduction

instant.liquid affiche ses libellés via les clés de traduction Shopify ({{ 'blocks.instant.…' | t }}), vous devez donc ajouter une clé blocks à vos fichiers de langue (locales/*.json) — sinon le widget affiche des libellés vides. Ajoutez ceci à locales/en.default.json :

{
  "blocks": {
    "instant": {
      "ask-anything": "Ask anything...",
      "your-expert": "Your expert",
      "any-question": "Any questions on this product?",
      "diagnostic-cta": "Make your personal diagnostic"
    },
    "ai-input": {
      "your-question": "Ask your question"
    }
  }
}

Puis ajoutez la version traduite à chaque autre fichier de langue que vous prenez en charge — par exemple locales/fr.json :

{
  "blocks": {
    "instant": {
      "ask-anything": "Posez n'importe quelle question...",
      "your-expert": "Votre expert",
      "any-question": "Une question sur ce produit ?",
      "diagnostic-cta": "Faites votre diagnostic personnel"
    },
    "ai-input": {
      "your-question": "Posez votre question"
    }
  }
}

Utilisez-les dans votre thème

Rendez le snippet instant là où vous voulez le widget sur votre page produit :

{% render "instant" %}

Incluez le JS et le CSS :

<script src="{{ 'instant.js' | asset_url }}" defer="defer" type="module"></script>
<link rel="stylesheet" href="{{ 'instant.css' | asset_url }}" type="text/css" media="all">

Vérifiez que l’UI du panier se rafraîchit

C’est ce qui casse le plus souvent sur Shopify. Après l’install, ouvrez Dialog sur une page produit et ajoutez un produit — assurez-vous que votre icône de panier / bulle / mini-cart se met à jour sans rechargement. Passez d’abord par les vérifications de Problèmes d’ajout au panier ; si le snippet standard ne suffit pas, c’est une glue spécifique au thème que nous écrivons pour vous — écrivez à paul@askdialog.com avec le nom de votre thème, traité en général sous 48 heures.

Shopify headless (Hydrogen, storefronts custom)

Si votre storefront n’est pas rendu par l’Online Store (Hydrogen, frontend custom Next.js / Remix / Nuxt, app mobile), l’app Shopify gère toujours la synchro catalogue — installez-la normalement. Mais l’app block ne se rendra pas sur votre frontend custom car c’est une extension de l’Online Store.

Pour l’embed frontend dans un setup headless :

React / Hydrogen → utilisez @askdialog/dialog-react.
Vue / Nuxt → utilisez @askdialog/dialog-vue.
Autre chose (Svelte, templating server-side, vanilla JS) → utilisez @askdialog/dialog-sdk.

Vous câblerez les callbacks addToCart et getProduct contre la Storefront API (ou les API panier / produit que vous utilisez déjà). Voir la section développeurs pour le setup complet.

Étape suivante

Une fois l’app installée, vérifiez votre installation pour vous assurer que tout fonctionne de bout en bout.