El mensaje llegó un miércoles por la mañana, con una captura de pantalla y un fragmento de código antiguo. El dueño de una tienda online de Copenhague que vende maletas de aluminio y artículos de viaje, a la que llamaremos Havn & Co., había visto algo en el carrito de un competidor y lo quería también: una pequeña caja bajo los productos con el texto Paquete de seguridad: protección contra pérdida, robo y daños y un interruptor que el cliente puede activar antes de pagar.
Lo queremos exactamente así, decía el mensaje, y queremos cambiar nosotros mismos el texto, la imagen y los colores. Sin otra app, por favor. Este caso de estudio muestra cómo construimos ese interruptor de protección de envío en Shopify: qué hace la función, por qué existe cada parte, la sorpresa que encontramos en la tienda real y todas las opciones que añadimos al editor del tema.
Sobre este caso de estudio: se basa en un proyecto real de Shopify para un cliente danés. El nombre de la tienda se ha cambiado y las imágenes son ilustraciones. Las funciones, los ajustes y las pruebas se describen tal como se entregaron.
El proyecto de un vistazo
| Cliente | Tienda online danesa de maletas y artículos de viaje, precios en DKK |
| Plataforma | Shopify, tema Horizon 3.5, app de carrito Upcart |
| Función | Interruptor opcional «Paquete de seguridad» (protección de envío) dentro del carrito |
| Entregado | 1 snippet, 1 script, 1 hoja de estilos, un nuevo grupo Safety package en los ajustes del tema y pequeños añadidos en 4 archivos |
| Requisitos | Sin app de protección adicional, sin cambiar de tema, todo editable en el editor del tema, textos en danés |
El encargo: lo que pidió la tienda
A partir de la captura, el ejemplo de código y una llamada breve, resumimos la petición en cinco necesidades concretas:
- Una caja de protección en el carrito, justo debajo de los productos, con icono, título, descripción corta e interruptor.
- Un toque para añadirla o quitarla, con el total actualizado al instante y sin recargar la página.
- Un carrito limpio: la protección no debe aparecer como una línea de producto extra que confunda.
- Control total en el editor del tema: texto, imagen, tamaños, colores y el producto con el precio, sin tocar código.
- Textos en danés en la tienda: Sikkerhedspakke y Beskyttelse mod tab, tyveri og skade.
Qué es un interruptor de protección de envío y por qué se usa
Un interruptor de protección de envío permite al cliente elegir, en el último paso antes de pagar, abonar una pequeña tarifa como cobertura si el paquete se pierde, es robado o llega dañado. Detrás del interruptor hay un producto normal de Shopify (en nuestras ilustraciones cuesta 49 kr) que se añade o se quita del carrito.
Para una tienda que vende maletas de varios cientos de coronas, cumple tres funciones a la vez:
- Tranquilidad en el momento justo. La pregunta «¿y si se pierde?» se responde junto al botón de pago, justo donde surge la duda.
- Más ingresos por pedido. Cada cliente que la elige suma la tarifa al pedido, y la tienda decide cómo usarla para cubrir incidencias.
- Menos consultas al soporte. Si un paquete desaparece, ya existe un acuerdo claro sobre qué está cubierto.
Una regla marcó todo el diseño: en la UE, un servicio adicional de pago debe elegirlo el cliente de forma activa. La Directiva sobre los derechos de los consumidores (2011/83/UE, artículo 22) impide usar casillas premarcadas para pagos adicionales. Por eso el interruptor está desactivado por defecto, y el modo opcional de añadido automático está claramente indicado en los ajustes y siempre respeta al cliente que lo desactiva.
La sorpresa: el carrito no era el del tema
Nuestra primera versión colocaba la caja en el carrito lateral del tema Horizon. Funcionaba en el código, pero cuando el cliente miró la tienda real, no aparecía por ningún lado. El motivo: la tienda usa Upcart, una app de carrito que reemplaza por completo el del tema y dibuja el suyo, aislado de los estilos del tema.
En lugar de pedir al cliente que pegara código en la app, inspeccionamos la tienda real, confirmamos qué funciones de Upcart estaban disponibles y cambiamos el enfoque: el tema sigue guardando todos los ajustes, y un pequeño script coloca la caja dentro del carrito de Upcart, la mantiene ahí cuando Upcart se vuelve a dibujar y le pide que se actualice tras cada cambio. La versión para el carrito del tema se mantiene como respaldo por si la tienda elimina Upcart algún día.
Las funciones, una a una
1. Un interruptor y un total instantáneo
Qué: el interruptor añade o quita el producto de protección mediante la API del carrito de Shopify, y luego se actualizan el carrito y el contador. Por qué: recargar la página en ese momento rompe el flujo y cuesta ventas. El cliente ve el nuevo total en aproximadamente un segundo.
2. Una línea de protección oculta
Qué: el producto de protección se oculta de la lista de artículos, tanto en Upcart como en el carrito del tema. Por qué: una segunda «línea de producto» con sus propios botones de cantidad confunde. La caja ya muestra el estado, y el precio sigue formando parte del total y del pedido.
3. Reglas inteligentes del carrito
Qué: tras cada cambio en el carrito se ejecutan tres reglas automáticamente. Por qué: el carrito nunca debe quedar en un estado extraño, por ejemplo con la protección comprada sola.
- Nunca se vende sola: si el cliente elimina el último producto real, la protección también se elimina.
- Siempre cantidad 1: los duplicados o cantidades mayores que uno se corrigen.
- Respeta un «no»: con el añadido automático activo, al cliente que desactiva la protección no se le vuelve a preguntar durante esa visita.
4. Funciona con Upcart y con el tema
Qué: la misma función se ejecuta en el carrito de Upcart, en el del tema Horizon y en la página completa del carrito. Por qué: las tiendas cambian de apps. La caja de protección debe sobrevivir a esa decisión sin rehacerse.
5. Código ligero y propio
Qué: un pequeño script y una hoja de estilos, cargados por el tema. Por qué: sin cuota mensual por otra app de protección, sin scripts de terceros en cada página, y el código vive en el propio tema de la tienda.
Todas las opciones que añadimos al editor del tema
Todos los ajustes están en un nuevo grupo: Tienda online → Temas → Personalizar → Configuración del tema → Safety package. La tienda puede cambiar todo lo siguiente sin un desarrollador.
| Grupo | Ajuste | Qué hace |
|---|---|---|
| General | Enable safety package | Activa o desactiva toda la función |
| Protection product | El producto (y el precio) que se añade al carrito | |
| Add automatically to cart | Añadido automático opcional, desactivado por defecto; recuerda cuando el cliente lo rechaza | |
| Hide protection product in the item list | Mantiene el carrito limpio | |
| Also show on cart page | Muestra la caja también en la página del carrito | |
| Contenido | Imagen, ancho de imagen | Sube tu propia imagen o usa el icono integrado de caja y escudo |
| Color del escudo del icono | Color del escudo en el icono integrado | |
| Título, descripción | Cualquier texto, en cualquier idioma | |
| Mostrar precio junto al título | Muestra el precio de la protección | |
| Tipografía | Tamaño del título, espaciado, mayúsculas, tamaño de la descripción | Se adapta a la tipografía de la tienda |
| Estilo de la caja | Color de texto y fondo, separador, ancho y color del borde, radio de esquinas, relleno, margen lateral en Upcart | Se adapta al diseño del carrito |
| Interruptor | Colores de activado, desactivado y botón | Un interruptor con los colores de la marca |
Cómo funciona por dentro
Para quienes construyen tiendas Shopify, la versión corta: el tema imprime los ajustes como un pequeño bloque JSON y una plantilla HTML. El script los lee, espera a que Upcart cargue y monta la caja bajo la lista de productos de Upcart. Un MutationObserver vuelve a colocar la caja cada vez que Upcart se redibuja. El interruptor llama a los endpoints estándar del carrito y después actualiza el carrito:
// activar
await fetch('/cart/add.js', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ items: [{ id: protectionVariantId, quantity: 1 }] }),
});
// que Upcart redibuje el carrito con el nuevo total
window.upcartRefreshCart?.();La línea de protección se oculta comparando su ID de variante, que Upcart incluye en el ID de cada línea. Las peticiones al carrito se ejecutan en cola, así que pulsar rápido varias veces nunca provoca conflictos.
Pruebas en la tienda real
Antes de la entrega probamos el comportamiento en la tienda real, en una sesión de navegador aislada y con un producto de prueba, para que no se creara ningún pedido real:
| Prueba | Resultado |
|---|---|
| Añadir un producto y abrir el carrito | La caja aparece bajo el artículo, desactivada |
| Activar | Protección añadida, línea oculta, total actualizado |
| Desactivar | Protección eliminada, total de vuelta al precio del producto |
| Activar y borrar el último producto real | Protección eliminada automáticamente, carrito vacío |
Lo que obtuvo el cliente
- Una caja de Paquete de Seguridad como la de su referencia, en danés, dentro del carrito que sus clientes realmente ven.
- Un grupo de ajustes que se edita en minutos: texto, imagen, colores, tamaños y el producto con el precio.
- Ninguna suscripción mensual nueva para la función de protección.
- Reglas que mantienen cada carrito válido y un diseño opcional acorde con las normas de consumo de la UE.
- Una guía sencilla para crear el producto de protección y activar la función.
¿Función a medida o app de protección?
| App de protección | Interruptor a medida | |
|---|---|---|
| Coste mensual | Normalmente una suscripción o un porcentaje de cada tarifa | Desarrollo único, después sin coste |
| Diseño | El widget de la app, estilo limitado | Tu diseño exacto, ajustado en el editor del tema |
| Carrito | Puede no ser compatible con todas las apps de carrito | Hecho para tu carrito (aquí Upcart) y el tema |
| Gestión de incidencias | A menudo la gestiona el proveedor de la app | La gestiona la propia tienda |
| Ideal para | Tiendas que quieren externalizar las incidencias | Tiendas que quieren control y una experiencia de marca |
Ninguna opción es siempre la correcta. Si la tienda quiere que un tercero gestione las incidencias, una app tiene sentido. Si quiere controlar la tarifa, el texto y el aspecto, un interruptor a medida es más ligero y más barato a largo plazo.
¿Qué más puede vivir en tu carrito?
El mismo patrón (un ajuste en el editor del tema, un pequeño script y un producto o atributo del carrito detrás) sirve para muchos otros extras que aumentan el valor del pedido o reducen dudas:
- Envoltorio de regalo como extra de pago.
- Barra de progreso de envío gratis que anima a añadir un artículo más.
- Selector de fecha de entrega guardado en el pedido.
- Garantía ampliada por producto.
- Donación por redondeo para una buena causa.
- Grabado y notas del pedido con validación.
Preguntas frecuentes
¿Funciona con Upcart?
Sí. La caja se coloca dentro del carrito de Upcart y se mantiene sincronizada cuando Upcart se redibuja. También funciona en el carrito del tema y en la página del carrito.
¿Es legal añadir la protección automáticamente en la UE?
Los extras de pago deben elegirlos los clientes, por eso el interruptor está desactivado por defecto. El añadido automático es opcional; la tienda que lo active debería pedir su propio asesoramiento legal.
¿Puede el precio ser un porcentaje del carrito?
De serie es un precio fijo, definido en el producto de protección. Los precios por tramos según el valor del carrito son posibles con varias variantes y algo de lógica extra.
¿Hace más lenta la tienda?
No. Es un pequeño script y una hoja de estilos, y las peticiones al carrito solo se ejecutan cuando el cliente usa el interruptor o el carrito cambia.
¿Podemos cambiar el texto más adelante?
Sí. El título, la descripción, la imagen y los colores son ajustes del tema, así que se cambian en pocos minutos y en cualquier idioma.
Ideas clave
- Ofrece la protección donde se decide: en el carrito, junto al total.
- Que sea opcional y con un precio claro, y respeta al cliente que dice que no.
- Oculta la línea técnica del producto y mantén el total honesto.
- Comprueba qué carrito usa realmente la tienda antes de construir.
- Pon todos los textos, colores y tamaños en el editor del tema, para que la tienda los controle.
¿Quieres una función así en tu tienda? Creamos funciones de carrito a medida, integraciones con Upcart y temas, y desarrollo Shopify completo para tiendas de toda Europa. Consulta nuestros servicios o hablemos de tu carrito.