Tutorial básico de Personal Shopper

Siga este tutorial para aprender cómo crear un Personal Shopper.

Para los requisitos previos, consulte la documentación Creación de Personal Shopper. Debe tener un catálogo de productos válido y al menos un modelo de recomendación habilitado para su Catálogo. Además, para este tutorial, debe tener una URL de inserción válida en su sitio y el selector de inserción correspondiente.

1. Crear desde la lista de Shopper

Figura 1: Lista de Shoppers

Haga clic en "Crear shopper para Catálogo Predeterminado" para iniciar el proceso de creación de su primer Personal Shopper.

2. Definir configuración de nivel de widget

Figura 2: Configuración de nivel de widget

Haga clic en "Configuración general" a la izquierda e introduzca su Embed URL y Embed Selector en el grupo de configuración "Widget Level Config" en la barra lateral derecha. En la Figura 2 los valores introducidos son:

• Embed URL: https://fp-dev-1.myshopify.com/pages/personal-shopper
• Embed Selector: #fp_personal_shopper - esto apuntará a un elemento HTML con id="fp_personal_shopper".

3. Seleccionar origen del producto

Figura 3: Configuración de origen del producto

El siguiente paso es configurar el ajuste de Origen del producto. Haga clic en el componente de recomendación y luego en "Cambiar" debajo del ajuste "Origen del producto" en la barra lateral derecha.

En la ventana emergente, establezca el ajuste "Modelo" en "Recomendado para usted (Fanplayr AI)". Esto le dice al sistema que use el "algoritmo recomendado para usted" interno de Fanplayr para determinar los productos a mostrar en esta sección de recomendación.

Para que el Personal Shopper sea conciso en este ejemplo, establezca el ajuste "Límite de productos" en 5. Esto significa que se mostrará un máximo de cinco productos en este componente de recomendación.

Haga clic en "Actualizar" para confirmar los cambios.

4. Personalizar las fichas de productos

Figura 4: Ficha de producto

Desplácese hacia abajo en la configuración del componente hasta la sección "Ficha de producto". Aquí haremos algunos pequeños cambios para mejorar el aspecto de las fichas de producto.

1. Establezca el "Color de fondo de la imagen" en un color neutro como un gris claro. Este ajuste añadirá un color de fondo a cualquier imagen de producto que contenga áreas transparentes.
2. Establezca la forma de la imagen en "Cuadrado".
3. Establezca el "Radio de la esquina de la imagen" en 16px para añadir unos bonitos bordes redondeados a sus imágenes de producto.
4. Haga clic en "Editar estilo" en "Precio del producto". Esto abrirá y reemplazará la barra lateral con un editor de configuración específico para la configuración de "Precio del producto" aquí. Busque la casilla de verificación "Cursiva" y asegúrese de que esté habilitada. Esto le da a los precios de los productos un aspecto ligeramente más elegante. Asegúrese de hacer clic en el botón Atrás en la parte superior del editor para volver al resto de la configuración del componente.

5. Publicar Shopper

Sus productos deberían verse como se muestra en la Figura 5. Si faltan productos, podría deberse a la falta de datos de entrenamiento necesarios para mostrar productos "Recomendados para usted". Intente cambiar el modelo a un algoritmo diferente, como "Clasificación por vistas", si esto sucede.

Figura 5: Shopper con fichas de producto actualizadas

No dude en personalizar más ajustes en su Personal Shopper. Una vez que esté satisfecho, haga clic en "Publicar" y confirme cuando se le pregunte. El Personal Shopper se publicará inmediatamente después de la confirmación.

6. Ver Shopper en el sitio

¡Navegue a la URL tal como se define en su configuración de "Embed URL" y vea su Personal Shopper en vivo en su sitio!

Figura 6: Personal Shopper en vivo en el sitio

Solución de problemas

No veo el Personal Shopper en mi sitio

• Asegúrese de que el script de Fanplayr se esté ejecutando en su sitio.
• Verifique dos veces su Embed URL y asegúrese de que el Embed Selector exista en esa página.

Veo el encabezado pero no hay productos

• La causa más común de esto es que el modelo seleccionado no devuelve ningún producto. Esto podría deberse a la falta de datos de entrenamiento o a la falta de productos en su Catálogo. Póngase en contacto con su representante de Fanplayr para obtener ayuda.

Mi shopper se ve un poco diferente en vivo que en el editor

• Los Personal Shoppers heredan parte del CSS de su página, incluyendo, sobre todo, la font-family que controla el aspecto de su texto. Considere usar la función Vista previa en vivo para ver cómo se verá su Personal Shopper en su sitio antes de publicarlo.