Una tarjeta de producto no está preparada para vender solo porque muestra una foto y un precio. Si el producto de Shopify está disponible en varias tallas, colores, materiales o estilos, la página de la biografía debe conservar esas opciones y enviar la combinación exacta a Shopify.
De lo contrario, el comprador repite su selección al salir de la página o llega al checkout con el artículo equivocado. Ambos casos añaden fricción en el momento de mayor intención de compra.
Un bloque de producto Shopify fiable debe cumplir cuatro funciones:
- Leer de Shopify los nombres y valores de las opciones.
- Resolver la combinación seleccionada a una variante real.
- Actualizar el precio y la disponibilidad de esa variante.
- Abrir Shopify con la variante exacta elegida.
Esta guía explica el modelo, la interfaz y las pruebas necesarias para que el recorrido sea fiable en móvil.
Diferencia entre una opción y una variante
Shopify utiliza opciones para describir elecciones como Talla o Color. Una variante es una combinación comprable de esas elecciones.
Supongamos que una camiseta tiene:
- Talla: Pequeña, Mediana, Grande
- Color: Negro, Natural
El catálogo puede contener seis variantes. Negro y Mediana es una variante. Natural y Grande es otra. Cada una puede tener su propio identificador, imagen, precio, SKU, inventario y disponibilidad.
La página de la biografía nunca debería construir una variante uniendo etiquetas y suponiendo que existe. Debe seleccionar una variante devuelta por Shopify. Algunas combinaciones pueden estar ausentes o no disponibles.
Shopify sigue siendo la fuente de verdad para:
- etiquetas de opciones;
- valores;
- combinaciones válidas;
- identificadores de variantes;
- precios;
- imágenes;
- disponibilidad.
Así se evita presentar una lista antigua de tallas cuando el comercio modifica el catálogo.
Conserva las etiquetas que entiende el cliente
No sustituyas etiquetas descriptivas por controles genéricos. Si Shopify llama Talla a una opción, muestra Talla. Si la tienda utiliza Cintura, Acabado, Aroma o Tamaño del paquete, conserva esas palabras.
La regla es esencial cuando hay varias opciones. Una fila con M, Negro y Regular resulta ambigua sin las etiquetas Talla, Color y Corte.
Las etiquetas también deben respetar el idioma y la terminología del comercio en Shopify. La página de la biografía es una superficie de venta, no un segundo catálogo que cambia los nombres en silencio.
Elige el control adecuado para cada diseño
Las opciones pueden presentarse como botones visibles o listas desplegables. El control adecuado depende del espacio y del número de valores.
Botones para una ficha de producto
Los botones muestran los valores y reducen el número de toques. Funcionan bien cuando la página presenta un producto en detalle y la lista es corta.
Ejemplos:
- XS, S, M, L, XL
- Negro, Blanco, Rojo
- 250 ml, 500 ml
Listas desplegables para diseños densos
Una lista desplegable es más adecuada cuando existen muchos valores o cuando el producto aparece dentro de una tienda compacta o un bloque de pestañas. Ahorra espacio vertical, aunque oculta las opciones hasta que se abre.
Ningún selector para una sola variante
Si el producto tiene una única variante comprable, no muestres un control con un valor innecesario. Mantén la acción directa.
El control puede cambiar según el diseño. Los datos y el comportamiento del checkout deben ser iguales.
Resuelve las combinaciones mientras el cliente elige
Cada selección debe recalcular inmediatamente qué combinaciones siguen siendo válidas.
Si el color Óxido solo existe en Mediana y Grande:
- Elegir Óxido debe desactivar Pequeña.
- Elegir Mediana debe resolver la variante Óxido y Mediana.
- El precio, la imagen y la disponibilidad deben cambiar si esa variante es distinta.
- El botón de compra debe transmitir el identificador resuelto.
Los valores no disponibles deberían aparecer desactivados en lugar de desaparecer sin explicación. Una lista estable permite entender que la opción existe, pero no puede comprarse ahora.
Si una combinación deja de ser válida después de actualizar los datos, la página debe exigir una nueva selección en lugar de conservar un identificador obsoleto.
Muestra el stock de la variante
Mostrar «Disponible» para todo el producto es engañoso cuando solo queda una talla. La disponibilidad pertenece a la variante seleccionada.
Utiliza estados claros:
- Disponible: la combinación puede comprarse.
- No disponible: la combinación existe, pero no puede comprarse en este momento.
- Selección obligatoria: falta una opción requerida.
- Producto no disponible: Shopify ya no devuelve una variante comprable.
Desactiva el botón de compra cuando la selección esté incompleta o agotada. No esperes al checkout de Shopify para revelar un error evitable.
El inventario puede cambiar entre la carga de la página y el checkout. Shopify debe tomar la decisión final. La página ofrece una vista fiel y Shopify valida el pedido.
Envía la variante exacta al checkout de Shopify
Los enlaces permanentes de carrito de Shopify pueden añadir una variante y cantidad concretas antes de dirigir al carrito o checkout.[1] El identificador de variante es la transferencia fiable, no el título o el texto de la opción.
El recorrido esperado es:
- El comprador selecciona todas las opciones obligatorias.
- La página resuelve la combinación a un identificador de variante.
- El comprador pulsa el botón de compra.
- Shopify se abre con esa variante y cantidad.
- Shopify gestiona envío, impuestos, pago, descuentos y confirmación.
Klyqme no sustituye el checkout de un producto Shopify. Proporciona la superficie móvil y envía el artículo elegido al flujo de compra de la tienda.
Consulta cómo añadir productos Shopify a una biografía de Instagram para ver la configuración completa.
Sincroniza el precio y la imagen
Una selección puede modificar más que el stock. Shopify permite asignar un precio o imagen diferente a una variante.
Cuando existan esos datos, actualiza el estado visible. Quien selecciona un producto rojo no debería seguir viendo una imagen negra si Shopify proporciona una roja. Un paquete más caro no debe conservar el precio base.
Utiliza la imagen general del producto solo cuando no haya una imagen específica de variante. No inventes precios, promociones ni estados de inventario dentro de la configuración de la página.
Diseña para el pulgar
Una página de comercio social suele abrirse en un teléfono. Los selectores necesitan:
- una superficie táctil suficientemente grande;
- estados seleccionado, disponible, desactivado y foco visibles;
- etiquetas que no dependan únicamente del color;
- texto que pueda ocupar varias líneas;
- contraste suficiente en temas claros y oscuros;
- un botón de compra legible en pantallas estrechas.
Una muestra de color también debe tener una etiqueta textual o accesible. «Natural» comunica más que un círculo beige y es útil para personas que no distinguen todos los colores.
Evita el desplazamiento horizontal para unas pocas tallas. Si existen decenas de valores, utiliza una lista desplegable o una cuadrícula con salto de línea.
Adapta el diseño a la decisión de compra
Cada formato admite un nivel de detalle:
- Destacado o ficha: un producto prioritario con opciones visibles y una acción principal.
- Tarjeta o banner: un producto con la información esencial.
- Línea: un producto secundario compacto con imagen, nombre, precio y acción.
- Cuadrícula o lista de colección: varios productos para descubrir.
El producto destacado debe mostrar las elecciones necesarias para comprar. Un elemento compacto puede llevar a una ficha más completa o a Shopify cuando toda la interfaz de opciones no cabe.
Para planificar el resto de la página, consulta la comparación de enlaces en biografía para Shopify y la guía para vender desde un enlace en la biografía.
Prueba cada rama importante
Probar únicamente la talla predeterminada no es suficiente. Utiliza una matriz que cubra la lógica del catálogo.
Para un producto con dos opciones, prueba:
- la primera combinación disponible;
- otra talla con el mismo color;
- otro color con la misma talla;
- una combinación no disponible;
- una variante con otra imagen;
- una variante con otro precio, si existe;
- el destino del checkout para cada elección.
Prueba también:
- un producto con una sola variante;
- un producto con una opción;
- un producto con varias opciones;
- un producto que pasa a estar agotado;
- una etiqueta localizada muy larga;
- una recuperación de datos Shopify lenta o fallida.
En el checkout, verifica que el carrito contiene el producto, la variante, la cantidad y el precio esperados. Detén la prueba antes del pago cuando utilices una tienda en producción.
Errores frecuentes
Escribir tallas y colores de forma manual
La página queda obsoleta en cuanto el comercio modifica Shopify.
Enviar el producto en lugar de la variante
El comprador debe seleccionar de nuevo o puede recibir el artículo equivocado.
Ocultar las etiquetas de opción
Los valores resultan ambiguos, sobre todo cuando existen varios grupos.
Confundir el stock del producto con el de la variante
Una talla disponible puede hacer que todas las demás parezcan comprables.
Mantener activo el botón con una selección inválida
El error se desplaza a Shopify y reduce la confianza.
Recortar la imagen para cumplir una altura fija
La fotografía de producto suele contener detalles útiles. Salvo que el diseño exija un recorte, conserva su proporción con anchura completa y altura automática.
Lista de control
- Los datos proceden de la tienda Shopify conectada.
- Cada opción muestra su etiqueta de Shopify.
- Solo pueden seleccionarse combinaciones reales.
- Precio, imagen y stock responden a la variante elegida.
- Los valores no disponibles están claramente desactivados.
- El botón permanece inactivo hasta obtener una selección válida.
- La URL del checkout contiene la variante resuelta.
- Se han probado superficies táctiles y textos largos.
- Shopify confirma el carrito correcto antes del pago.
Cuando se cumplen estas reglas, la página de la biografía no se limita a promocionar un producto. Conserva la decisión de compra hasta Shopify.
Fuentes
Preguntas frecuentes
No. El bloque de producto debe leer las etiquetas, valores, combinaciones y disponibilidad desde el catálogo Shopify conectado.
Sí. El precio visible debe actualizarse cuando Shopify devuelve otro precio para la variante seleccionada.
La página debe marcar el valor o la combinación como no disponible e impedir la compra. Shopify realiza la validación final en el checkout.
Los botones funcionan para listas cortas y visibles en una ficha. Las listas desplegables funcionan en espacios reducidos o con muchos valores. Ambos controles deben resolver la misma variante Shopify.
El pago de un producto Shopify se realiza en el checkout de la tienda. Klyqme envía allí la variante seleccionada.