Los bloques de productos dinámicos sirven para mostrar recomendaciones personalizadas de productos a tus contactos. Esto permite que los contenidos de tu web se adapten al comportamiento y al ciclo de vida de cada usuario, manteniéndose actualizados y relevantes, lo que mejora las conversiones.
En este artículo, aprenderás cómo crear un bloque de productos personalizados en un contenido web.
PASO 1. Crea un contenido web con un bloque de productos dinámico
1. Accede a "Contenidos > Contenido Web" y haz clic en Crear nuevo contenido web.
2. Selecciona el tipo de contenido web en el que quieres mostrar las recomendaciones personalizadas.
3. Nombra el contenido para identificarlo.
4. Haz clic en Crear contenido web.
5. Añade un componente avanzado de tipo "Productos", arrastrando el bloque desde la pestaña Componentes al editor.
PASO 2. Personaliza tu bloque de productos
2.1. Configuración básica
(En este apartado se van a indicar los datos identificativos y estilo general del bloque de productos).
6. Haz clic en (Editar elemento) en el menú contextual que aparece al pasar el ratón sobre el bloque insertado.
7. (Opcional) En Nombre, establece un título para identificar el bloque.
8. En Tipo, elige el comportamiento visual del bloque de productos.
2.2. Configuración de la plantilla
(En este apartado se va a definir el contenido del bloque de productos).
9. En Plantillas, escoge entre las tres opciones por defecto.
10. Usa el editor para personalizar los estilos de la plantilla seleccionada.
11. (Opcional) Haz clic en (Editar código HTML), para personalizar por medio de código tu componente, si fuera necesario para tu diseño.
2.3. (Opcional) Creación de nuevas variables dinámicas
(En este apartado se van a definir nuevas variables a utilizar en el carrusel, en caso de que desees añadir nuevas).
12. En el editor, haz clic en el lugar del contenido donde quieres añadir la variable.
13. Haz clic en el botón Variables.
14. En Identificador de variable, escribe un nombre para tu variable.
15. Haz clic en Aceptar.
16. Repite los pasos 12 a 15 por cada variable que quieras añadir.
2.4. Configuración de la estructura
(En este apartado se van a definir la cantidad de productos a mostrar).
17. En Estructura, define la cantidad de productos que deseas que se muestren en el contenido, en función de su tipología:
- Componente de tipo estático: indica las filas y columnas de tu bloque de productos, tanto para escritorio como para móvil.
- Componente de tipo carrusel: Indica la cantidad de productos que mostrará a la vez tu bloque, tanto para dispositivos móviles cómo para escritorio, y establece el tiempo de rotación en segundos.
18. (Opcional para componentes de tipo estático) Desmarca la casilla "Mostrar filas incompletas" para que los productos se visualicen sólo cuando hay suficientes artículos para mostrar en todas las columnas de una fila.
2.5. (Opcional) Configuración de márgenes, fondo y opciones avanzadas
(En este apartado se van a determinar los últimos aspectos visuales del contenido).
19. En Disposición, define los márgenes internos del componente, si fuera necesario para tu diseño.
20. En Fondo, cambia el color de fondo y su grado de transparencia, si fuera necesario para tu diseño.
21. En Avanzados, haz clic en Introduce clases para asignar al contenido clases HTML, si quieres aplicar a tu contenido estilos CSS creados en tu web o en componentes de tipo HTML.
22. Sólo para componente de tipo Carrusel. Haz clic en Maximizar editor para modificar el código y personalizar las flechas de desplazamiento de tu carrusel, si fuera necesario para tu diseño.
PASO 3. Previsualiza el diseño de tu bloque de productos personalizado
23. Haz clic en Previsualizar.
24. Haz clic en (Vista en escritorio) y revisa que el diseño en ordenador sea el adecuado para tu estrategia.
25. Haz clic en Vista en móvil y revisa que el diseño en dispositivos móviles es el adecuado para tu estrategia.
26. Haz clic en Cerrar previsualización.
27. (Opcional) Haz las modificaciones necesarias, repitiendo los pasos y puntos anteriores que correspondan, para que el diseño sea el adecuado a tu estrategia.
28. En el editor, haz clic en Guardar.
¡Sigue aprendiendo!
Para aprovechar todo el potencial de tu cuenta en Connectif, te recomendamos continuar con los siguientes artículos:
- Crear bloque de productos personalizados en un email, para crear y personalizar un bloque de contenido dinámico en el diseño de tus emails.
- Mostrar productos personalizados en un contenido, para vincular los datos recogidos en un workflow con las variables de un contenido web.
- Mostrar porcentaje de rebaja solo cuando exista descuento en contenido web, para personalizar el comportamiento del contenido dinámico en función de si el producto tiene descuento.
- Insertar un inline en tu eCommerce, para personalizar el contenido de tu web sin modificar el código.