Comparativas automáticas Immune: qué son y cómo configurarlas

Videotutorial de configuración paso a paso

¿Qué es una comparativa Immune?

La comparativa Immune es una tabla comparativa que se genera automáticamente a raíz de las categorías de producto. Esta tabla comparativa recoge toda la información agregada dentro de la categoría y cada uno de sus productos. Esta tabla muestra de cada producto: su imagen, las características, los atributos, sus pros y contras, qué valoración total tiene y un botón con su enlace de afiliado.

Una herramienta muy útil para que el usuario web pueda, de un solo vistazo, ver una tabla en la que poder comparar los diferentes productos de una misma categoría. Y lo mejor de todo es que tú no habrás tenido que invertir horas en crearla… ya lo hace Immune Theme® por ti 😉

¿Qué es la función comparar?

Una vez una categoría Immune cuente con más de un producto tendrás la opción de crear las comparativas Immune, pero además contarás con una funcionalidad muy interesante para los usuarios llamada comparar. Esta función permite a los usuarios de la web crear tablas comparativas personalizadas solo con aquellos productos de los que les interese ver la información. Estas comparativas personalizadas heredan el estilo de la comparativa Immune de la misma categoría.

¿Cómo funciona? Muy sencillo. Dentro de cada ficha de producto Immune se mostrará un botón llamado comparar que el usuario podrá seleccionar, si lo desea. También podrá quitar un producto de su comparativa si cambia de opinión.

Una vez haya seleccionado 2 o más productos, le aparecerá un botón llamado Ver comparativa con el que tendrá la opción de visualizar una tabla comparativa con sus productos elegidos.

¿Cómo ocultar el botón de comparar?

Si quieres usar una caja de producto pero no quieres que tenga el botón de comparar (por ejemplo, en un artículo review de un solo producto) puedes definir que el botón de comparar no se muestre. Para ello deberás marcar la opción Ocultar botón comparar dentro de los ajustes del bloque del producto.

¿Cómo configurar las comparativas Immune?

Ve a las categorías (Immune > Todas las categorías) y entra en la categoría. Debajo de la configuración general de la categoría encontrarás la configuración de la tabla (estilo de la tabla), que será la tabla comparativa. Ahí podrás ajustar y personalizar la tabla e ir viendo en tiempo real qué aspecto tendrá en la previsualización. Vamos a ver paso a paso cómo configurar una tabla comparativa en Immune.

Tabla

Aquí se definen los ajustes generales de las tablas comparativas. Deberás indicar:

• El tipo de tabla: si quieres que sea normal, striped horizontal (con rayas horizontales) o striped vertical (con rayas verticales).

• El borde de la tabla: si quieres o no que cuente con borde y personalizar su ancho y color.

• El espaciado dentro de las celdas, por píxeles.

• El Ancho máximo de la tabla, en píxeles. Si dejas esta casilla en blanco, la tabla se mostrará a ancho completo.

Cabecera

Aquí se definen los ajustes relativos a la cabecera de la tabla, es decir, la primera fila (en una tabla vertical) o primera columna (en una tabla horizontal):

• En la primera opción desplegable deberás seleccionar si tu tabla será horizontal, siendo la cabecera la primera columna, o si tu tabla será vertical, siendo la cabecera la primera fila.

• Ajusta si quieres que la cabecera sea fija o no, una opción muy interesante para tablas de gran tamaño que requieran de scroll para ser visualizadas. De esta forma tus usuarios sabrán, en todo momento, a qué valor corresponde cada información que vean en la tabla. Importante: si creas una tabla comparativa vertical y es muy ancha, no es recomendable fijar la cabecera ya que en desktop puede tener un comportamiento anómalo que conlleve al desbordamiento de la tabla cuando el usuario haga scroll. En caso de una tabla vertical pequeña, no habría problemas con fijar la cabecera.

• Indica el color de fondo y texto de la cabecera.

• Ajusta el estilo del borde y su color.

• Por último, indica la alineación del texto dentro de la cabecera.

Celdas

Aquí se definen los ajustes relativos a las celdas de la tabla:

• Si creas una tabla con opción striped (con rayas), deberás ajustar el color de fondo y de texto para los dos tipos de celdas (en las opciones fondo y texto 1 y fondo y texto 2). En caso de crear una tabla normal, solo será necesario que ajustes el color de fondo 1 y color de texto 1. Estos colores se aplicarán a todas las celdas de la tabla, salvo en la cabecera.

• También deberás ajustar si quieres o no que las celdas tengan borde, además de su estilo y color.

• Determina la alineación del texto dentro de las celdas.

• Alto máximo de imagen: las imágenes, que se mostrarán dentro de la tabla comparativa, serán las que hayas configurado dentro de cada producto. Con esta opción podrás definir cuál es el alto máximo que tendrán estas imágenes en miniatura dentro de la tabla, de manera que sea más homogéneo su tamaño y no deformen la tabla.

Botón y Extra

En botón has de definir la apariencia del botón de compra que aparecerá dentro de la tabla comparativa. Ajusta su color de fondo y el texto que mostrará dentro.

Por último, en Extra ajusta:

• Color de estrellas: define qué color tendrán las estrellas de los atributos, dentro de la tabla comparativa.

• Color de icono pros: define qué color tendrán los iconos de los pros, dentro de la tabla comparativa.

• Color de icono contras: define qué color tendrán los iconos de los contras, dentro de la tabla comparativa.

• Clases: puedes asignar clases a esta categoría por si más adelante quieres darle otros formatos.

¿Cómo añadir una comparativa Immune dentro de una entrada o página?

Nuestra recomendación es que siempre que quieras añadir una comparativa Immune lo hagas dentro de una Immune Row, de esta forma podrás darle mayor anchura a la tabla si es necesario y mejorarás la experiencia de navegación para los usuarios. Aunque todas nuestras tablas incluyen la opción de scroll por defecto, habrá muchos usuarios que no sepan usarlo. Si quieres saber cómo trabajar con Immune Row, consulta el siguiente artículo.

Una vez hayas configurado la comparativa Immune, puedes introducirla dentro de tus contenidos con el bloque de Gutenberg: Comparativa productos. Una vez añadido el bloque, selecciona de qué categoría quieres que se muestre la tabla comparativa (dentro del menú del bloque en el lado derecho) y listo.