Voici le code de recherche Shopify pour ajouter une barre de recherche à votre boutique Shopify. Saisissez votre clé API en vous connectant au tableau de bord Expertrec avec votre compte Google. (Tout est GRATUIT)
<script>
(fonction() {
var id = ‘Votre_API_Key’;
var ci_search = document.createElement(‘script’);
ci_search.type = ‘texte/javascript’;
ci_search.async = vrai ;
ci_search.src = ‘https://cse.expertrec.com/api/js/ci_common.js?id=’ + identifiant ;
var s = document.getElementsByTagName(‘script’)[0];
s.parentNode.insertBefore(ci_search, s);
})();
</script>
Obtenez GRATUITEMENT la barre de recherche Expertrec Shopify
Comment obtenir le code de recherche Shopify gratuitement : 3 méthodes expliquées
Le code de recherche Shopify suit la recherche du code. Pour cela, vous pouvez facilement exécuter la commande find en cliquant sur « Commande + F » sur Mac ou « CTRL + F » sur Windows. Obtenir une barre de recherche en haut vous aidera à trouver la requête exacte telle que recherchée. Mais voici le fait, nous ne sommes pas tous des codeurs. Voyons donc comment ajouter un code de recherche Shopify en utilisant trois méthodes :
- Utilisation de l’application de recherche intelligente Expertrec
- Copie du code depuis le tableau de bord Expertrec
- Utiliser la recherche personnalisée Google
1. Utilisation de la barre de recherche intelligente Expertrec
L’application Expertrec Smart Search est répertoriée sur Shopify App Store. Tout ce que vous avez à faire est d’installer l’application Expertrec Shopify Smart Search en suivant la méthode ci-dessous.
i. Cliquez sur https://apps.shopify.com/expertrec-smart-search-bar pour installer la barre de recherche. Ou vous pouvez aller sur la boutique d’applications Shopify et taper Expertrec Smart Search Bar.
ii. Une fois l’installation terminée, vous devez activer l’extension. Pour cela, cliquez sur l’application Installer comme indiqué ci-dessous.
iii. Expertrec Smart Search Bar vous propose un essai gratuit de 14 jours. Le meilleur, c’est que vous n’aurez besoin d’aucune carte de crédit pour accéder à l’essai gratuit. Cliquez simplement sur « Démarrer l’essai gratuit » et vous accédez au tableau de bord Expertrec.
iv. Assurez-vous que le code de recherche Expertrec Shopify est activé. Il dira qu’Expertrec Search est en ligne sur votre site.
v. Félicitations ! Vous avez installé le code de recherche Shopify sans aucun codage. C’est le moyen le plus simple et le meilleur d’installer une barre de recherche Shopify.
PS : Expertrec Search Bar est doté d’une personnalisation de recherche impressionnante et d’une intégration avec Google Analytics pour suivre tous les aspects de votre site Web. Il ne promet aucune publicité et constitue la meilleure option si vous envisagez d’apprendre le code pour ajouter une barre de recherche.
2. Copie du code depuis le tableau de bord Expertrec
Si vous souhaitez jouer avec le code, essayez de copier le code à partir du tableau de bord Expertrec. Eh bien, Expertrec a déjà l’application répertoriée dans l’App Store de Shopify. Pourtant, si vous voulez l’inverse, alors le voici :
i. Cliquez sur https://cse.expertrec.com et connectez-vous avec votre compte Google.
ii. Maintenant, vous entrez l’URL de votre site Web et une fois terminé, accédez au tableau de bord.
iii. Copiez le code du tableau de bord Expertrec, et n’oubliez pas de copier la balise HTML comme indiqué ci-dessous :
iv. Voici un rappel. Vous avez trois options à ajouter à la barre de recherche.
- Code HTML
- Utiliser le champ de recherche existant
- Sélecteur CSS
Si vous souhaitez utiliser votre champ de recherche existant, cliquez dessus et assurez-vous qu’il est activé.
v. Maintenant, connectez-vous à votre boutique Shopify et ouvrez le panneau d’administration.
vi. Ici, cliquez sur l’option Boutique en ligne et vous obtenez l’option Thème tout en haut.
vii. Sur le côté le plus à droite se trouve le bouton Actions.
viii. Une fois que vous avez cliqué dessus, un menu déroulant apparaîtra, comme vous pouvez le voir. Ici, cliquez sur l’option Modifier le code située en deuxième haut à partir du bas.
ix. Dans la section Layout, vous devez cliquer sur le theme.liquid afin d’ajouter le code Expertrec.
X. Comme vous pouvez le voir sur le côté droit, il y a beaucoup de code. Collez le code dans la section <head> comme indiqué ci-dessous :
XI. Si vous n’utilisez pas de barre de recherche existante, vous auriez alors copié la balise HTML. Maintenant, collez cette balise dans la section corps comme indiqué ci-dessous :
XII. Enregistrez le code.
XIII. Cliquez sur cette icône en forme d’œil pour prévisualiser votre boutique Shopify. Ici, vous pouvez voir la zone de recherche Expertrec.
Essayez la démo
Cliquez sur la barre de recherche et tapez une requête comme indiqué ci-dessous : La barre de recherche Expertrec apparaîtra avec la recherche vocale intégrée. Et je sais que vous connaissez déjà la croissance soudaine de la technologie vocale. Après tout, l’installation de la barre de recherche Expertrec garantira que les visiteurs du site Web n’auront pas à se fatiguer les doigts pour taper le produit alors qu’ils peuvent épeler et obtenir la liste.
3. Utilisation de la recherche personnalisée Google
C’est un outil gratuit pour ajouter une barre de recherche Shopify. Tout ce dont vous avez besoin est d’installer la recherche personnalisée Google, et c’est tout. Mais comme vous le savez, tout a un prix. La même chose se produit lors de l’installation de Google Custom Search.
Contrairement à la recherche personnalisée Expertrec, la recherche personnalisée Google affichera des annonces. Beaucoup de publicités. Et ce n’est jamais une bonne idée de perdre vos précieux clients en cliquant sur ces publicités. De plus, ces publicités peuvent même transférer les visiteurs du site Web vers un autre site Web qui pourrait être votre concurrent potentiel.
En mettant ces pertes de côté, c’est un outil gratuit à utiliser pour débuter. Mais ne convient pas à une croissance à long terme. Voici comment installer GSS :
i. Cliquez sur https://cse.google.com et cliquez sur Commencer pour continuer.
Après cela, entrez l’URL de votre site Web.
ii. Vous pouvez également nommer votre CSE. Cliquez sur créer.
iii. Vous pourrez accéder à un nouveau moteur de recherche pour votre site Web. Cliquez sur Obtenir le code.
iv. Copiez le code.
v. Accédez au panneau d’administration de Shopify. Cliquez sur Actions -> Modifier le code.
vi. Dans Layout -> theme.liquid -> <body>, copiez le code entre les deux <div> comme indiqué ci-dessous :
vii. Vous avez immédiatement ajouté le Google CSE.
Ouvrez votre site Web et il affichera quelque chose comme ceci (propulsé par Google) :
Bonus incroyable affiché par la barre de recherche Expertrec
La barre de recherche Expertrec vous propose un contrôle approfondi sur votre barre de recherche. Vous pouvez faire tout et n’importe quoi sans avoir besoin d’apprendre le code. Voici la liste des points bonus incroyables que vous obtenez en installant la barre de recherche Expertrec.
API de recherche
J’espère que vous vous souvenez du code initial que nous avons ajouté. Il existe une option pour saisir Your_API_key. Une fois connecté au tableau de bord Expertrec, vous pouvez accéder à votre API et la copier comme indiqué ci-dessous :
Il est unique à chaque boutique et sert donc d’identifiant pour chaque boutique Shopify.
Les paramètres de recherche deviennent pratiques.
Lorsque vous accédez au tableau de bord Expertrec après l’installation de l’application, plusieurs paramètres permettent de mettre à niveau votre barre de recherche Shopify. Tout se fait sans avoir besoin du code de recherche Shopify.
Examinons les trois sections des paramètres de recherche :
- Poids
- Champs de boost
- Synonymes
Poids
Chaque requête de recherche traite un certain algorithme pour afficher les résultats. Les éléments que vous souhaitez figurer en haut du résultat peuvent être personnalisés à l’aide de cette option. Chaque fois qu’un utilisateur saisit la requête, tous les champs privilégiés en fonction de leur poids sont traités par l’algorithme Expertrec. De cette façon, vous pouvez obtenir les meilleurs résultats en termes de pertinence. Les résultats qui correspondent aux premiers champs sélectionnés recevront un classement plus élevé.
Champs de boost
Les champs Boost donnent une attention supplémentaire à la requête sélectionnée afin que l’on puisse obtenir un champ particulier en haut du résultat de la recherche. Par exemple, si votre boutique Shopify contient des t-shirts de plusieurs marques. Ici, vous pouvez appliquer ce filtre à « Nike » pour afficher son résultat en haut. De cette manière, en définissant vos champs boost, vous pouvez donner la priorité à certains produits spécifiques par rapport à d’autres produits similaires.
Synonymes
Avouons-le. Les utilisateurs n’ont pas besoin de rechercher la requête exacte similaire à votre mot-clé. Cela signifie que si un utilisateur recherche « planificateur annuel », il peut alors rechercher « livre annuel », « copie de planification », « livret annuel », etc. Ici, l’utilisation de cette fonctionnalité de synonymes vous aiderait également à classer ces produits. Vous pouvez facilement trouver la tendance en fonction des analyses de recherche et définir les synonymes en fonction des visiteurs de votre site Web. Très probablement, leur requête de recherche sera très différente de la vôtre.
Personnalisez l’interface utilisateur de votre barre de recherche
La personnalisation de l’interface utilisateur de la barre de recherche Shopify consiste à apporter des modifications à la barre de recherche elle-même. Il met en avant la convivialité et les résultats, filtre avec plusieurs fonctionnalités supplémentaires.
Disposition de la recherche
Par défaut, la présentation de recherche se superpose. Cela signifie que les résultats de la recherche vont apparaître sur la même page en superposant la page précédente.
En revanche, si vous souhaitez rechercher des résultats sur une autre page, vous pouvez y accéder en cliquant sur cette option déroulante. Entrez le chemin où vous souhaitez afficher les résultats de la recherche ainsi que les paramètres de requête. Assurez-vous de suivre les instructions d’ajout d’une balise ci-search-results afin d’afficher le résultat sur le chemin /différent.html comme indiqué ci-dessous :
Éditeur CSS personnalisé
Comme toujours, sans apprendre à coder, vous pouvez modifier l’interface utilisateur de votre saisie semi-automatique en jouant avec ce code.
Champ 1 : Afin de changer la couleur de la saisie semi-automatique,
changer la couleur à la ligne 9 comme
La couleur rouge;
Champ 2 : Afin de changer la couleur de la description,
changez la couleur de la ligne 14 comme
la couleur verte;
Champ 3 : À la fin, changez la couleur du texte en gras en
couleur marron;
Vous êtes prêt. Cliquez simplement sur mettre à jour pour enregistrer les paramètres et ouvrez votre boutique en ligne pour assister aux changements.
Pagination
La pagination est similaire au défilement infini. Par exemple, la navigation signifie naviguer dans le menu, la pagination signifie naviguer dans les pages. Vous pouvez avoir des centaines de produits sur votre boutique en ligne. Après quelques résultats en haut, vous pouvez passer à la page suivante pour faire défiler d’autres produits. C’est là qu’intervient le rôle de la pagination. Même en recherchant sur Google, il existe une option pour naviguer dans les pages comme indiqué ci-dessous :
Dans le tableau de bord Expertrec, vous pouvez personnaliser l’interface utilisateur de pagination en jouant avec ce code CSS.
Filtres
Une fois les facettes activées, vous pouvez afficher des filtres dans les résultats de recherche. Cela aide les visiteurs à affiner la page de résultats et à obtenir le produit souhaité à un rythme rapide. Par exemple, vous pouvez sélectionner plusieurs champs comme indiqué ci-dessous :
Vous pouvez sélectionner n’importe lequel des filtres et créer le vôtre.
Assurez-vous de mettre à jour les paramètres afin qu’ils soient reflétés dans la barre de recherche.
Caractéristiques diverses
Il existe d’autres fonctionnalités qui sont aussi importantes que les précédentes.
- Vous pouvez activer/désactiver la recherche vocale en basculant la barre. (C’est activé par défaut)
- Vous pouvez autoriser la saisie semi-automatique en activant la barre « Rechercher pendant la frappe ». (ON par défaut)
- Essayez d’activer la mise au point automatique dans la barre de recherche.
- Les suggestions de recherche sont importantes. (ON par défaut)
- Vous pouvez également désactiver la fontawesome Expertrec pour être témoin de la fontawesome de votre site Web.
- Vous pouvez définir certaines conditions de recherche.
- Vous pouvez également afficher la suggestion de conception alternative en activant la bascule.
Résumer – Code de recherche Shopify
Expertrec fournit la meilleure barre de recherche Shopify. Vous n’aurez même pas besoin d’apprendre le code ou de le rechercher. Il serait préférable d’installer Expertrec Smart Search Bar à 9 $/mois et de vous concentrer sur le renforcement de la présence de votre site Web. Après cela, tout ce qui concerne la recherche sera géré par Expertrec.
Bien que le choix vous appartient toujours, vous pouvez installer Expertrec Smart Search Bar gratuitement et bénéficier d’un essai gratuit de 14 jours. L’équipe Expertrec est toujours là pour vous aider avec toute requête liée au moteur de recherche personnalisé. Vous pouvez les contacter en créant un ticket d’assistance.
Obtenez GRATUITEMENT la barre de recherche Expertrec Shopify
