Installer Search sur Shopify

Cette page installe Search sur une boutique Shopify. Elle suit l’onglet Installation de la page Search de l’app Dialog : une checklist de trois étapes, chacune faite dans l’éditeur de thème Shopify.

Activer l’autocomplétion de la recherche : les suggestions produit Dialog sur le champ de recherche que votre thème a déjà.
Ajouter la page de résultats de recherche : les résultats Dialog sur votre page /search.
Ajouter une barre de recherche (facultatif) : seulement si votre thème n’a pas de champ de recherche.

Avant de commencer

Installez d’abord l’app Shopify Dialog : Search est livrée avec.
La page de résultats et la barre de recherche sont des app blocks : elles nécessitent un thème Online Store 2.0.
Travaillez sur votre thème publié. La checklist ouvre l’éditeur de thème sur lui, et ne vérifie que ce thème.

Ouvrir la checklist d’installation

Dans l’app Dialog, ouvrez Search dans la navigation (sous Sur votre boutique), puis l’onglet Installation. La page Search s’ouvre sur cet onglet tant qu’il reste une étape à faire.

https://app.askdialog.com/organization/{your-org-slug}/search-settings?tab=setup

La checklist Installez Search sur votre thème liste les étapes dans l’ordre. Chaque ligne indique où elle en est :

Ouvrir l’éditeur de thème : l’étape reste à faire. Le bouton ouvre l’éditeur de thème dans un nouvel onglet, au bon endroit.
Un message d’attente : vous avez ouvert l’éditeur et Dialog attend votre thème. Enregistrez dans Shopify puis revenez : Dialog vérifie votre thème tout seul.
Détecté sur votre thème publié : l’étape est faite.

Activer l’autocomplétion de la recherche

Cette étape ajoute les suggestions produit Dialog au champ de recherche que votre thème affiche déjà, sans aucun changement de mise en page.

Dans l’onglet Installation, sur la ligne Activer l’autocomplétion de la recherche, cliquez sur Ouvrir l’éditeur de thème. L’éditeur de votre thème publié s’ouvre sur Intégrations d’applications (App embeds), avec l’embed Dialog AI Modal activé.
Dans l’embed Dialog AI Modal, cochez Enable Dialog search autocomplete. La case est décochée par défaut sur chaque thème : activer l’embed ne suffit pas.
Enregistrez, puis revenez dans l’app Dialog : la ligne affiche Détecté sur votre thème publié.

Le même embed porte les autres réglages de l’autocomplétion :

Réglage	Ce qu’il fait
Search suggestions style	Dialog search overlay (par défaut) : une couche de recherche s’ouvre par-dessus la page dès que le champ prend le focus, aux couleurs de l’embed. Panel under the theme’s input : les suggestions s’ouvrent sous votre champ pendant la frappe, avec son apparence.
Overlay products layout	List (par défaut) ou Grid : la disposition des produits dans l’overlay. Sans effet sur le panneau.
Search form CSS selector (optional)	Laissez vide : Dialog trouve tout seul le formulaire de recherche de votre thème. Renseignez-le seulement si les suggestions n’apparaissent jamais sur un thème très personnalisé : voir Les suggestions n’apparaissent pas sous le champ de recherche.

Soumettre le formulaire lance toujours la recherche normale de votre boutique : Dialog n’ajoute que les suggestions. Pour servir les résultats Dialog sur la page de résultats elle-même, ajoutez la page de résultats.

Ajouter la page de résultats de recherche

Cette étape transforme votre page /search en page de résultats Dialog, avec le bloc Dialog search results. Le bloc n’est disponible que sur le template Recherche.

Dans l’onglet Installation, sur la ligne Ajouter la page de résultats de recherche, cliquez sur Ouvrir l’éditeur de thème. L’éditeur de thème s’ouvre sur votre template Recherche, avec le bloc Dialog search results déjà ajouté.
Ajustez Products per page si besoin, puis enregistrez.
Revenez dans l’app Dialog : la ligne affiche Détecté sur votre thème publié.

Réglage	Ce qu’il fait
Products per page	Taille de la grille par page : 6 à 48 produits, 12 par défaut.

Ce que voient vos visiteurs :

une grille de produits avec les résultats Dialog, avec ajout au panier sur chaque carte,
la live search : taper dans le formulaire de recherche de votre thème sur la page de résultats met la grille à jour, et le paramètre ?q= reste synchronisé pour une URL partageable,
une pagination numérotée,
des états de chargement, vide et erreur.

Pour éviter les résultats en double, le bloc masque la grille de résultats native de votre thème et le panneau de recherche prédictive sur cette page. Si le runtime Dialog ne peut pas charger, les résultats natifs du thème restent visibles : vos visiteurs ont toujours des résultats.

Ajouter une barre de recherche

Dans l’onglet Installation, la ligne Ajouter une barre de recherche est marquée Facultatif : ajoutez le bloc Dialog search bar seulement si votre thème n’a pas de champ de recherche. La ligne n’a pas de bouton vers l’éditeur de thème et n’est jamais cochée : vous ajoutez le bloc vous-même, là où vous le voulez.

Dans votre admin Shopify, allez dans Boutique en ligne → Thèmes → Personnaliser, puis sélectionnez la section où vous voulez la barre (votre header, une rangée d’annonce, ou n’importe quelle section).
Cliquez sur Ajouter un bloc et choisissez Dialog search bar.
Choisissez le réglage Display et enregistrez.

Réglage	Ce qu’il fait
Display	Full search bar : l’input est toujours visible. Search icon : une icône compacte ; au clic, une bande de recherche pleine largeur se déploie par-dessus la rangée où elle se trouve (comme la recherche de header native de Shopify), avec un bouton de fermeture. Échap la referme.
Placeholder	Placeholder optionnel de l’input. Laissez vide pour utiliser la traduction intégrée de Dialog dans la langue de la boutique (anglais, français, espagnol, allemand, italien).

La barre a l’autocomplétion intégrée : elle n’a pas besoin de Enable Dialog search autocomplete, mais suit le réglage Search suggestions style de l’embed Dialog AI Modal. Soumettre la barre navigue vers votre page /search avec la requête. Si JavaScript est indisponible, la variante icône devient un simple lien vers /search : la recherche ne casse jamais.

Vérifier votre installation

Dans l’onglet Installation, les deux premières lignes affichent Détecté sur votre thème publié. Puis, sur votre boutique :

Cliquez ou tapez dans le champ de recherche → les suggestions produit Dialog apparaissent.
Soumettez une requête → /search affiche la grille de produits Dialog (et une seule grille).
Ajoutez un produit au panier depuis une carte de résultat → votre panier se met à jour.
Changez de page via la pagination → la grille et l’URL se mettent à jour.

Si quelque chose ne fonctionne pas, consultez Dépanner Search.