Search

Search apporte la recherche produit de Dialog à l’expérience de recherche de votre boutique. À la place du matching par mots-clés de Shopify, vos visiteurs obtiennent des suggestions de produits classées par IA pendant la frappe, et une page de résultats propulsée par l’IA à la soumission.

Elle se compose de trois briques installables indépendamment via l’éditeur de thème Shopify :

Brique	Ce qu’elle fait	Où elle vit
Autocomplete de recherche	Ajoute les suggestions produit Dialog au formulaire de recherche existant de votre thème	Toggle d’app embed
Dialog search bar	Un champ de recherche prêt à poser : barre complète ou icône compacte qui se déploie, idéale dans le header	App block
Dialog search results	Remplace la grille de résultats native de votre page `/search` par des produits classés par Dialog, avec live search et pagination	App block (template search uniquement)

Avant de commencer

Installez d’abord l’app Shopify Dialog : Search est livrée avec.
Les blocs barre de recherche et résultats nécessitent un thème Online Store 2.0 (app blocks).
Choisissez votre configuration :
- Garder la barre de recherche de votre thème → activez uniquement l’app embed autocomplete.
- Remplacer ou ajouter un champ de recherche → utilisez le bloc Dialog search bar (autocomplete intégré).
- Dans les deux cas, ajoutez le bloc Dialog search results pour servir des résultats classés par IA sur /search.

Activer l’autocomplete sur la recherche de votre thème

Cette option enrichit le formulaire de recherche que votre thème affiche déjà, sans aucun changement de mise en page.

Dans votre admin Shopify, allez dans Boutique en ligne → Thèmes → Personnaliser.
Ouvrez Intégrations d’applications (App embeds, dans la barre latérale gauche de l’éditeur de thème).
Trouvez l’embed Dialog et activez Enable Dialog search autocomplete.
Enregistrez.

Quand un visiteur tape dans votre champ de recherche, un panneau de suggestions Dialog s’ouvre sous l’input avec les produits correspondants. Échap ou un clic à l’extérieur le ferme.

Deux comportements à connaître :

La recherche native est toujours préservée. Soumettre le formulaire lance toujours la recherche normale de votre boutique : Dialog n’ajoute que la couche de suggestions. (Pour que la page de résultats elle-même passe à l’IA, ajoutez le bloc de résultats.)
Le panneau s’adapte à votre thème. Rayon des coins, fond et couleur de texte sont dérivés de l’input de recherche de votre thème, pour des suggestions à l’air natif.

Dialog détecte automatiquement le formulaire de recherche de votre thème. Si votre thème est fortement personnalisé et que les suggestions n’apparaissent jamais, renseignez Search form CSS selector dans le même app embed pour pointer vers votre formulaire (par exemple form[action="/search"]). Sinon, laissez vide.

Ajouter le bloc barre de recherche

L’app block Dialog search bar vous donne un champ de recherche avec l’autocomplete Dialog intégré : pas besoin du toggle d’app embed pour lui.

Dans l’éditeur de thème, 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).

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.

Ajouter le bloc de résultats de recherche

Le bloc Dialog search results transforme votre page /search en page de résultats propulsée par l’IA. Il n’est disponible que sur le template search.

Dans l’éditeur de thème, utilisez le sélecteur de template (barre du haut) pour ouvrir le template Recherche.
Cliquez sur Ajouter une section (ou Ajouter un bloc dans la section de résultats) et choisissez Dialog search results.
Ajustez Products per page et enregistrez.

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 classée par Dialog, avec ajout au panier sur chaque carte,
la live search : quand la page héberge une barre de recherche Dialog, la grille se met à jour pendant la frappe, 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.

Vérifier votre installation

Sur votre boutique :

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 les suggestions n’apparaissent jamais, revérifiez le toggle d’app embed et consultez Dialog n’est pas visible.