Storefront Notifications

Cuando la clientela agrega productos al carrito, cambia el panel del carrito de la aplicación, paga o aplica un código de descuento, la aplicación muestra un breve mensaje de éxito o de error en tu tienda online. Storefront notifications te permite elegir el aspecto de estos mensajes.

Hay tres estilos:

• Toast: un mensaje pequeño en una esquina de la pantalla.
• Modal: una ventana emergente en el centro de la pantalla con un botón OK. Permanece hasta que la persona la cierra.
• Banner: una barra en la parte superior o inferior de la pantalla.

Pasos para gestionarlo

1. Abre Storefront notifications

   En la aplicación, haz clic en Add-on Features, busca Storefront notifications y haz clic en Customize.

2. Elige el estilo predeterminado

   En Notification style, elige el Default style: Toast, Modal o Banner. Todos los mensajes usan este estilo, salvo que elijas otro para su función en el paso siguiente.

   

3. Elige un estilo por función (opcional)

   En Style per feature, mantén Default o elige otro estilo para un grupo de mensajes:

   • Add to cart: productos que la aplicación agrega al carrito desde las páginas de producto, Quick Buy, el Quick Order Form o el panel del carrito Wholesale de la aplicación.
   • Cart updates: cambios en el panel del carrito Wholesale de la aplicación, como actualizar el carrito o guardar o eliminar una dirección.
   • Checkout & Pay later: errores al pagar y mensajes de éxito y de error de los pedidos con Pay later.
   • Discount code: mensajes del cuadro de códigos de descuento de la aplicación, por ejemplo cuando se acepta un código o no es válido para los artículos del carrito.

   Ejemplo: mantén Toast como estilo predeterminado y elige Modal para Checkout & Pay later, para que la clientela no pase por alto la confirmación de Pay later.

4. Personaliza cada estilo

   Define el aspecto de cada estilo en su propia sección. Deja un color vacío para usar el aspecto predeterminado.

   Toast style

   • Auto hide: activado por defecto. Desactívalo para que cada aviso permanezca en pantalla hasta que la persona lo cierre.
   • Design: Classic, Card, Soft o Pill.
   • Position: Top right, Top left, Bottom right o Bottom left.
   • Auto hide after: de 2 a 30 segundos. El valor predeterminado es 5.
   • Success background, Error background y Text color.

   Modal style

   • Design: Classic, Card o Dialog.
   • Button background y Button text: los colores del botón OK.
   • Corner radius: de 0 a 40 px.

   Banner style

   • Auto hide: activado por defecto. Desactívalo para que el banner permanezca hasta que la persona lo cierre.
   • Design: Classic, Soft o Floating.
   • Position: Top o Bottom.
   • Auto hide after: de 2 a 30 segundos. El valor predeterminado es 5.
   • Success background, Error background y Text color.

5. Previsualiza y guarda

   En Preview, elige un Preview template y haz clic en Show success o Show error para ver ese estilo con tus ajustes. La vista previa usa las mismas plantillas que tu tienda online.

   

   Haz clic en Save.

Conviene saber

• La clientela cierra un Modal con OK, con el botón ×, haciendo clic fuera de él o con la tecla Esc. Un modal nunca se cierra por sí solo.
• Puede haber hasta cinco avisos Toast en pantalla a la vez. Cuando llega un sexto, se elimina el más antiguo.
• Solo se muestra un modal y un banner a la vez. Un mensaje nuevo reemplaza al que está en pantalla.
• Cuando un pedido con Pay later se completa y se muestra el mensaje de éxito, la aplicación vacía el carrito y recarga la página. Con Modal, la página se recarga cuando la persona cierra la ventana, para que pueda leer antes el mensaje. Con Toast o Banner, se recarga pasados unos segundos.
• El texto de los mensajes se edita igual que el resto de los textos de la tienda online. Consulta Editar y traducir el contenido de algunas funciones de la aplicación.
• ¿Necesitas otra forma de mostrar las notificaciones? Haz clic en Contact support en la sección Notification style y nuestro equipo te ayudará.

Nota

Importante: asegúrate de que la inserción de la aplicación esté activada en tu tema, o estos ajustes no se aplicarán en tu tienda online. Consulta Activar o desactivar la aplicación en el tema.

¿Necesitas ayuda?

Si tienes alguna dificultad al seguir estos pasos, no dudes en ponerte en contacto con nosotros cuanto antes en la dirección de correo [email protected].