12 dic 2025·8 min de lectura

Catálogo de productos con variantes y paquetes: esquema y patrones de interfaz

Diseña un catálogo de productos con variantes y paquetes usando reglas claras de SKU, lógica de inventario y patrones de interfaz que eviten combinaciones erróneas y sobreventa.

Catálogo de productos con variantes y paquetes: esquema y patrones de interfaz

Por qué las variantes y los paquetes se complican rápido

Un catálogo parece simple cuando cada producto es un artículo con un precio y un número de stock. Añade color, talla, duración de suscripción o embalaje específico por región y esa simplicidad se rompe. Una sola tabla de “Productos” ya no responde preguntas básicas: ¿qué exacto estamos vendiendo y cómo lo registramos?

Los compradores también esperan que los detalles estén correctos. Quieren elegir opciones, ver el precio correcto de inmediato y saber si su elección puede enviarse hoy. Si la página dice “En stock” pero la talla seleccionada no está, la confianza cae rápido. Si el precio cambia sólo en el checkout, aparecen tickets de soporte y devoluciones.

Los paquetes añaden una segunda capa de complejidad porque parecen productos pero se comportan como reglas. Un “Kit de inicio” puede incluir una botella, una bomba y un juego de filtros. Su disponibilidad depende de las piezas, y tus costes e informes deben seguir teniendo sentido.

Señales de que tu catálogo empieza a fallar:

  • Creas SKUs duplicados solo para representar una opción.
  • Los recuentos de stock parecen erróneos, sobre todo tras ventas de paquetes.
  • Las pantallas de administración se vuelven largas listas de artículos casi idénticos.
  • Los descuentos y los impuestos funcionan para artículos sueltos pero fallan en kits.
  • Los informes no responden “¿qué se vendió realmente?”

La solución es mayormente disciplina: un modelo de datos coherente y patrones de interfaz que hagan obvia la selección de opciones y la disponibilidad para clientes y equipo.

Términos en lenguaje sencillo: opciones, variantes, SKUs, paquetes

Cuando la gente dice “variantes”, a menudo mezcla varias ideas. Aclarar términos desde el principio facilita decisiones posteriores (esquema, UI, inventario).

La mayoría de equipos usan estas definiciones:

  • Opción: una elección que puede hacer el comprador, como Talla o Color.
  • Valor de opción: un valor dentro de una opción, como Talla = M o Color = Negro.
  • Variante: una combinación exacta de valores de opción, por ejemplo Talla M + Color Negro.
  • SKU: una unidad vendible que controlas en operaciones e inventario. Una variante suele mapear a un SKU, pero no siempre.
  • Paquete / kit / multipack: un producto formado por otros productos. Un paquete es un agrupamiento para marketing (las partes se pueden vender por separado). Un kit es un conjunto que “debe enviarse junto”. Un multipack es el mismo artículo repetido (paquete de 3 calcetines).

Los IDs también causan confusión en la práctica. Un ID interno es el que usa tu base de datos. Un SKU es tu código operacional (para picking, reabastecimiento e informes). Un código de barras (UPC/EAN) es lo que leen los escáneres. Un SKU puede tener múltiples códigos de barras (diferentes regiones) y algunos artículos no tienen ninguno.

Una buena regla para decidir si algo debe ser una variante vendible: si puede tener un precio distinto, inventario distinto, peso o reglas de envío distintas, trátalo como vendible. La misma camiseta en Talla M y Talla XL normalmente necesita contajes de stock separados, por eso deberían ser SKUs separados.

Antes de elegir un esquema, parte de las preguntas que el negocio debe responder cada día. Cuando alguien mira un artículo, ¿puedes decir con confianza: está disponible ahora, cuánto cuesta, cómo se enviará y qué reglas fiscales aplican?

Una forma útil de pensarlo es decidir dónde vive cada “dato”. Pon los hechos compartidos en el producto y los hechos que cambian en la variante (SKU). Si los mezclas, acabarás arreglando el mismo error en dos sitios.

Preguntas que suelen decidir campos a nivel producto vs a nivel variante:

  • Si cambia por talla/color/material, pertenece a la variante.
  • Si es cierto para todas las combinaciones, pertenece al producto.
  • Si lo informas por SKU (ventas, margen, devoluciones), guárdalo por variante.
  • Si operaciones lo usan para picking/packing/envío, guárdalo donde trabaja el almacén: en el SKU.
  • Si puede derivarse con seguridad (como el nombre a mostrar desde valores de opción), dérivalo y guarda solo la fuente.

Mantén una sola fuente de la verdad. Por ejemplo, no almacenes “precio” en producto y variante a la vez a menos que los roles estén claros (por ejemplo, el producto tiene MSRP y la variante el precio real de venta).

Planea para el cambio. Puedes añadir una nueva opción más adelante (como “Largo”), retirar una variante o fusionar SKUs tras cambios de proveedor. Esto va mejor cuando las variantes son registros de primera clase, no solo etiquetas.

Si construyes en AppMaster, un nombrado claro de entidades en el Data Designer facilita el mantenimiento cuando cambian los requisitos.

Un esquema práctico para productos y variantes

Un esquema limpio mantiene el catálogo comprensible cuando un producto simple se convierte en docenas de combinaciones vendibles. El objetivo es modelar las elecciones (lo que el comprador selecciona) separado de los ítems vendibles (lo que realmente almacenas y envías).

Un conjunto fiable de entidades:

  • Product: el ítem “padre” (nombre, descripción, marca, categoría, imágenes por defecto)
  • Option: un tipo de elección (Talla, Color)
  • OptionValue: los valores permitidos (Small, Medium, Red, Blue)
  • Variant: la unidad vendible (una combinación de valores)
  • VariantOptionValue: una tabla de unión que conecta una Variant con sus OptionValues

La unicidad de las variantes es donde muchos catálogos fallan. El enfoque más seguro es normalizar: asegurar un OptionValue por Option para cada Variant y prevenir combinaciones duplicadas. Si quieres rendimiento, guarda una “clave de variante” computada como color=red|size=m (o un hash) en Variant y hazla única por Product.

Mantén los campos que cambian por combinación en Variant, no en Product: SKU, código de barras, precio, precio de comparación, coste, peso, dimensiones, estado (activo/descontinuado) e imágenes (una imagen principal o un pequeño set).

Para atributos personalizados (como “material” o “instrucciones de cuidado”), evita añadir columnas nuevas continuamente. Un campo JSONB en Product o Variant funciona bien en PostgreSQL, acompañado de una capa pequeña de validación en tu app.

Reglas de SKU que perduren en el tiempo

Haz fiable la lógica de variantes
Crea reglas de selección de opciones y disponibilidad con lógica de negocio de arrastrar y soltar.
Comenzar a crear

Un SKU es un identificador para una unidad vendible que te comprometes a mantener estable. Debe responder a una pregunta: “¿Qué artículo exacto vendimos?” No debería intentar llevar tu nombre de marketing, todo el texto de opciones, temporada o una historia completa. Si lo sobrecargas, será difícil cambiar algo más tarde sin romper informes.

Decide pronto si los SKUs son asignados por humanos o generados. Los SKUs manuales son más seguros si ya tienes un ERP, códigos de barras o SKUs de proveedores que deben coincidir. Los SKUs generados son mejores cuando tienes muchas variantes y necesitas consistencia, pero solo si las reglas no cambian a mitad de año. Un punto intermedio común es un SKU base fijo que controlas más un sufijo corto generado para atributos de variante.

Reglas que se leen bien y sobreviven al crecimiento:

  • Mantén los SKUs estables una vez que se ha hecho un pedido. Nunca “arregles” SKUs antiguos renombrándolos.
  • Separa el ID interno del SKU. Usa el SKU para personas y el ID para bases de datos.
  • Usa prefijos cortos para familias de producto (por ejemplo, TSH, MUG), no palabras completas.
  • Evita significados que puedan cambiar (como “2026” o “SUMMER”) salvo que tu negocio realmente funcione así.

Los SKUs descontinuados no deben borrarse. márcalos inactivos, conserva su historial de precios y déjalos seleccionables en pedidos pasados, reembolsos e informes. Si reemplazas un SKU, guarda una referencia “reemplazado por” para que soporte pueda trazar qué ocurrió.

Reglas de validación previenen daños lentos: impón unicidad de SKU entre todos los ítems vendibles, permite solo letras, números y guiones, define longitud máxima clara (a menudo 20–32 caracteres) y reserva prefijos para casos especiales (por ejemplo, “BND-” para paquetes). En AppMaster, estas comprobaciones encajan como restricciones de datos más un Business Process que bloquee guardados cuando se rompa una regla.

Lógica de inventario más allá de disponible/no disponible

Crea paquetes que suman
Prototipa paquetes, kits y la lógica de desglose de componentes sin código personalizado ni plugins.
Crear proyecto

El inventario se complica cuando el mismo “producto” puede significar muchas unidades vendibles distintas. Antes de escribir reglas, elige tu unidad de inventario: ¿controlas stock a nivel producto, variante o ambos?

Si los clientes eligen talla o color, el stock a nivel variante suele ser lo más seguro. Una camiseta puede estar “en stock” en general, pero la variante Small-Blue puede estar agotada. El nivel producto funciona para ítems donde las variantes no cambian lo que físicamente almacenas (por ejemplo, una licencia digital con distintos planes de facturación). Algunos equipos mantienen ambos: producto para informes y variante para ventas.

La prevención de sobreventa no es una bandera mágica sino estados claros. La mayoría de catálogos necesitan reservas (retener unidades brevemente para carritos o pedidos impagos), pedidos pendientes (permitir ventas con fechas de envío claras), buffers de stock (cantidad oculta para cubrir retrasos de sincronización) y actualizaciones atómicas (reducir stock en la misma operación que confirma el pedido).

Los casos límite son donde aparece el “stock misterioso”. Las devoluciones deben sumar stock solo después de inspección, no cuando se crea la etiqueta de devolución. Los artículos dañados deben moverse a un estado o ubicación separado para que no aparezcan vendibles. Los ajustes de stock necesitan una pista de auditoría (quién cambió qué y por qué), especialmente si múltiples canales actualizan inventario.

Los paquetes y kits añaden una regla clave: no decrementar un registro “paquete” si el paquete es solo un agrupamiento. Decrementa los artículos componentes. Un multipack de 3 debe reducir tres unidades del mismo SKU; un kit debe reducir una unidad de cada componente.

Ejemplo: un “Kit de inicio” incluye 1 botella y 2 filtros. Si tienes 10 botellas y 15 filtros, la disponibilidad del kit es 7 porque los filtros son el límite. Las matemáticas basadas en componentes mantienen informes, reembolsos y reabastecimiento consistentes.

En AppMaster, esto se mapea limpiamente a tablas de variantes en el Data Designer y lógica de reserva/decremento en el Business Process Editor, de modo que cada checkout sigue las mismas reglas.

Modelar paquetes y kits sin romper los informes

Los paquetes son donde los catálogos suelen derivar en casos especiales. El enfoque más simple es modelar paquetes como ítems vendibles normales y luego adjuntar una lista clara de componentes.

Una estructura limpia es: Product (ítem vendible) más BundleLines. Cada BundleLine apunta a un SKU componente (o a un producto componente más una variante requerida) y guarda una cantidad. Los pedidos siguen mostrando “un artículo”, pero puedes expandirlo en partes cuando necesites coste, inventario y detalle de preparación.

La mayoría de configuraciones de paquete encajan en una de estas:

  • Paquete fijo (kit): siempre los mismos componentes y cantidades.
  • Paquete configurable: el cliente elige entre componentes permitidos (aún se guarda como líneas en el pedido).
  • Paquete virtual: un agrupamiento de marketing (a menudo sin efecto en inventario), útil para merchandising sin forzar lógica de cumplimiento.

El precio es donde los equipos rompen informes accidentalmente. Decide desde el principio qué aparece en la línea del pedido y qué alimenta los informes de margen e inventario. Enfoques comunes: precio fijo de paquete, suma de partes o suma con descuento con reglas por componente (por ejemplo, “elige 3, el más barato al 50%”).

El inventario debe ser igual de estricto: un kit está disponible solo si cada componente requerido está disponible en la cantidad necesaria. Para informes, guarda dos vistas de la venta:

  • Ítem vendido: el SKU del paquete (para ingresos, conversión y merchandising).
  • Componentes consumidos: las BundleLines expandidas (para movimiento de stock, COGS y listas de picking).

En AppMaster, esto encaja de forma natural: una tabla Bundle más filas BundleLine, con Business Processes que expanden componentes en el checkout y escriben la venta del paquete y el consumo de componentes en una sola transacción.

Patrones de UI para elegir opciones y variantes

Centraliza las actualizaciones de inventario
Mantén las actualizaciones de stock en un único flujo para que pedidos, cancelaciones y devoluciones sean consistentes.
Crear proceso de pago

Una buena UI de opciones mantiene a la gente avanzando. Una mala UI les hace adivinar, chocar con errores y marcharse. La clave es guiar al comprador hacia una variante real y comprable temprano, mostrando claramente lo que cambian sus elecciones.

Para clientes: opciones primero, variantes después

Un patrón fiable es mostrar las opciones (Talla, Color, Material) y luego calcular y mostrar solo las elecciones que siguen teniendo sentido.

En lugar de dejar que los clientes elijan cualquier combinación y fallar al Añadir al carrito, desactiva las combinaciones imposibles tan pronto como el usuario haga una elección. Por ejemplo, cuando alguien escoge Color = Black, las tallas que no existen en Black deben quedar deshabilitadas (no eliminadas), para que el cliente entienda qué no está disponible.

A medida que la selección cambia, actualiza las partes que más importan: precio (incluido precio en oferta y cualquier descuento de paquete), imágenes principales (coincidir con el color o estilo seleccionado), estado de stock (stock exacto de la variante, no stock genérico del producto), estimación de entrega (si varía por variante) y opcionalmente el SKU o “código de artículo” para soporte.

Mantén la interfaz serena. Muestra pocos grupos de opciones a la vez, evita desplegables enormes cuando swatches o botones funcionan mejor y deja claro cuál es la selección actual.

Para administración: editar variantes como una hoja de cálculo

En administración, la gente necesita rapidez, no tarjetas bonitas. Una cuadrícula de variantes funciona bien: cada fila es un SKU, cada columna es una opción o una regla (precio, código de barras, peso, stock, activo/inactivo). Añade acciones masivas para tareas comunes como actualizar precios, alternar disponibilidad o asignar imágenes.

Si lo construyes en AppMaster, una configuración práctica es una rejilla vinculada a tu tabla Variant con filtros (valor de opción, estado activo, poco stock) y una acción de actualización masiva que valide reglas antes de guardar.

Paso a paso: selección de variante y comprobaciones de disponibilidad de paquetes

Un flujo de selección debe sentirse simple, pero necesita reglas estrictas bajo el capó. El objetivo es saber siempre qué SKU exacto está configurando el comprador y si puede comprarse ahora.

Selección de variante (producto individual)

Carga algo más que el nombre del producto y las imágenes. Necesitas el conjunto completo de valores de opción (Talla, Color) y la lista de combinaciones válidas de variantes que existen como SKUs.

Un flujo fiable:

  1. Obtén el producto, sus opciones y todas las variantes existentes (o un mapa compacto de combinaciones válidas).
  2. Guarda las selecciones actuales del comprador (por ejemplo: Size=M, Color=Black) y actualízalas en cada clic.
  3. Después de cada cambio, busca la variante coincidente comparando los valores seleccionados con tu lista de variantes.
  4. Si hay coincidencia y es comprable (activo, con precio, no bloqueado), habilita Añadir al carrito.
  5. Si no hay coincidencia, mantén Añadir al carrito deshabilitado y guía al comprador hacia una elección válida.

Un pequeño detalle de UI que evita frustración: desactiva los valores de opción imposibles tan pronto como se hagan elecciones anteriores. Si Size=M solo existe en Black, muestra otros colores como no disponibles una vez seleccionado M.

Disponibilidad de paquete (kit formado por componentes)

Para paquetes, “en stock” no es un único número. Depende de componentes. La regla habitual es:

bundle_available = mínimo entre componentes de floor(component_stock / component_qty_per_bundle)

Ejemplo: un “Kit de inicio” necesita 1 botella y 2 filtros. Si tienes 10 botellas y 9 filtros, la disponibilidad es min(floor(10/1)=10, floor(9/2)=4) = 4 kits.

Los mensajes de error deben ser concretos. Es preferible “Solo 4 kits disponibles (los filtros limitan este paquete)” a “Agotado”. En AppMaster, este tipo de comprobación es sencillo de expresar en un Business Process: calcula la variante coincidente primero, luego los límites del paquete y devuelve un estado claro para que la UI lo muestre.

Errores comunes y trampas a evitar

Lanza sin dependencia
Despliega en AppMaster Cloud o exporta el código fuente cuando necesites control total.
Desplegar app

Los catálogos fallan cuando modelas “todo lo que podría existir” en lugar de “lo que realmente vas a vender”. La forma más rápida de meterte en un callejón es generar todas las combinaciones posibles de opciones desde el inicio y luego intentar mantenerlo limpio conforme crece el catálogo.

Crear variantes que nunca se almacenarán es la trampa clásica. Si tienes 4 colores × 6 tallas × 3 materiales, son 72 variantes. Si solo 10 se venderán, las otras 62 filas generan desorden, invitan a errores y ralentizan informes.

El precio es otra fuente silenciosa de bugs. Los problemas empiezan cuando el mismo precio existe en múltiples sitios (producto, variante, tabla de precios, tabla de promociones) sin una fuente de verdad única. Una regla simple ayuda: guarda el precio base una vez y sólo guarda sobrescrituras donde realmente se necesiten (por ejemplo, una variante con precio distinto).

Los paquetes y kits fallan en inventario cuando decrementas tanto el paquete como sus componentes. Si vendes un “Kit de inicio” que incluye 1 botella y 2 filtros, restar 1 kit y además restar 1 botella y 2 filtros hace que el stock llegue a cero demasiado pronto. Mantén el paquete como ítem vendible, pero calcula disponibilidad y decrementos desde sus componentes.

Las herramientas de administración pueden causar daños si permiten datos inválidos. Agrega salvaguardas temprano:

  • Bloquea SKUs duplicados, incluso entre ítems archivados.
  • Requiere que cada variante tenga todos los valores de opción (no “talla faltante”).
  • Evita que dos variantes compartan la misma combinación de opciones.
  • Valida componentes de paquetes (no cantidades cero, no SKUs faltantes).

Finalmente, planifica el cambio. Añadir una nueva opción después (como “Ancho” para zapatos) es una migración, no una casilla de verificación. Decide qué pasa con variantes existentes, cómo se establecen los valores por defecto y cómo los pedidos antiguos mantienen su SKU y snapshot de opciones.

Comprobaciones rápidas antes de lanzar

Del esquema al backend
Crea backends listos para API con código fuente real generado desde tu modelo.
Crear backend

Antes de publicar, haz una pasada sobre las cosas que fallan en la vida real: encontrar SKUs, actualizar stock y bloquear compras imposibles.

Asegúrate de que cada SKU vendible sea fácil de localizar. La búsqueda debe encontrarlo por nombre, código SKU, código de barras/GTIN y atributos clave (como talla o color). Si usas escaneo en almacén, prueba algunos escaneos físicos y confirma que apuntan al SKU exacto, no solo al producto padre.

Sé estricto sobre dónde ocurren los cambios de stock. Elige una fuente de la verdad (tu lógica de movimiento de inventario) y asegúrate de que cada evento la utilice: pedidos, cancelaciones, reembolsos, ajustes manuales y ensamblaje de paquetes. Si el stock puede editarse en dos pantallas o flujos, la deriva está garantizada.

Comprobaciones de lanzamiento que vale la pena ejecutar:

  • Selecciona opciones en la UI y confirma que las combinaciones inválidas se bloquean temprano (antes de añadir al carrito), no en el checkout.
  • Para paquetes, confirma que la disponibilidad viene del componente más escaso y con la cantidad correcta (2 baterías por kit debería reducir la disponibilidad a la mitad).
  • Retira un SKU y verifica que desaparece de la navegación y búsqueda, pero que sigue apareciendo correctamente en pedidos pasados, facturas e informes.
  • Haz un pedido de prueba, cancélalo y vuelve a hacerlo; el stock debe volver y reservarse limpiamente.

Si construyes en AppMaster, mantén las reglas de actualización de stock en un solo Business Process y llámalo desde cada ruta. Ese hábito único previene la mayoría de bugs de inventario.

Escenario de ejemplo y próximos pasos prácticos

Imagina una tienda de ropa que aún necesita un catálogo serio.

Vendes una camiseta con dos opciones: Talla (S, M, L) y Color (Black, White). Cada combinación comprable es su propia variante con su propio SKU, precio (si hace falta) e inventario.

En el esquema, guarda un Product para “Classic T-shirt”, dos Option (Size, Color) y varias Variant. Cada Variant guarda sus OptionValues seleccionados (por ejemplo: Size=M, Color=Black) y el SKU (por ejemplo: TSH-CL-M-BLK). El inventario se controla a nivel Variant, no Product.

En la UI, estrecha las opciones y evita callejones. Un patrón limpio es: mostrar todos los Colors primero y luego solo las Sizes que existen para el Color elegido (o al revés). Si “White + L” no existe, no permitas seleccionarla o muéstrala deshabilitada con una nota clara.

Ahora añade un paquete: “Gift Set” que incluye:

  • 1x Classic T-shirt (cualquier variante)
  • 1x Sticker pack (SKU simple)

La disponibilidad del paquete está limitada por el componente más escaso. Si Sticker pack tiene stock 5, no puedes vender más de 5 paquetes aunque las camisetas estén sobradas. Si el paquete requiere una variante de camiseta específica (por ejemplo, Black M), entonces la disponibilidad del paquete es min(StickerPackStock, BlackMStock).

Pasos prácticos en AppMaster:

  • Construye las tablas en el Data Designer (Products, Options, OptionValues, Variants, VariantOptionValues, Inventory, Bundles, BundleComponents).
  • Implementa “find valid variants” y “calculate bundle availability” en el Business Process Editor.
  • Genera UIs web y nativas desde el mismo proyecto, usando las mismas reglas de filtrado de variantes y disponibilidad en todas partes.

Si quieres prototipar esto de extremo a extremo rápidamente, AppMaster (appmaster.io) está pensado para construir apps completas con lógica de negocio real, que es exactamente de lo que dependen la selección de variantes y las reglas de inventario para paquetes.

Fácil de empezar
Crea algo sorprendente

Experimente con AppMaster con plan gratuito.
Cuando esté listo, puede elegir la suscripción adecuada.

Empieza