Aquí está el código de búsqueda de Shopify para agregar una barra de búsqueda a tu tienda Shopify. Ingrese su clave API iniciando sesión en el panel de Expertrec con su cuenta de Google. (Es todo GRATIS)
<guión>(función() {var id = 'Su_API_Key';var ci_search = document.createElement('script');ci_search.type = 'texto/javascript';ci_search.async = verdadero;ci_search.src = 'https://cse.expertrec.com/api/js/ci_common.js?id=' + id;var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(ci_search, s);})();</script>
Cómo obtener el código de búsqueda de Shopify gratis: 3 formas explicadas
El código de búsqueda de Shopify sigue la búsqueda del código. Para ello, puede ejecutar fácilmente el comando de búsqueda haciendo clic en “Comando + F” en Mac o “CTRL + F” en Windows. Obtener una barra de búsqueda en la parte superior le ayudará a encontrar la consulta exacta tal como se busca. Pero el hecho es que no todos somos codificadores. Entonces, profundicemos en agregar un código de búsqueda de Shopify usando tres métodos:
- Uso de la aplicación de búsqueda inteligente Expertrec
- Copiar código del panel de Expertrec
- Usando la búsqueda personalizada de Google
Obtén la barra de búsqueda de Shopify GRATIS (sin código de aprendizaje)
1. Uso de la barra de búsqueda inteligente de Expertrec
La aplicación Expertrec Smart Search aparece en Shopify App Store. Todo lo que tienes que hacer es instalar la aplicación Expertrec Shopify Smart Search siguiendo el método a continuación.
i. Haga clic en https://apps.shopify.com/expertrec-smart-search-bar para instalar la barra de búsqueda. O puedes ir a la tienda de aplicaciones Shopify y escribir Expertrec Smart Search Bar.
ii. Una vez que se completa la instalación, debe habilitar la extensión. Para eso, haga clic en Instalar aplicación como se muestra a continuación.
III. Expertrec Smart Search Bar le ofrece una prueba gratuita de 14 días. La mejor parte es que no necesitarás ninguna tarjeta de crédito para acceder a la prueba gratuita. Simplemente haga clic en “Iniciar prueba gratuita” y accederá al panel de Expertrec.
IV. Asegúrese de que el código de búsqueda de Expertrec Shopify esté habilitado. Dirá que Expertrec Search está activo en su sitio.
¡Felicidades! Has instalado Shopify Search Code sin ningún tipo de codificación. Es la mejor y más fácil forma de instalar una barra de búsqueda de Shopify.
PD: La barra de búsqueda de Expertrec cuenta con una increíble capacidad de personalización de búsqueda e integración con Google Analytics para realizar un seguimiento de cada aspecto de su sitio web. Promete cero anuncios y es la mejor opción si planeas aprender el código para agregar una barra de búsqueda.
2. Copiar código del panel de Expertrec
Si quieres jugar con el código, intenta copiar el código desde el panel de Expertrec. Bueno, Expertrec ya tiene la aplicación incluida en la Shopify App Store. Sin embargo, si quieres lo contrario, aquí lo tienes:
i. Haga clic en https://cse.expertrec.com e inicie sesión con su cuenta de Google.
ii. Ahora, ingresa la URL de su sitio web y, una vez hecho esto, avanza al panel.
III. Copie el código del panel de Expertrec y no olvide copiar la etiqueta HTML como se muestra a continuación:
IV. Aquí tienes un recordatorio. Tienes tres opciones para agregar a la barra de búsqueda.
- Código HTML
- Usar el cuadro de búsqueda existente
- Selector de CSS
Si desea utilizar su cuadro de búsqueda existente, haga clic en él y asegúrese de que esté habilitado.
v. Ahora, inicia sesión en tu tienda Shopify y abre el panel de administración.
vi. Aquí, haga clic en la opción Tienda en línea y obtendrá la opción Tema en la parte superior.
vii. En el lado derecho, está el botón Acciones.
viii. Una vez que hagas clic en él, aparecerá un menú desplegable, como puedes ver. Aquí, haga clic en la opción Editar código ubicada en la segunda parte superior desde abajo.
IX. En la sección Diseño, debe hacer clic en theme.liquid para agregar el código Expertrec.
X. Como puede ver en el lado derecho, hay mucho código disponible. Pegue el código en la sección <head> como se muestra a continuación:
xi. Si no está utilizando una barra de búsqueda existente, habrá copiado la etiqueta HTML. Ahora, pega esa etiqueta en la sección del cuerpo como se muestra a continuación:
xii. Guarde el código.
xiii. Haz clic en el ícono de ese ojo para obtener una vista previa de tu tienda Shopify. Aquí puede ver el cuadro de búsqueda de Expertrec.
Pruebe la demostración
Haga clic en la barra de búsqueda y escriba una consulta como se muestra a continuación: La barra de búsqueda de Expertrec aparecerá con búsqueda por voz incorporada. Y sé que ya conoce el repentino crecimiento de la tecnología de voz. Después de todo, instalar la barra de búsqueda de Expertrec garantizará que los visitantes del sitio web no tengan que forzar los dedos para escribir el producto cuando pueden deletrearlo y obtener el listado.
3. Uso de la búsqueda personalizada de Google
Es una herramienta gratuita para agregar una barra de búsqueda de Shopify. Todo lo que necesitas es instalar la Búsqueda personalizada de Google y eso es todo. Pero, como sabes, todo tiene un precio. Lo mismo sucede al instalar la Búsqueda personalizada de Google.
A diferencia de la búsqueda personalizada de Expertrec, la búsqueda personalizada de Google mostrará anuncios. Muchos anuncios. Y nunca es una buena idea perder a sus valiosos clientes haciendo clic en estos anuncios. Además, estos anuncios pueden incluso transferir a los visitantes del sitio web a otro sitio web que podría ser su competidor potencial.
Dejando a un lado estas pérdidas, es una herramienta gratuita que se puede utilizar al comenzar. Pero no es adecuado para un crecimiento a largo plazo. Aquí se explica cómo instalar GSS:
i. Haga clic en https://cse.google.com y haga clic en Comenzar para continuar.
Después de eso, ingrese la URL de su sitio web.
ii. También puede nombrar su CSE. Haga clic en crear.
III. Podrás acceder a un nuevo motor de búsqueda para tu sitio web. Haga clic en Obtener código.
IV. Copia el código.
v. Vaya al panel de administración de Shopify. Haga clic en Acciones -> Editar código.
vi. En Layout -> theme.liquid -> <body>, copie el código entre los dos <div> como se muestra a continuación:
vii. Ha agregado Google CSE de inmediato.
Abra su sitio web y se mostrará algo como esto (con tecnología de Google):
Bonificación increíble que aparece en la barra de búsqueda de Expertrec
La barra de búsqueda de Expertrec le ofrece un gran control sobre su barra de búsqueda. Puedes hacer cualquier cosa sin necesidad de aprender código. Aquí está la lista de increíbles puntos de bonificación que obtiene al instalar la barra de búsqueda de Expertrec.
API de búsqueda
Espero que hayas recordado el código inicial que agregamos. Hay una opción para escribir Your_API_key. Una vez que inicie sesión en el panel de Expertrec, podrá acceder a su API y copiarla como se muestra a continuación:
Es exclusivo de cada tienda y, por lo tanto, actúa como identificador de cada tienda Shopify.
La configuración de búsqueda se vuelve útil.
Cuando te diriges al panel de Expertrec después de la instalación de la aplicación, hay varias configuraciones para actualizar tu barra de búsqueda de Shopify. Todo se hace sin el requisito del código de búsqueda de Shopify.
Tratemos con las tres secciones de la configuración de búsqueda:
- Pesos
- Impulsar campos
- Sinónimos
Pesos
Cada consulta de búsqueda utiliza un determinado algoritmo para mostrar los resultados. Las cosas que desea que estén en la parte superior del resultado se pueden personalizar usando esta opción. Cada vez que un usuario ingresa a la consulta, todos los campos a los que se les da preferencia según su peso son manejados por el algoritmo Expertrec. De esta manera, puede obtener los mejores resultados en relevancia con él. Los resultados que coincidan con los primeros campos seleccionados recibirán una clasificación más alta.
Impulsar campos
Los campos de refuerzo dan un enfoque adicional a la consulta seleccionada para que uno pueda obtener un campo en particular en la parte superior del resultado de búsqueda. Por ejemplo, si tu tienda Shopify contiene camisetas de varias marcas. Aquí puedes aplicar este filtro a “Nike” para mostrar su resultado en la parte superior. De esta forma, al definir tus campos de impulso, podrás dar prioridad a algunos productos específicos sobre otros productos similares.
Sinónimos
Seamos sinceros. Los usuarios no necesitan buscar la consulta exacta similar a su palabra clave. Significa que si un usuario busca “planificador anual”, puede buscar “libro anual”, “copia de planificación”, “folleto anual”, etc. En este caso, utilizar esta función de sinónimos también le ayudará a clasificar estos productos. Puede encontrar fácilmente la tendencia basándose en análisis de búsqueda y establecer sinónimos según los visitantes de su sitio web. Lo más probable es que su consulta de búsqueda sea bastante diferente a la suya.
Personaliza la interfaz de usuario de tu barra de búsqueda
Personalizar la interfaz de usuario de la barra de búsqueda de Shopify consiste en realizar cambios en la propia barra de búsqueda. Destaca la facilidad de uso y los resultados, filtros con varias funciones adicionales.
Diseño de búsqueda
De forma predeterminada, el diseño de búsqueda se superpone. Significa que los resultados de la búsqueda aparecerán en la misma página superponiéndose a la página anterior.
Por otro lado, si desea buscar resultados en una página diferente, puede hacerlo haciendo clic en esta opción desplegable. Ingrese la ruta donde desea mostrar los resultados de la búsqueda y también los parámetros de consulta. Asegúrese de seguir las pautas para agregar una etiqueta ci-search-results para mostrar el resultado en la ruta /diferente.html como se muestra a continuación:
Editor CSS personalizado
Como siempre, sin aprender a codificar, puedes cambiar la interfaz de usuario de tu autocompletar jugando con este código.
Campo 1: Para cambiar el color de autocompletar,
cambia de color en la línea 9 como
color rojo;Campo 2: Para cambiar el color de la descripción,
cambie el color en la línea 14 como
color verde;Campo 3: al final, cambie el color del texto en negrita a
color marrón;Estas listo. Simplemente haga clic en actualizar para guardar la configuración y abra su tienda en línea para presenciar los cambios.
Paginación
La paginación es similar al desplazamiento infinito. Por ejemplo, navegación significa navegar por el menú, paginación significa navegar por las páginas. Es posible que tengas cientos de productos en tu tienda online. Después de algunos resultados en la parte superior, puede ir a la página siguiente para desplazarse por otros productos. Ahí es donde entra en juego el papel de la paginación. Incluso mientras busca en Google, existe una opción para navegar por las páginas como se muestra a continuación:
En el panel de Expertrec, puede personalizar la interfaz de usuario de paginación jugando con este código CSS.
Filtros
Una vez que habilite las facetas, podrá mostrar filtros en los resultados de búsqueda. Ayuda a los visitantes a reducir la página de resultados y obtener el producto deseado a un ritmo rápido. Por ejemplo, puede seleccionar varios campos como se muestra a continuación:
Puede seleccionar cualquiera de los filtros y crear el suyo propio.
Asegúrese de actualizar la configuración para que se refleje en la barra de búsqueda.
Funciones varias
Hay algunas otras características que son tan importantes como las anteriores.
- Puede habilitar/deshabilitar la búsqueda por voz alternando la barra. (Está activado de forma predeterminada)
- Puede permitir el autocompletado alternando la barra “buscar mientras escribe”. (Activado de forma predeterminada)
- Intente habilitar el enfoque automático en la barra de búsqueda.
- Las sugerencias de búsqueda son importantes. (Activado de forma predeterminada)
- También puede desactivar el fontawesome de Expertrec para presenciar el fontawesome de su sitio web.
- Puedes establecer algunas condiciones de búsqueda.
- También puede mostrar la sugerencia de diseño alternativo habilitando la opción.
Resumiendo: Código de búsqueda de Shopify
Expertrec proporciona la mejor barra de búsqueda de Shopify. Ni siquiera necesitarás aprender el código ni buscarlo. Lo mejor sería instalar la barra de búsqueda inteligente Expertrec a $ 9 al mes y concentrarse en desarrollar la presencia de su sitio web. Después de eso, Expertrec se encargará de todo lo relacionado con la búsqueda.
Aunque la elección siempre es tuya, puedes instalar Expertrec Smart Search Bar de forma gratuita y obtener una prueba gratuita de 14 días. El equipo de Expertrec siempre está ahí para ayudarle con cualquier consulta relacionada con el motor de búsqueda personalizado. Puede comunicarse con ellos generando un ticket de soporte.
Obtén la barra de búsqueda de Shopify GRATIS (sin código de aprendizaje)
