Recorrido completo · Kiki Estampado · 2025

Kiki Estampado

Una tienda de indumentaria estampada que no vende sesenta y dos productos: vende trece diseños sobre un mismo montón de prendas lisas. Estas son sus pantallas.

Next.js
Turbopack
Cloudinary
Mercado Pago
Andreani

Todas las capturas de este recorrido salen de una copia local de la tienda, cargada con productos y pedidos inventados. Las ventas y los clientes de un cliente no se publican en el portafolio de nadie.

Portada

La portada es una lista de bloques, y se ordena con flechas

La vidriera no está escrita en el código: es una lista de bloques que el taller arma y reordena. Un banner es un bloque, las ofertas son otro, los productos nuevos son otro. Así «primero la publicidad de la línea nueva, después las ofertas, después otra pieza y recién ahí las novedades» se escribe tal cual, sin pedirle nada a nadie. Cada banner elige además cuánto ocupa —ancho completo o media página— y cuán alto se ve, porque una pieza apaisada y una foto vertical no quedan bien con la misma proporción.

Pantalla «Página principal» del panel: los nueve bloques de la portada en fila, con flechas para subir y bajar cada uno — Los bloques que llevan banner muestran su miniatura y su nombre —«Línea Fierros», «Hecho en El Calafate», «De tu idea a tu prenda»— y dicen cuánto ocupan. La casilla «Activo» apaga un bloque sin sacarlo de la lista, y el banner sigue en la biblioteca para volver a usarlo la temporada que viene.

Franja de ofertas de la portada: ocho productos con el porcentaje de descuento sobre la foto y el precio viejo tachado

Catálogo

Sesenta y dos productos y un solo precio por talle

Categorías, rango de precio y buscador, con el contador de resultados siempre a la vista. Lo que hay que mirar es el precio: en las remeras estampadas dice «$18.900 – $23.900» y no un número solo, porque el precio lo pone el talle y no el diseño. Una XXL cuesta más que una S en todas las estampas por igual, así que el catálogo muestra el rango y la ficha muestra el número cuando ya elegiste.

Catálogo de Kiki con los filtros de categoría y precio a la izquierda y la grilla de productos a la derecha

Franja de categorías destacadas de la portada, con una foto por categoría — Las cuatro categorías salen de las que están cargadas, no de una lista escrita a mano. Agregar una quinta es crearla en el panel y marcarla acá.

Ficha de producto

El talle y el color se eligen por separado

Cinco talles y cuatro colores no son veinte botones: son cinco y cuatro, y la tienda cruza lo que elegiste. El precio cambia al tocar el talle, y el stock dice cuántas quedan de esa combinación exacta —«Stock disponible (11)», no un «disponible» genérico—. Ese número sale del montón de prendas lisas, no de un inventario propio de esta estampa. Abajo, las opiniones y los productos relacionados, que son lo que evita que una visita termine en una sola prenda.

Ficha de la remera Turbo: selector de talle, muestras de color, precio, stock disponible y botón de agregar al carrito — Las tres fotos de abajo son la misma prenda: el producto, un acercamiento a la estampa y la remera lisa sobre la que se imprime. La tercera contesta la pregunta que llega por WhatsApp: «¿de qué color es la remera?».

Stock central

Una sola pila de prendas lisas para todos los diseños

Este es el corazón de la tienda. Kiki no tiene sesenta y dos inventarios: tiene un montón de prendas lisas contadas una sola vez por talle y por color —veinte combinaciones, 305 prendas— y trece diseños que se estampan sobre ese mismo montón. Vender una remera Turbo talle L blanca y vender una Ruta 40 talle L blanca descuentan del mismo renglón, porque en el taller son la misma prenda hasta que entra a la plancha. Cargar el stock producto por producto era la alternativa, y significaba prometer trece veces la misma remera.

Pantalla de stock central: las combinaciones de talle y color, con su cantidad y cuántos diseños usan cada una — La columna «Diseños que la usan» dice trece en cada renglón: son los trece estampados que se imprimen sobre prenda lisa. Cada combinación tiene además su ingreso, su venta presencial y su recuento a mano, porque el mostrador también descuenta.

Lista de últimos movimientos de stock, con fecha, combinación, cantidad, motivo, quién lo hizo y el número de pedido que lo originó — «Venta online · KE-1024». Cada entrada y cada salida queda anotada con su motivo y su número de pedido. Es la pantalla que se abre cuando el sistema dice una cantidad y el taller cuenta otra.

Precios

Subir el precio de la XL es tocar un casillero

Si el precio depende del talle y no del diseño, la tabla de precios también tiene que ser una sola. Cambiar «L» acá lo cambia en los trece estampados a la vez, y el panel avisa cuántas variantes va a reescribir antes de que toques guardar. Un diseño puntual puede tener su propio precio desde su ficha, y en ese caso esta tabla no lo pisa — que es lo que hace falta para poner una estampa en oferta sin sacarla del sistema general.

Tabla de precios por talle: seis talles, el precio de cada uno, un precio anterior opcional y cuántas variantes afecta — «Variantes afectadas: 52» en cada renglón, y al lado del botón el aviso de que guardar reescribe 260 precios. Un número así conviene verlo antes y no después.

Cargar un producto

Un diseño nuevo son dos listas y ninguna planilla de variantes

Cargar una estampa nueva no es cargar veinte filas. Se marcan los colores, se marcan los talles, y las veinte combinaciones salen de cruzarlos: el panel las cuenta en voz alta y deja verlas si hace falta. Los precios se heredan de la tabla general y los casilleros quedan vacíos diciendo que usan el precio general, que es la forma de mostrar que ahí no hay nada que completar. El stock ni aparece: sale de la pila.

01
Marcar los colores
Cada uno con su muestra al lado. Lo que no esté marcado no se ofrece.
02
Marcar los talles
Los mismos cinco de siempre, o menos si esa estampa no entra en una S.
03
Dejar que se crucen
Las veinte combinaciones se arman solas y el panel dice cuántas son antes de guardar.
04
No tocar precio ni stock
El precio sale de la tabla por talle y el stock de la pila. Sólo se completa lo que este diseño tenga distinto.

Editor de un producto que usa stock central: datos generales, los colores y talles marcados, el conteo de combinaciones y la tabla de precios heredados

Compra

Del carrito a la sucursal, sin sorpresas en el medio

Cantidad editable, cupón de descuento, subtotal y total antes de empezar: nada aparece después de poner los datos. El envío se calcula con el código postal, se paga con Mercado Pago o por transferencia —y en ese caso los datos bancarios salen del panel, no de una variable de entorno—, y hay que marcar que se leyeron los términos. El pie lleva términos, privacidad, botón de arrepentimiento, tabla de talles, el enlace a Defensa del Consumidor y quién vende: razón social, CUIT y domicilio.

Carrito con dos productos, campo de cupón, subtotal y total, y el botón de iniciar la compra

Checkout con los datos de envío, el cálculo del envío por código postal, los dos métodos de pago y la casilla de términos — La casilla de términos no es un trámite: se guarda cuándo se aceptó y una huella del texto que estaba publicado ese día. Los términos se editan desde el panel, así que sin esa huella no habría manera de saber qué fue lo que alguien aceptó.

Pedidos

Un pedido se sigue por su estado, no por la memoria

Pendiente, pagado, preparando, despachado, en camino, entregado. Cada cambio queda con su fecha, así que el historial contesta «¿cuándo lo despachamos?» sin que nadie tenga que acordarse. Adentro de cada pedido está lo que se vendió con talle y código, la dirección, el pago con su estado, el comprobante de transferencia que subió el comprador y el número de seguimiento. El stock se descuenta al hacer el pedido y no al cobrarlo: si el pago no entra, la prenda vuelve a la pila.

Lista de pedidos con número, cliente, fecha, total y estado

Un pedido abierto: los productos con su talle y código, el cliente, el envío, el pago aprobado y el historial de estados

A medida

La consulta que existe antes de que exista el producto

La mitad de lo que hace un taller de estampado no está en el catálogo: son veinticuatro remeras para un grupo de trekking, treinta y un buzos de egresados, cuarenta gorras para una agencia. Eso antes vivía en WhatsApp. Ahora entra por un formulario que pide lo que hace falta para cotizar —una fila por combinación de talle, color y cantidad, la idea escrita y hasta tres imágenes de referencia— y queda anotado con un código para nombrarlo por teléfono, su estado y la nota de qué se presupuestó. No tocan el stock central: son prendas que todavía no se compraron.

Formulario de pedido a medida con las filas de talle, color y cantidad, la carga de imágenes y el campo para contar la idea — El texto de arriba dice por qué esto no puede ser un producto más: el precio depende de la cantidad, de cuántos colores tiene el diseño y de si va adelante, atrás o los dos. Por eso no hay precio de lista y cada pedido se cotiza.

Lista de pedidos a medida en el panel, cada uno con su código, cliente, cantidad de prendas y estado

Calendario

«¿Cómo me fue este mes?», contestado sin exportar nada

Antes eso se contestaba abriendo la lista de pedidos y sumando de a uno, o no se contestaba. El calendario muestra el mes entero de una: cuántas ventas hubo cada día, cuánto se facturó y qué días no vendieron nada. Tocando un día se abre qué se vendió, con talle y código de cada variante. Los días vacíos también son información — un calendario donde todo está lleno no se parece a ninguna tienda de verdad.

Calendario de ventas del panel: la grilla del mes con la cantidad de ventas y lo facturado cada día — Arriba, el mes cerrado en tres números: ventas, unidades y facturado. El mismo calendario tiene una vista de año que pone los doce meses juntos, que es lo que una lista de pedidos no puede hacer.

El resto de la tienda

Todo el texto, y también los colores

Ninguna palabra de la tienda está escrita en el código: la página de «Nosotros» se arma con bloques de foto y texto, las preguntas frecuentes se agregan de a una, el menú de arriba y el del pie se editan, y los términos, la privacidad y la tabla de talles también. El diseño va por el mismo camino: la paleta entera —fondo, texto, botones, la etiqueta de oferta— con una vista previa que se actualiza mientras se edita y que no cambia la tienda hasta apretar guardar. Y el newsletter guarda cuándo se anotó cada persona, desde dónde y si confirmó desde su casilla, que es lo único que se puede mostrar si alguien reclama que nunca se suscribió.

Página «Nosotros» de la tienda, con cuatro bloques que alternan foto y texto

Editor de diseño del panel: los campos de color a la izquierda y la vista previa de la tienda a la derecha

En el celular

Una tienda que entra en una mano

El mismo catálogo, los mismos filtros y la misma ficha, reordenados para una pantalla angosta: el menú se pliega, el buscador pasa a un renglón propio y los filtros se apilan arriba de la grilla. Sin versión recortada — no hay productos que sólo se vean desde la computadora.