Dos apps para vender más
Bloqio CRO Apps — Prometeo / Hermes
Dos apps que cualquier tienda Shopify puede instalar: una barra de avisos arriba para anunciar promociones, y un botón de compra que sigue visible mientras la gente baja por la página.
- Trabajo para una marca
- tipo de proyecto
- Shopify CLI · Theme App Extensions
- herramientas principales
- 11
- capturas reales del proyecto
01 · El reto
Qué estaba pasando
Contexto
Cada vez que una tienda quiere anunciar una promoción, alguien tiene que entrar a tocar el código del sitio. Es lento, se rompe con facilidad y casi siempre termina viéndose mal en el celular.
El problema
Convertir dos trucos que todo el mundo usa a mano en productos instalables, que lean el precio y el stock reales de la tienda y se configuren desde una pantalla sencilla.
Mi parte
La idea, el diseño, la programación de las dos apps y dejarlas listas para que cualquiera las instale. Todo yo.
02 · Cómo lo resolví
Cómo decidí resolverlo
- 01
Que se instalen encima de la tienda sin tocar su código, para que desinstalar no deje nada roto.
- 02
Pensarlas primero para el celular, y que siempre sepan qué producto, qué talla y cuánto stock hay en ese momento.
- 03
Que las dos se vean de la misma familia, pero que cada una haga una sola cosa bien.
03 · Lo que hice
Lo que quedó hecho
- Prometeo: la barra de arriba. Mensaje, botón, cuenta regresiva, y si el cliente la cierra no vuelve a aparecer.
- Hermes: el botón de comprar que te sigue al bajar, con talla, cantidad y aviso si algo se agotó.
- El panel de configuración dentro de Shopify, y todo lo que Shopify exige para publicar una app.
04 · Gráficos
Los números en gráficos
BCA-MAP
Mapa de producto Bloqio CRO
Dos apps, un criterio: reducir fricción en momentos distintos del recorrido.
BCA-ARC
Arquitectura Shopify app
Embedded admin + Theme App Extension como superficie del comerciante y del comprador.
05 · El producto
Explora el proyecto
01 La página de producto explica el problema comercial antes de mostrar patrones de implementación.
02 Hermes se presenta mobile-first: mantener la acción de compra disponible sin invadir el contenido.
03 La galería documenta estados de producto y contexto de storefront para evaluar integración visual.
04 Prometeo — oferta: mensaje promocional persistente sobre el header sin saturar el hero.
05 Prometeo — countdown: urgencia temporal para drops o ventanas comerciales reales.
06 Prometeo — CTA: la barra como puente hacia colección o landing prioritaria.
07 Prometeo en PDP: el mensaje convive con la ficha sin robar el protagonismo del producto.
08 Hermes mobile: CTA de compra accesible al pulgar mientras el usuario sigue scrolleando.
09 Hermes desktop: la misma intención de compra con más aire para mensaje, precio y acción.
10 Hermes — sync: el sticky refleja el producto/variante real antes del add to cart.
11 Hermes — cantidad: ajuste en el flujo sticky sin regresar al bloque principal.
06 · Cómo quedó
Qué cambió al final
Dos apps funcionando, instalables en cualquier tienda Shopify.
Se configuran en minutos y sin programar: quien las instala no necesita ayuda de nadie.
Lo que no negocié
- Que se entienda sin manual.
- Nunca mostrar un precio o un stock inventado.
- Si no funciona en el celular, no funciona.
07 · Tecnología
Con qué está hecho
- ShopifyShopify CLI
- ShopifyTheme App Extensions
- ShopifyApp Embeds
- ShopifyLiquid
- JavaScriptJavaScript
- CSSCSS
- ReactReact Router
- ReactReact
- ShopifyShopify App Bridge
- ShopifyPolaris
- PrismaPrisma
- PostgreSQLPostgreSQL
- RailwayRailway
- TypeScriptTypeScript
- ViteVite
08 · Enlaces
Ábrelo y compruébalo
Más casos
Otros proyectos que puedes revisar
Casa Tecalli — Shopify OS 2.0Una tienda de ejemplo que armé para mostrar cómo trabajo: pensada para que la marca se sienta cara, el producto se encuentre rápido y comprar desde el celular sea cómodo.Ver el caso
Come VerdeTrabajo con una marca de alimentos en cómo se comunica, dónde se anuncia, cómo vende en Amazon y Mercado Libre y qué parte de ese trabajo puede hacer la IA. La idea es que todo eso se planee junto y no cada área por su lado.Ver el caso
La Carnicería VirtualRevisé una carnicería online de arriba a abajo para encontrar por qué la gente entraba y no compraba. Entregué una lista de arreglos ordenada por cuánto ayuda cada uno a vender.Ver el caso
¿Quieres algo así para tu negocio?
Si tu equipo repite la misma tarea a mano en cada campaña, probablemente se puede convertir en una herramienta.