Las 4 mejoras de mayor impacto en conversion seleccionadas del handoff tecnico completo. Enfoque 100% front-end, listas para implementar en el theme actual.
De las 13 mejoras pendientes del handoff tecnico completo, estas 4 tienen el mejor ratio impacto/esfuerzo y son 100% front-end — no dependen de datos del cliente (como los metafields de sensacion o el contenido de FAQs).
Las 3 reglas no negociables que aplican a cada mejora de este sprint. Si un cambio rompe alguna, no sale a produccion.
fetch aislado rompe Meta Pixel (AddToCart), Shopify Analytics, y checkout acelerado (Shop Pay, Apple Pay, Google Pay). Si no sabes cual evento nativo usa el theme actual, revisalo antes de escribir una linea de codigo.{%- render 'card-product', card_product: product -%}). Nunca crear HTML custom de tarjeta de producto — rompe tracking de ViewContent, AddToCart, y los Product Impressions. Verificar que el snippet existe en el theme antes de usarlo.| money de Liquid esta bien en Liquid puro. Pero en JavaScript (recalculo de MSI, precios dinamicos del cart drawer), usar siempre (price / 100).toLocaleString('es-MX', { style: 'currency', currency: 'MXN' }). No usar shop.money_format desde JS — produce output roto. Recordar que precios en Shopify estan en centavos.Cada tarjeta incluye el contexto de negocio (por que importa), la implementacion tecnica (como hacerlo), y los criterios de aceptacion (como validar que esta bien). Las tarjetas estan en orden de implementacion recomendado.
No hay boton de WhatsApp visible en ninguna pagina del sitio. Para el mercado mexicano de colchones (ticket promedio $5,000–$15,000+) esto es critico — un porcentaje alto de clientes necesita resolver una duda antes de comprar online. La competencia (Luuna, Emma Mexico, Spring Air) tiene WhatsApp visible en todas las paginas. Sin el boton, Don Colchon pierde conversiones de clientes que tienen dudas pero no van a llamar ni escribir email.
snippets/whatsapp-float.liquid e incluirlo desde theme.liquid antes del cierre de </body>position: fixed; bottom: 20px; right: 20px; z-index: 99#25D366 sobre fondo blanco con box-shadow: 0 4px 14px rgba(0,0,0,0.15)https://wa.me/52XXXXXXXXXX?text=Hola,%20me%20interesa%20un%20colchon{{ product.title | url_encode }}. Ejemplo resultante: “Hola, me interesa el Colchon Chelsea”scale(0) a scale(1) al hacer scroll > 300px, para no distraer en el heroHoy Don Colchon menciona MSI solo en un banner generico en la parte superior del sitio. El cliente que ve un colchon a $10,599 no sabe que puede pagarlo a $883/mes hasta que llega al checkout. Mostrar el monto mensual junto al precio en cada card de producto y cada PDP es el cambio con mejor ratio impacto/esfuerzo de todo el sprint. Reduce la barrera psicologica del precio alto y aumenta la probabilidad de click-through y ATC.
Don Colchon acepta MSI via Mercado Pago y tarjetas de credito. Los tiers son:
Importante: estos tiers son ejemplo basado en la politica general de Mercado Pago. Confirmar con Don Colchon los tiers exactos antes de implementar. Los thresholds se configuran en el snippet y se pueden ajustar sin tocar logica.
snippets/msi-display.liquid que reciba el precio como parametro y devuelva el bloque formateado{%- render 'msi-display', price: card_product.price -%} debajo del precio en el snippet de card del theme{%- render 'msi-display', price: product.selected_or_first_available_variant.price -%} debajo del preciovariant:change, variant:changed, variantChange, etc.)font-size: 13px, color muted, con icono de tarjeta de credito opcional$883/mes a 12 MSI, no $883.33/month at 12 monthsLa PDP del Chelsea dice “*Para este Colchon se recomienda el Box One de nuestra linea de Bases y Boxes” como texto plano con asterisco al final de la descripcion. No enlaza al producto, no muestra imagen, no muestra precio. El cliente tiene que ir a buscar el box por su cuenta. Esto es la venta cruzada mas natural de la industria de colchones (colchon + base + almohada + protector) y hoy se esta perdiendo por completo.
sections/pdp-upsell.liquid que se inserta debajo de la informacion principal del producto en el template de productoproduct_reference (lista) en el namespace custom:
custom.accesorios_recomendados (tipo: lista de referencias de producto)
card-product, product-card u otro nombre — buscar en /snippets/click() sobre el boton ATC nativo de un form oculto. Nunca hacer fetch a /cart/add.js directamenteEsto lo puede hacer el equipo de Don Colchon desde Settings → Custom data → Products → Add definition:
custom.accesorios_recomendadosAddToCart para cada accesorio agregadoHoy, hacer click en “Agregar al carrito” lleva a /cart (pagina completa). Esto rompe el flujo de compra: el cliente que queria seguir viendo productos ahora tiene que navegar de regreso. Un drawer lateral (panel que se desliza desde la derecha) mantiene al cliente en la pagina, reduce friccion, y es el lugar perfecto para sugerir accesorios complementarios. Ademas, el drawer es donde viven los CTAs de checkout acelerado (Shop Pay, Apple Pay) que convierten hasta 2x mas rapido.
snippets/cart-drawer.liquid e incluirlo en theme.liquid antes del cierre de </body>/cart. Metodo preferido: cambiar la accion del form a AJAX y abrir el drawer con el resultado. No crear un segundo listener — modificar el existentecart.items.first.product.metafields.custom.accesorios_recomendados (reutiliza los mismos metafields del upsell)
dynamic-checkout-buttons esta presentetransform: translateX(100%) a translateX(0) con transition: 0.3s easearia-modal="true"Todas las operaciones del drawer usan los endpoints nativos de Shopify. Esto NO viola la regla pixel-safe siempre y cuando el evento AddToCart del theme (y por extension el pixel) se dispare antes de la llamada:
POST /cart/add.js — pero llamado despues de que el form nativo del theme haga su dispatch de eventoPOST /cart/change.js con { id: variant_id, quantity: n }GET /cart.js para re-renderizar el drawer despues de cambios/cart.js/cart/checkoutAddToCart para cada producto agregado (verificar con Meta Pixel Helper)/cart sigue funcionando como fallback (acceso directo via URL)Esqueletos de codigo para los componentes clave. Son punto de partida — el desarrollador adapta al theme actual. No copiar-pegar sin verificar nombres de snippets, eventos y convenciones del theme.
Boton flotante global con mensaje contextual por producto.
Nota: Si este snippet se usa como snippet (no seccion), quitar el bloque {%- schema -%} y pasar phone/message como variables desde theme settings o hardcoded.
Muestra el MSI maximo aplicable. Reutilizable desde card de producto, PDP y cart drawer.
Escucha el cambio de variante y actualiza el monto mensual. El nombre del evento varia entre themes — buscar en el JS del theme actual.
Importante: los thresholds en este JS deben coincidir exactamente con los del snippet Liquid. Si cambian los tiers, actualizar en ambos lugares.
Estructura base del bloque de upsell. Adaptar el nombre del snippet de card al del theme.
Clave: el {%- render 'card-product' -%} es el punto critico. Si el theme usa otro nombre (product-card, card, product-card-grid), cambiar aqui. Si no existe un snippet reutilizable, crear uno minimo que use el ATC nativo.
Independiente de los criterios de cada mejora, todo el sprint debe pasar estas validaciones antes de publicar.
ViewContent en PDP, AddToCart al agregar, InitiateCheckout al iniciar checkout$13,739 (coma de miles, sin decimales)Desde $883/mes a 12 MSI, no From $883/month at 12 monthsComo avanzar, validar y publicar este sprint.
WhatsApp captura al cliente que duda. MSI reduce la barrera psicologica del precio alto. Upsell sube el ticket promedio. Cart drawer reduce abandono y cierra el ciclo de cross-sell.
Las 4 trabajan en conjunto: el cliente ve el colchon con su precio mensualizado (MSI), agrega al carrito y ve los accesorios (upsell), el drawer le sugiere completar el combo, y si tiene dudas, WhatsApp esta siempre visible. Es un sprint compacto con impacto directo en revenue.
Cualquier duda durante la implementacion: hola@darmedia.mx