¿Cómo personalizar el diseño de las tarjetas de productos?

Aprende a elegir el estilo de las tarjetas de productos y a definir qué información se mostrará en las listas de tu sitio web.

Las tarjetas de productos son los bloques que representan cada artículo dentro de la página de inicio, las categorías, los resultados de búsqueda y otras secciones donde se muestra un listado de productos.

Desde Waclis puedes seleccionar el diseño de tarjeta que mejor se adapte a tu sitio, activar o desactivar información, personalizar el botón principal y consultar una vista previa antes de publicar los cambios.

Cada plantilla incluye una tarjeta predeterminada, pero puedes reemplazarla por otro diseño disponible sin necesidad de modificar el código del sitio.

¿Qué puedes personalizar?

Desde la configuración de la tarjeta puedes controlar la visualización de los siguientes elementos:

• Nombre del producto.
• SKU o código interno.
• Precio.
• Precio de oferta.
• Selector de cantidad.
• Método de impresión.
• Submétodo de impresión.
• Colores disponibles.
• Información sobre cuotas.
• Categoría del producto.
• Botón principal. 

La disponibilidad de algunos elementos depende de la configuración del catálogo. Por ejemplo, los métodos de impresión no se mostrarán si el sitio no utiliza esta funcionalidad.

¿Dónde se configura la tarjeta de productos?

Para personalizarla, sigue estos pasos:

1. Ingresa al panel de administración de Waclis.
2. Dirígete a Diseño.
3. Ingresa en Personalización de plantilla.
4. Selecciona la sección Tarjeta de productos.

Desde esta pantalla podrás elegir un diseño, definir qué información incluir y revisar los cambios mediante la vista previa.

1. Seleccionar el diseño de la tarjeta

En la parte correspondiente al diseño encontrarás las tarjetas de productos disponibles para tu sitio.

Cada plantilla de Waclis posee una tarjeta predeterminada. Al ingresar por primera vez, aparecerá seleccionada automáticamente la tarjeta asociada a la plantilla que estés utilizando.

Puedes revisar los demás diseños y seleccionar el que mejor se adapte a:

• La identidad visual de tu marca.
• El tipo de productos que comercializas.
• La cantidad de información que necesitas mostrar.
• La forma en que los clientes seleccionan variantes o características.
• El espacio disponible en dispositivos móviles y computadoras.

Al seleccionar otro diseño, la vista previa se actualizará para mostrar cómo se verá la nueva tarjeta.

Cambiar la tarjeta no modifica la información de tus productos. Únicamente cambia la forma en que se presenta dentro del sitio web.

2. Utilizar la vista previa

A la derecha de la pantalla se muestra una vista previa de la tarjeta de producto.

Esta vista representa el resultado que se mostrará en el sitio y se actualiza mientras realizas cambios. De esta forma, puedes comprobar el diseño antes de guardarlo.

La vista previa debe reflejar:

• La tarjeta seleccionada.
• Los elementos activados.
• Los elementos desactivados.
• Los textos personalizados.
• Los colores del botón.
• Los colores al posicionar el cursor sobre el botón.
• Las configuraciones de precio y oferta.
• Las variantes y colores.
• Los estilos agregados mediante CSS personalizado.

Por ejemplo, al desactivar la opción SKU, el código del producto dejará de mostrarse inmediatamente en la vista previa.

Si activas el selector de colores, aparecerán los círculos correspondientes siempre que el producto utilizado como ejemplo tenga colores asociados.

CSS personalizado

Cuando el sitio posee CSS personalizado, la vista previa también debe contemplar esos estilos para representar la tarjeta tal como se verá en el frontend.

Debes tener en cuenta que un CSS personalizado podría:

• Cambiar tamaños de textos.
• Modificar márgenes o espacios.
• Ocultar elementos.
• Reemplazar colores.
• Cambiar la forma o el tamaño del botón.
• Alterar la distribución de las columnas.
• Modificar el diseño en dispositivos móviles.

Si la tarjeta se visualiza de manera diferente a la esperada, revisa la sección de CSS personalizado antes de cambiar nuevamente la configuración de la tarjeta.

3. Configurar la información de la tarjeta

Cada elemento cuenta con una opción para activarlo o desactivarlo.

Cuando una opción está activada, Waclis intentará mostrar esa información dentro de la tarjeta. Sin embargo, el contenido solamente aparecerá cuando el producto tenga los datos necesarios.

Por ejemplo, activar Precio de oferta no hará que todos los productos aparezcan en oferta. Solamente mostrará el precio promocional en los productos que tengan una oferta configurada.

Nombre del producto

Activa esta opción para mostrar el nombre del artículo.

El nombre permite que los visitantes identifiquen el producto sin necesidad de ingresar en su ficha.

Se recomienda mantenerlo activo en la mayoría de los sitios.

El aspecto del nombre puede variar según la tarjeta seleccionada. Por ejemplo:

• Tamaño de la tipografía.
• Cantidad de líneas.
• Posición dentro de la tarjeta.
• Uso de negrita.
• Alineación.
• Espacio respecto de la imagen.

Si un nombre es demasiado extenso, la plantilla puede limitar la cantidad de líneas para conservar una altura uniforme entre las tarjetas.

SKU

El SKU es el código interno utilizado para identificar cada producto.

Al activar esta opción, el código se mostrará dentro de la tarjeta siempre que el producto tenga un SKU registrado.

Por ejemplo:

SKU BOT-URB-750

Mostrar el SKU puede ser útil cuando:

• Los clientes realizan pedidos utilizando códigos.
• Trabajas con catálogos empresariales.
• Comercializas productos similares.
• Recibes solicitudes de cotización.
• Tus vendedores necesitan localizar rápidamente una referencia.

Si el producto no posee un SKU, este espacio no se mostrará.

Precio

Activa esta opción para mostrar el precio principal del producto.

El valor se obtiene directamente de la configuración del catálogo y respeta la moneda utilizada por el sitio.

Según la configuración del negocio, el precio puede corresponder a:

• Precio de venta.
• Precio desde una cantidad determinada.
• Precio de una variante.
• Precio calculado según una lista de precios.
• Precio asociado a una presentación específica.

Cuando el producto requiere seleccionar características antes de conocer el valor definitivo, la tarjeta puede mostrar el precio inicial o la información definida por la configuración comercial del sitio.

Precio de oferta

Activa esta opción para mostrar el precio promocional cuando un producto se encuentre en oferta.

Dependiendo del diseño seleccionado, la tarjeta puede mostrar:

• El precio anterior tachado.
• El nuevo precio destacado.
• Una etiqueta con el porcentaje de descuento.
• Una insignia promocional.
• Una combinación de estos elementos.

Por ejemplo:

$18.990

$16.141

Si el producto no tiene una oferta vigente, se mostrará únicamente el precio habitual.

La visualización también puede depender de:

• La fecha de inicio y finalización de la oferta.
• La lista de precios aplicada.
• La variante seleccionada.
• La sesión o tipo de cliente.
• La configuración comercial del producto.

Cantidad

Activa esta opción para permitir que el cliente indique la cantidad desde la propia tarjeta.

El selector debe respetar la cantidad mínima de compra configurada para el producto.

Por ejemplo, si la compra mínima es de 25 unidades, la tarjeta puede mostrar:

− 25 +

El cliente no podrá reducir la cantidad por debajo del mínimo permitido.

La tarjeta también puede informar el mínimo mediante un texto como:

Mín. 25

Al aumentar o disminuir la cantidad, Waclis debe respetar las reglas configuradas para el producto, como:

• Cantidad mínima.
• Incrementos de compra.
• Stock disponible.
• Presentación o unidad de venta.
• Restricciones de variantes.
• Reglas de cotización.

Si el producto no admite la selección directa de cantidad, el cliente deberá completar la configuración desde la ficha o desde el modal correspondiente.

Método de impresión

Esta opción está destinada principalmente a productos personalizables.

Al activarla, la tarjeta puede mostrar un selector con los métodos de impresión disponibles, por ejemplo:

• Serigrafía.
• Sublimación.
• Bordado.
• Tampografía.
• Grabado láser.
• Impresión digital.

El selector solamente aparecerá cuando:

• La funcionalidad de métodos de impresión esté activa.
• El producto tenga métodos asociados.
• Exista un método disponible para seleccionar.

Waclis debe tomar como referencia el método de impresión predeterminado configurado para el producto.

Cuando existe un método predeterminado, este aparecerá seleccionado inicialmente en la tarjeta.

Submétodo de impresión

El submétodo permite definir una alternativa más específica dentro del método seleccionado.

Por ejemplo:

• Método: Serigrafía.
• Submétodo: 1 tinta.

También podría representar:

• Cantidad de tintas.
• Tamaño de impresión.
• Área de personalización.
• Técnica específica.
• Terminación.
• Tipo de aplicación.

Los submétodos disponibles pueden cambiar cuando el cliente selecciona otro método de impresión.

Si el producto no posee submétodos, este selector no se mostrará aunque la opción esté activa.

Colores

Activa esta opción para mostrar los colores disponibles del producto mediante círculos o muestras visuales.

Cada círculo representa un color configurado en el producto.

Por ejemplo:

• Negro.
• Blanco.
• Rojo.
• Azul.
• Verde.
• Amarillo.

Al posicionar el cursor sobre un círculo, debe mostrarse un tooltip con el nombre del color.

Esto permite distinguir colores similares o identificar correctamente colores con nombres comerciales, como:

• Azul marino.
• Verde petróleo.
• Gris grafito.
• Rosa pastel.
• Blanco natural.

Cantidad máxima de colores visibles

Para evitar que una tarjeta ocupe demasiado espacio, solamente se muestra una cantidad determinada de colores.

Cuando el producto posee más colores que los visibles, aparece un indicador con el formato:

+5

El número informa cuántos colores adicionales están disponibles.

Al hacer clic sobre este indicador, el cliente podrá desplegar o consultar los colores restantes.

Color seleccionado

El color activo puede destacarse mediante:

• Un borde.
• Un círculo exterior.
• Una sombra.
• Un cambio de tamaño.
• Otro indicador definido por la tarjeta seleccionada.

Seleccionar un color puede actualizar otra información del producto, como la imagen, el stock o la disponibilidad, siempre que esas relaciones se encuentren configuradas en el catálogo.

Cuotas

Activa esta opción para informar las posibilidades de financiación del producto.

La tarjeta puede mostrar datos como:

• Cantidad de cuotas.
• Importe aproximado de cada cuota.
• Indicación de cuotas sin interés.
• Beneficio asociado al medio de pago.

Por ejemplo:

6 cuotas sin interés

de $2.690,17

La información se mostrará únicamente cuando el sitio tenga una configuración de cuotas disponible para ese producto, moneda o medio de pago.

El cálculo puede depender de:

• Precio actual.
• Precio de oferta.
• Cantidad seleccionada.
• Configuración del medio de pago.
• Cantidad de cuotas.
• Intereses o promociones vigentes.

El valor mostrado en la tarjeta es informativo. La confirmación definitiva se realiza durante el proceso de compra o cotización.

Categoría del producto

Activa esta opción para mostrar la categoría a la que pertenece el artículo.

La categoría puede aparecer como un texto pequeño sobre el nombre del producto, por ejemplo:

DRINKWARE

Mostrarla puede ayudar al cliente a comprender rápidamente qué tipo de producto está viendo, especialmente en:

• Resultados de búsqueda.
• Productos destacados.
• Productos relacionados.
• Listados que combinan varias categorías.
• Secciones de novedades u ofertas.

El nombre mostrado corresponde a la categoría asociada al producto.

4. Personalizar el botón de la tarjeta

La configuración del botón no se limita a mostrarlo u ocultarlo. También permite adaptar su apariencia y su mensaje a la identidad del sitio.

Los cambios realizados en esta sección se aplican tanto al botón de la tarjeta como al botón principal de la ficha de producto.

Puedes configurar los siguientes aspectos:

• Mostrar u ocultar el botón.
• Texto del botón.
• Color de fondo.
• Color del texto.
• Color de fondo al posicionar el cursor.
• Color del texto al posicionar el cursor.

Activar o desactivar el botón

Activa esta opción para mostrar una acción principal dentro de la tarjeta.

Según el tipo de tienda, el botón puede utilizarse para:

• Agregar al carrito.
• Personalizar y agregar.
• Solicitar cotización.
• Ver producto.
• Seleccionar opciones.
• Consultar disponibilidad.
• Comprar.

Si desactivas el botón, los clientes podrán ingresar al producto haciendo clic sobre la imagen o el nombre, siempre que la tarjeta seleccionada permita esa navegación.

Antes de ocultarlo, verifica que exista otra forma clara de acceder a la ficha del producto.

Texto del botón

Puedes reemplazar el texto predeterminado por uno más adecuado para el funcionamiento del sitio.

Algunos ejemplos son:

• Agregar al carrito.
• Personalizar y agregar.
• Solicitar cotización.
• Ver detalles.
• Elegir opciones.
• Configurar producto.
• Comprar ahora.

Se recomienda utilizar un texto breve y orientado a una acción.

El mismo texto se aplicará al botón correspondiente en las listas y en la ficha del producto.

Color de fondo

Selecciona el color principal del botón.

Es recomendable utilizar un color que:

• Sea coherente con la identidad visual de la marca.
• Se diferencie del fondo de la tarjeta.
• Permita identificar claramente la acción.
• Mantenga suficiente contraste con el texto.

Color del texto

Define el color de la tipografía del botón.

Antes de guardar, verifica que el texto sea legible. Por ejemplo, un texto blanco sobre un fondo muy claro podría resultar difícil de leer.

Color de fondo al posicionar el cursor

Este color se muestra cuando el visitante coloca el cursor sobre el botón en una computadora.

Este comportamiento se conoce como estado hover.

El color puede utilizarse para generar una respuesta visual y confirmar que el botón es interactivo.

Color del texto al posicionar el cursor

Permite cambiar el color de la tipografía durante el estado hover.

La combinación entre el fondo y el texto debe conservar una buena legibilidad.

En dispositivos táctiles, como teléfonos o tabletas, el estado hover puede no mostrarse de la misma forma, ya que no existe un cursor permanente.

5. Configurar otros atributos del producto

Algunos productos pueden tener características adicionales que no se muestran directamente como colores, métodos de impresión o cantidades.

Por ejemplo:

• Talle.
• Capacidad.
• Material.
• Medida.
• Terminación.
• Modelo.
• Presentación.
• Ubicación de impresión.
• Tipo de empaque.

Cuando el producto posee otros atributos obligatorios, Waclis abrirá el modal de selección que ya utiliza el sitio.

Desde este modal, el cliente podrá marcar las opciones necesarias antes de agregar el producto o continuar con la solicitud.

Esto evita que se agregue un producto sin completar información indispensable.

El modal puede abrirse cuando:

• Existen atributos obligatorios sin seleccionar.
• Hay variantes que afectan el precio.
• La combinación elegida modifica el stock.
• Debe configurarse una personalización.
• El producto requiere información adicional.
• No es posible resolver todas las opciones directamente desde la tarjeta.

6. Guardar los cambios

Cuando hayas terminado de configurar la tarjeta:

1. Revisa la vista previa.
2. Comprueba que los elementos importantes estén visibles.
3. Verifica los textos y colores del botón.
4. Confirma que la información no ocupe demasiado espacio.
5. Guarda los cambios.
6. Ingresa al sitio web y revisa una lista real de productos.

Es recomendable comprobar el resultado en:

• Página de inicio.
• Categorías.
• Resultados de búsqueda.
• Productos destacados.
• Productos relacionados.
• Computadoras.
• Teléfonos móviles.
• Tabletas.

Los productos no siempre contienen la misma información. Por ese motivo, conviene revisar distintos casos.

Por ejemplo:

• Un producto con oferta.
• Un producto sin oferta.
• Un producto con muchos colores.
• Un producto sin colores.
• Un producto con métodos de impresión.
• Un producto sin métodos de impresión.
• Un producto con cantidad mínima.
• Un producto con atributos adicionales.
• Un producto sin stock.

Ejemplo de una tarjeta completa

Una tarjeta configurada para productos personalizables podría incluir:

• Etiqueta de descuento.
• Distintivo de producto más vendido.
• Imagen principal.
• Botón de favoritos.
• Categoría.
• Estado de disponibilidad.
• Nombre del producto.
• SKU.
• Precio anterior.
• Precio de oferta.
• Información de cuotas.
• Método de impresión.
• Submétodo.
• Cantidad mínima.
• Selector de cantidad.
• Colores disponibles.
• Botón Personalizar y agregar.

Este tipo de tarjeta permite que el cliente realice gran parte de la configuración sin ingresar en la ficha del producto.

Sin embargo, una tarjeta con muchos elementos también ocupa más espacio. Debes encontrar un equilibrio entre información, facilidad de uso y claridad visual.

Recomendaciones de diseño

Para una tienda tradicional

Puedes mostrar:

• Nombre.
• Precio.
• Precio de oferta.
• Cuotas.
• Botón de compra.

Esta configuración mantiene una tarjeta sencilla y facilita la exploración del catálogo.

Para productos personalizables

Puedes mostrar:

• Nombre.
• SKU.
• Precio.
• Cantidad.
• Método y submétodo de impresión.
• Colores.
• Botón para personalizar.

Esto permite iniciar la configuración desde el listado.

Para ventas mayoristas

Puedes mostrar:

• Nombre.
• SKU.
• Categoría.
• Precio.
• Cantidad mínima.
• Selector de cantidad.
• Colores.
• Botón para solicitar cotización.

Para catálogos sin compra en línea

Puedes mostrar:

• Categoría.
• Nombre.
• SKU.
• Colores.
• Botón Ver detalles o Solicitar cotización.

Consideraciones importantes

Los elementos vacíos no se muestran

Activar una opción no obliga a mostrar un espacio vacío.

Por ejemplo:

• Sin SKU: no aparece el código.
• Sin oferta: no aparece el precio promocional.
• Sin colores: no aparece el selector.
• Sin cuotas: no aparece la financiación.
• Sin métodos de impresión: no aparecen los selectores.
• Sin categoría asociada: no aparece el nombre de categoría.

Esto permite utilizar un mismo diseño con productos que tienen configuraciones diferentes.

La tarjeta puede cambiar de altura

Las tarjetas con más información pueden tener una altura mayor.

La altura también puede variar cuando:

• El nombre ocupa varias líneas.
• Se muestran cuotas.
• Existen métodos de impresión.
• Se habilita la cantidad.
• Hay muchos colores.
• Aparecen etiquetas promocionales.

El diseño seleccionado debe organizar estos elementos para mantener la mayor uniformidad posible.

El stock puede afectar las acciones disponibles

Cuando un producto no tiene stock, la tarjeta puede:

• Mostrar un estado de falta de disponibilidad.
• Desactivar el botón.
• Cambiar el texto del botón.
• Impedir aumentar la cantidad.
• Permitir una solicitud de cotización, según la configuración del sitio.

Los cambios afectan diferentes listados

La configuración de la tarjeta puede aplicarse en las diferentes áreas donde se utilice ese componente, como:

• Inicio.
• Categorías.
• Búsquedas.
• Ofertas.
• Novedades.
• Productos relacionados.
• Bloques de productos destacados.

La apariencia final también dependerá del espacio disponible en cada sección.

Preguntas frecuentes

¿Puedo volver a la tarjeta original de mi plantilla?

Sí. Puedes ingresar nuevamente en Diseño > Personalización de plantilla > Tarjeta de productos y seleccionar la tarjeta incluida originalmente en la plantilla.

¿Cambiar la tarjeta modifica mis productos?

No. La información, los precios, el stock, las imágenes y las variantes de los productos no se modifican. Solamente cambia su presentación.

¿Qué sucede si activo un elemento que el producto no tiene?

El elemento no se mostrará. Por ejemplo, si activas los colores pero un producto no tiene colores asociados, la tarjeta no mostrará ese selector.

¿Puedo mostrar una cantidad mínima diferente para cada producto?

Sí. El selector utiliza la cantidad mínima configurada en cada producto.

¿Los métodos de impresión se muestran en todos los productos?

No. Solamente aparecen en productos que tengan métodos de impresión configurados y disponibles.

¿Qué sucede si un producto tiene demasiados colores?

La tarjeta muestra una cantidad limitada de círculos y agrega un indicador +N con los colores restantes. Al seleccionarlo, se despliegan o consultan las demás opciones.

¿Los nombres de los colores se pueden consultar?

Sí. Al posicionar el cursor sobre un círculo, se muestra un tooltip con el nombre del color.

¿El botón personalizado también cambia en la ficha del producto?

Sí. El texto y los colores configurados para el botón se aplican tanto en la tarjeta del listado como en el botón principal de la ficha de producto.

¿Qué sucede si el producto tiene otros atributos obligatorios?

Waclis abrirá el modal de selección para que el cliente complete los atributos pendientes antes de continuar.

¿La vista previa incluye mi CSS personalizado?

Sí. La vista previa contempla los estilos personalizados para representar la tarjeta de la forma más cercana posible al resultado del sitio.

¿Por qué la vista previa puede verse diferente del sitio publicado?

Esto puede ocurrir por:

• Reglas de CSS personalizado.
• Caché del navegador.
• Diferencias de ancho entre el editor y el dispositivo.
• Contenido real del producto.
• Imágenes con proporciones diferentes.
• Elementos externos de la plantilla.
• Cambios que todavía no fueron guardados.

Guarda la configuración, actualiza el sitio y realiza una recarga completa del navegador antes de comparar nuevamente.

La herramienta Tarjeta de productos permite adaptar la presentación del catálogo sin modificar manualmente el código de la plantilla.

Puedes elegir entre diferentes diseños, mostrar solamente la información relevante para tu negocio y ofrecer acciones directas como seleccionar cantidades, colores, métodos de impresión o agregar el producto.

Una configuración adecuada ayuda a que los clientes comprendan mejor cada artículo, reduzcan pasos innecesarios y encuentren más rápidamente la información necesaria para comprar o solicitar una cotización.