En este artículo aprenderás a instalar Brilliant en tu tienda, activar la conexión inicial y comprobar que todos los elementos funcionan correctamente antes de empezar a vender con IA.
1. Requisitos previos
Antes de comenzar, asegúrate de cumplir con lo siguiente para evitar errores durante el proceso:
- Contar con una tienda activa en la plataforma Shopify.
- Tener permisos de administrador o permisos suficientes para instalar aplicaciones dentro de tu panel de control.
2. Instalación desde el Marketplace
Para añadir Brilliant a tu ecommerce, sigue estos pasos:
-
Localización de la app:
Accede a tu panel de Shopify, ve a la sección Apps y selecciona Shopify App Store.
-
Búsqueda:
Escribe "Brilliant AI assistant" en el buscador de la tienda de aplicaciones.
-
Instalación:
Haz clic en el botón Instalar. Shopify te redirigirá a una pantalla donde se detallan los permisos necesarios. Pulsa de nuevo en Instalar para aceptar y completar la conexión.
3. Configuración inicial tras la instalación
Una vez confirmada la instalación, accede a Brilliant desde tu lista de aplicaciones en Shopify para entrar en el backoffice.
Primeros pasos recomendados
-
Creación del agente:
Inicia la creación del agente para que la IA analice tu catálogo. Este proceso es automático pero puede tardar varias horas dependiendo del volumen de productos. Puedes seguir usando tu tienda normalmente mientras tanto.
-
Activación del agente:
Una vez procesado el catálogo, asegúrate de marcar el agente como Activo en el panel de control.
-
Habilitar el widget en el tema:
Para que el asistente sea visible, ve a Tienda online / Temas / Personalizar. En la sección de Incrustaciones de aplicación, activa el interruptor de Brilliant y guarda los cambios.
-
Mostrar botón de acciones contextuales de Brilliant sobre las tarjetas de producto:
Una vez que hayas activado el widget de Brilliant en el tema, además de mostrarse el botón principal de Brilliant en la esquina inferior de la pantalla, también se deberían empezar a mostrar los botones de acciones contextuales sobre las tarjetas de producto de tu web.
Si estos botones no se muestran es porque se dan uno de los siguientes casos:
-
Utilizas un tema público de Shopify sin modificaciones en el código. Si no ves los botones de acciones contextuales sobre las tarjetas de producto de tu web y estás usando un tema público de Shopify, es porque Brilliant aún no ha llegado a dar soporte a ese tema. Si este es el caso, por favor, contáctanos al correo support@getbrilliant.ai indicándonos el dominio de tu ecommerce y el nombre del tema público que estás utilizando. Nuestros desarrolladores actualizarán el soporte de Brilliant para tu tema con la máxima prioridad.
-
Utilizas un tema público de Shopify con modificaciones en el código, o utilizas un tema privado personalizado. Si este fuese el caso, tendrás que añadir un pequeño código html en tu tema para que Brilliant pueda mostrar los botones de acciones contextuales sobre las tarjetas de producto. El código que tienes que añadir en cada card de producto es
data-bri-product-id="id de producto". En código Liquid de shopify, lo normal es que tengas que poner algo así:data-bri-product-id="{{ product.id }}".Tienes que ponerlo en todas las tarjetas de producto donde quieras mostrar el botón contextual de Brilliant. Lo habitual es tener el fichero product-card.liquid o similar, y que este componente se reutilize en varios tipos de página como el index, productos de una colección, resultados de búsqueda, etc., por lo que sólo tendrás que añadir ese código en ese fichero, y ya se aplicará a todo tu tema. El código anterior es un atributo html que tienes que poner en el elemento del DOM padre que engloba cada tarjeta de producto.
Salvo en casos muy excepcionales, lo normal es que puedas poner este código en un elemento HTML ya existente en tu tema; es decir, no debería ser necesario que crees un elemento nuevo con este atributo que englobe toda la tarjeta de producto.
El objetivo es generar un código similar al siguiente:
<body> ... <div class="my-theme-product-card" data-bri-product-id="86461581684"> ... inner html of this product card </div> ... <div class="my-theme-product-card" data-bri-product-id="95168765168"> ... inner html of this product card </div> ... <div class="my-theme-product-card" data-bri-product-id="21564846848"> ... inner html of this product card </div> </body>
-
-
Personalización de estilos:
En la página de gestión de Brilliant, ve a Configuración / Estilos generales y ajusta los colores y la tipografía para que el asistente se parezca lo más posible a tu tienda:
4. Comprobaciones de funcionamiento
Para verificar que la instalación ha sido un éxito, navega por tu tienda y comprueba los siguientes elementos:
-
Botón flotante: Debe aparecer el botón de activación de Brilliant en la esquina de tu sitio web.
-
Product Cards: Debes ver los chips o etiquetas inteligentes integrados en las tarjetas de producto.
-
Interacción: Realiza una pregunta al asistente y verifica que las respuestas se generen correctamente basándose en tu catálogo.
¿Quieres saber más?