Tutorial básico de widgets

Siga este tutorial para crear un widget de superposición de merchandising básico. Antes de empezar, asegúrese de consultar los requisitos previos. Asegúrese también de tener lista una URL válida en su sitio.

1. Crear desde la lista

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

Figura 1: Crear widget

En la ventana emergente que aparece a continuación, elija la opción "Recommendation" (Recomendación) y haga clic en "Next" (Siguiente) para pasar al siguiente paso.

2. Definir ajustes generales

Figura 2: Ajustes generales

Comience personalizando los ajustes generales del widget. En este tutorial, solo necesita editar dos elementos:

• Display URL (URL de visualización): Establezca una página específica de su sitio web. Para este tutorial, la hemos configurado en un sitio web de prueba en https://fp-dev-1.myshopify.com
• Trigger on Exit Intent (Activar al intentar salir): Desplácese hacia abajo y deshabilite esta configuración.;

3. Seleccionar la fuente de productos

Continúe y haga clic en el componente "Recommendation" (Recomendación) en la barra lateral izquierda para ver la configuración de las recomendaciones de productos. Luego, en la parte superior de la barra lateral de configuración, haga clic en "Change" (Cambiar) en la configuración de "Product Source" (Fuente de productos). Debería ver la ventana emergente a continuación.

Figura 3: Fuente de productos

En la primera configuración de "Model" (Modelo), busque y seleccione el modelo "Recommended for You (Fanplayr AI)" (Recomendado para ti - IA de Fanplayr). No es necesario editar las otras configuraciones. Haga clic en "Update" (Actualizar) para confirmar los cambios.

4. Personalizar el aspecto

Ahora démosle al widget un toque único. A continuación se muestra la versión final después de algunos ajustes. A continuación se muestra una lista de cada cambio realizado desde los valores predeterminados para lograr este aspecto.

Figura 4: Vista previa actualizada

En "General Settings" (Ajustes generales)

• Establezca "Width" (Ancho) en 600px
• Establezca "Corner Radius" (Radio de las esquinas) en 20px
• Establezca "Base Font -> Color" (Color de la fuente base) en blanco
• Establezca "Background Color" (Color de fondo) en hex #031044;

En el primer componente "Text Block" (Bloque de texto):

• Edite el texto "Content" (Contenido) para que diga "Creemos que te encantarán estos". Asegúrese de que el color del texto no esté establecido.
• Elimine "Bottom Padding" (Relleno inferior) o establezca en 0

En el componente "Recommendation" (Recomendación):

• Establezca "Image Shape" (Forma de la imagen) en Square (Cuadrada)
• Desmarque "Product Price" (Precio del producto)
• Haga clic en "Edit Style" (Editar estilo) en "Product Name" (Nombre del producto);
  • Asegúrese de que la casilla de verificación esté marcada junto a "Bold" (Negrita) en el editor de estilo de texto que aparece
• Establezca "Item Gap" (Espacio entre elementos) en 30px

5. Publicar

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

Una vez que haya establecido un nombre, haga clic en "Publish" (Publicar) en la esquina superior derecha para finalmente publicar su widget en su sitio.

6. Ver

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

Figura 5: Widget en vivo

Solución de problemas

No veo el widget en mi sitio

• Asegúrese de que el script de Fanplayr se esté ejecutando en su sitio.;
• Verifique nuevamente su Display URL (URL de visualización)
• Es posible que el modelo seleccionado no haya devuelto productos. Si no se devuelve ningún producto, el widget no se mostrará. De manera similar, si el modelo seleccionado se basa en 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 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 widget en su sitio antes de publicarlo.