El segundo mensaje de la marca de cuidado masculino a la que llamamos Kestrel llegó unas semanas después del proyecto de secciones personalizadas. Era una sola captura de la ficha de producto de una joyería con una fila de tarjetas bajo el botón de añadir al carrito: Compra 1 y llévate 1 gratis, elige tu segunda pieza. Debajo, una pregunta corta: ¿podemos tener esto en nuestras fichas de producto?
Una oferta Shopify compra uno y llévate otro gratis se activa en el panel en un momento. Lo difícil es que los clientes la usen. Este caso práctico muestra cómo construimos el selector, por qué no copiamos el código de la tienda de referencia y el único ajuste de Shopify que hace gratis el segundo producto.
Sobre este caso práctico: es una composición basada en trabajo real con Shopify. El nombre de la marca, las fotos de producto y algunos detalles se han cambiado, y las imágenes de producto son ilustraciones. Los patrones de código, los problemas y las soluciones son exactamente como los resolvimos.
El proyecto de un vistazo
| Cliente | Marca directa al consumidor de cuidado masculino, Países Bajos (tienda en neerlandés, EUR) |
| Plataforma | Shopify Online Store 2.0, se mantuvo el tema premium existente |
| Alcance | 1 snippet, 1 hoja de estilos, 1 script, 1 bloque nuevo en la ficha de producto, sin apps |
| Descuento | Descuento automático nativo de Shopify (Compra X y llévate Y) |
| Entrega | Instalado por el propio comerciante en el editor de código del tema, archivo por archivo |
Por qué un descuento BOGO nativo no basta
Shopify admite descuentos Compra X y llévate Y desde hace años. Lo configuras y el carrito lo aplica en cuanto están los productos correctos. El problema está en en cuanto. El cliente tiene que saber que la oferta existe, salir de la ficha, encontrar un producto válido, añadirlo y volver. La mayoría no lo hace. Un banner de “1+1 gratis” sin forma de actuar produce sobre todo correos preguntando por qué no funcionó el descuento.
La tienda de referencia lo había resuelto con un selector: los productos válidos aparecen justo donde se toma la decisión de compra, un toque para elegir y el botón principal cambia a Añadir 2 productos al carrito. Esa era la experiencia que quería Kestrel.
Leer la referencia y luego dejarla a un lado
El comerciante nos envió el CSS, el JavaScript y el HTML de la tienda de referencia. Era un trabajo cuidadoso: unas 400 líneas con paneles inferiores, una capa de “ver todo”, detección del color de fondo de las fotos y su propia petición de añadir al carrito. También estaba escrito para otro tema, otro formulario y otro carrito lateral, y pertenecía a otra persona.
Así que lo usamos como descripción del comportamiento, no como código. Antes de escribir nada, leímos el formulario de producto del tema de Kestrel. Fue la hora más valiosa del proyecto.
El descubrimiento: el tema ya sabía añadir dos productos
El elemento product-form del tema tiene una función para casillas de “se compran juntos a menudo”. Al enviar, recoge cada input[name="bundles"] marcado dentro de un elemento vinculado al formulario y lo envía a /cart/add.js junto con el producto principal. Además gestiona el carrito lateral, el modo de página de carrito, los mensajes de error y el botón fijo de añadir al carrito.
Eso significaba que el selector no necesitaba su propia petición al carrito. Cada tarjeta contiene una casilla oculta llamada bundles, y el elemento del selector lleva el id del formulario:
<bogo-picker form="{{ product_form_id }}">
<label class="bogo-card__btn">
<input type="checkbox" name="bundles" value="{{ variant.id }}" class="sr-only">
<span>Choose</span>
</label>
</bogo-picker>Al elegir una tarjeta se marca su casilla. Al pulsar el botón principal, el tema añade ambos productos en una sola petición, abre su propio carrito lateral y actualiza el contador, igual que con cualquier otro producto. Nuestro JavaScript son unas cien líneas y ninguna toca el carrito.
Los detalles que lo hacen parecer nativo
- Un producto gratis cada vez. Al elegir una tarjeta se desmarcan las demás, así nadie añade tres regalos por error.
- Un botón que dice lo que va a pasar. Con una tarjeta elegida, el texto cambia a “Añadir 2 productos al carrito”. El tema restablece ese texto al cambiar de variante, así que un pequeño
MutationObserverlo vuelve a poner. - Variantes en la tarjeta. Los productos con varias variantes muestran un desplegable compacto, y el valor de la casilla lo sigue.
- Tarjetas alineadas. Las tarjetas comparten filas con CSS subgrid, así nombres, precios y botones quedan alineados aunque un nombre ocupe dos líneas.
- Primero el móvil. En el teléfono se ven 2,3 tarjetas y la siguiente asoma por el borde; en escritorio, tres tarjetas con flechas.
- Reinicio limpio. Tras añadir al carrito, el selector escucha el evento
cartUpdatedel tema y borra la selección.
El bloque se añade en el editor de temas como cualquier otro bloque de la ficha de producto. El comerciante elige una colección de productos válidos o un metacampo con una lista de productos para ofertas específicas. Textos como “Gratis”, “Elegir” y el del botón son ajustes. El producto actual y los agotados se excluyen automáticamente.
Cómo hacer que el segundo producto sea gratis de verdad
El selector solo pone dos productos en el carrito. El precio lo gestiona Shopify con un descuento automático:
- Crea una colección con los productos que se pueden regalar, por ejemplo “BOGO Gratis”.
- En Descuentos, crea un descuento Compra X y llévate Y con el método Automático.
- El cliente compra: cantidad mínima 1 de una colección con todos los productos de pago.
- El cliente obtiene: cantidad 1 de “BOGO Gratis”, con el valor Gratis.
- Marca Establecer un número máximo de usos por pedido e introduce 1; si no, tres compras dan tres productos gratis.
Shopify no tiene la opción “todos los productos” en el campo El cliente compra, así que hace falta una colección. Una colección automática con la condición “el precio es mayor que 0” se mantiene sola. Conviene conocer un caso especial: si los productos gratis también están en esa colección, comprar dos artículos de “BOGO Gratis” deja uno gratis. Para la mayoría de tiendas está bien. Si no, etiqueta los productos BOGO y excluye la etiqueta en las condiciones de la colección.
Instalarlo sin subir un tema
El tema publicado de Kestrel tenía otros cambios sin publicar en curso, así que subir una versión nueva del tema no era posible. Entregamos la función como cinco pasos precisos para el editor de código: tres archivos nuevos (un snippet, una hoja de estilos y un script) y dos pequeñas adiciones en la sección de producto, una línea de render y una entrada de bloque en el esquema. Cada paso indicaba qué línea buscar y qué pegar encima. Como todos los cambios solo añaden, sobreviven a la siguiente actualización del tema con unos minutos de trabajo.
También diseñamos una miniatura sencilla para la colección “BOGO Gratis”, para que se vea terminada allí donde el tema la muestre.
Lo que diríamos a cualquier tienda que piense en BOGO
- Pon la elección donde se toma la decisión. Una oferta que el cliente tiene que montar solo es una oferta que casi todos ignoran.
- Lee tu tema antes de escribir código. La mejor línea de este proyecto es la que no tuvimos que escribir, porque el tema ya añadía bundles al carrito.
- Deja la lógica de precios en Shopify. Un descuento automático nativo funciona en el carrito, en el checkout y en todos los informes, y se puede pausar sin tocar el tema.
- Limita los usos por pedido desde el primer día.
Si quieres un selector de regalo, un creador de packs u otra función personalizada en tus fichas de producto, consulta nuestro servicio de desarrollo de temas Shopify o cuéntanos sobre tu tienda.
Preguntas frecuentes
¿Shopify permite compra uno y llévate otro gratis sin app?
Sí. Los descuentos automáticos Compra X y llévate Y vienen integrados en Shopify. Lo que no ofrece es una forma de elegir el producto gratis en la ficha, y eso es lo que añade el selector.
¿Funcionará el selector con mi tema?
La idea funciona con cualquier tema Online Store 2.0. La implementación depende de cómo añade productos el formulario de tu tema. Aquí reutilizamos su función de packs; en otros temas añadimos ambos artículos con una sola petición a la Cart API.
¿Puede el producto gratis tener variantes?
Sí. Los productos con varias variantes muestran un pequeño desplegable en la tarjeta, y la variante elegida es la que se añade.
¿Pueden los clientes abusar de la oferta?
Lo que es gratis lo decide el descuento, no el selector. Con un máximo de un uso por pedido, nadie puede llevarse más de un producto gratis en el mismo pedido.
¿Puedo mostrar regalos distintos en productos distintos?
Sí. El bloque lee una colección por defecto, y un metacampo con lista de productos puede sustituirla por producto.