Tutorial Básico de Widget

Sigue este tutorial para crear un widget de merchandising de superposición básico. Antes de empezar, asegúrate de revisar los requisitos previos. También asegúrate de tener una URL válida en tu sitio.

1. Crear desde la Lista

Empieza navegando a la sección "Merchandising" del portal y haz clic en "Widgets" en la barra lateral izquierda. Verás una lista de widgets (posiblemente vacía). Desde aquí, haz clic en "Añadir Widget" en la esquina superior derecha de la pantalla.

Figura 1: Crear Widget

En la ventana emergente que aparece, elige la opción "Recomendación" y haz clic en "Siguiente" para pasar al siguiente paso.

2. Definir Configuración General

Figura 2: Configuración General

Empieza personalizando la configuración general del widget. En este tutorial, solo necesitas editar dos elementos:

• URL de visualización: Establécela en una página específica de tu sitio web. Para este tutorial, la configuramos en un sitio web de prueba en https://fp-dev-1.myshopify.com
• Activar al intentar salir: Desplázate hacia abajo y desactiva esta configuración.;

3. Seleccionar Origen del Producto

Continúa y haz clic en el componente "Recomendación" en la barra lateral izquierda para ver la configuración de recomendaciones de productos. Luego, en la parte superior de la barra lateral de configuración, haz clic en "Cambiar" en la configuración "Origen del Producto". Deberías ver la ventana emergente a continuación.

Figura 3: Origen del Producto

En la primera configuración de "Modelo", busca el modelo "Recomendado para Ti (Fanplayr AI)" y selecciónalo. No es necesario editar las otras configuraciones. Haz clic en "Actualizar" para confirmar los cambios.

4. Personalizar el Aspecto

Ahora vamos a darle al widget un toque único. A continuación, se muestra la versión final después de algunos ajustes. A continuación, se presenta una lista de cada cambio realizado desde la configuración predeterminada para lograr este aspecto.

Figura 4: Vista Previa Actualizada

En "Configuración General"

• Establece el "Ancho" en 600px
• Establece el "Radio de Esquina" en 20px
• Establece "Fuente Base -> Color" en blanco
• Establece el "Color de Fondo" en hex #031044;

En el primer componente de "Bloque de Texto":

• Edita el texto "Contenido" para que diga "Creemos que te encantarán estos". Asegúrate de que el color del texto no esté establecido.
• Elimina el "Relleno Inferior" o configúralo en 0

En el componente "Recomendación":

• Establece la "Forma de la Imagen" en Cuadrada
• Desmarca "Precio del Producto"
• Haz clic en "Editar Estilo" en "Nombre del Producto";
  • Asegúrate de que la casilla de verificación esté marcada junto a "Negrita" en el editor de estilo de texto siguiente
• Establece el "Espacio entre Elementos" en 30px

5. Publicar

Siéntete libre de seguir editando para personalizar aún más tu widget. Una vez completado, haz clic en el icono de edición en la esquina superior izquierda para darle un nombre a tu widget. Este nombre se utiliza simplemente para identificar el widget en nuestro sistema.;

Una vez que hayas establecido un nombre, haz clic en "Publicar" en la esquina superior derecha para finalmente publicar tu widget en tu sitio.

6. Ver

¡Navega a la URL que definiste en el paso 2 para ver tu widget recién publicado! Debería aparecer en el centro de tu pantalla unos segundos después de que la página se cargue.

Figura 5: Widget en Vivo

Solución de Problemas

No veo el widget en mi sitio

• Asegúrate de que el script de Fanplayr se esté ejecutando en tu sitio.;
• Vuelve a comprobar tu URL de Visualización
• Es posible que el modelo seleccionado no haya devuelto ningún producto. Si no se devuelven productos, el widget no se mostrará. De manera similar, si el modelo seleccionado depende de un producto que se está viendo actualmente, el widget solo se mostrará en las páginas de productos.

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

• Los widgets en vivo heredan algo de CSS de tu página, incluyendo, sobre todo, la font-family que controla el aspecto de tu texto. Considera usar la función de Vista Previa en Vivo para ver cómo se verá tu widget en tu sitio antes de publicarlo.