Compra Plantillas CSS

Plantillas CSS de compra modernas

Un precio tachado, una insignia de oferta llamativa y un botón que se atenúa cuando se agota una talla provienen de la hoja de estilos. Las plantillas CSS de compra le ofrecen esos estilos con antelación para tarjetas de producto, bloques de precio y selectores de opciones. Ajusta la paleta y los espaciados según su marca, y las reglas visuales para cada situación de compra ya están listas.

Estados visuales que perciben los clientes

El precio y el botón de compra tienen el mayor peso en una tarjeta de producto. Los estilos adecuados les otorgan prioridad mediante el grosor de la fuente, el tamaño y el espaciado. Una breve línea de especificaciones o una nota de envío permanece más pequeña y suave, fácil de leer e igual de fácil de ignorar. Los siguientes estados aparecen en la mayoría de las tiendas y cada uno requiere un aspecto propio:

• un precio de oferta junto al precio anterior, que aparece tachado y atenuado;
• una opción seleccionada que destaca frente a las tallas contiguas no seleccionadas;
• una variante no disponible o un botón deshabilitado que se reconocen como inactivos a simple vista;
• estilos de hover y focus que muestran que un control está listo para presionarse, incluso para usuarios de teclado.

Los avisos de inventario y las insignias de descuento tienen una función meramente informativa. En cambio, los selectores de opciones y el botón de compra piden un clic. Un buen diseño mantiene visible esa diferencia para que una insignia roja nunca parezca algo que se deba pulsar.

Descripciones desiguales, pantallas estrechas

Las reglas de Grid y Flexbox determinan cómo gestiona una fila de tarjetas los productos con descripciones de distinta longitud. Un nombre de producto extenso puede empujar el precio y el botón más abajo que en la tarjeta contigua, dificultando la comparación en la fila. Las plantillas sólidas fijan ambos elementos en la parte inferior de cada tarjeta, alineándolos a lo largo de la fila sin importar lo que haga el texto superior. En teléfonos, las tarjetas se reorganizan en menos columnas y el botón a menudo se expande al ancho completo de la tarjeta para facilitar la pulsación. El precio, las opciones y el botón se apilan en el orden en que los lee el comprador.

Clases reutilizables para cuadrículas de tarjetas densas

Dado que los mismos elementos se repiten en decenas de tarjetas, los estilos funcionan mejor como clases reutilizables para la tarjeta, el precio y la insignia de oferta. Nicepage Theme Colors aplica un esquema de color global en todas las páginas del proyecto, manteniendo la coherencia de los acentos en botones y precios mientras cada oferta conserva su propio énfasis. Un catálogo compacto requiere tarjetas densas y botones cortos.

Los productos con varias opciones necesitan tarjetas más altas, mayor espacio entre selectores y un botón situado debajo de la última opción. La mejor opción suele ser la plantilla cuyos estilos ya cubren la tarjeta más compleja, las insignias y los estados necesarios.