Jossue AlcaláCrear y Construir

Producto Shopify · Apps

Bloqio CRO Apps — Prometeo / Hermes

Dos apps Shopify que convierten patrones de conversión en herramientas configurables: una top bar promocional y un sticky add-to-cart.

Contribución
Concepto, dirección de producto, UX/CRO, diseño de configuración, desarrollo de las apps y preparación de su operación.
Especialidad
Shopify CLI · Theme App Extensions · App Embeds
Prometeo / HermesBloqio

01 / El reto

Entender el negocio antes de diseñar la solución.

Los equipos ecommerce necesitan activar mensajes, promociones y accesos de compra sin editar el theme para cada campaña ni comprometer la experiencia móvil.

Productizar patrones CRO frecuentes para que funcionen con datos reales de Shopify y puedan operarse desde una interfaz clara.

02 / El enfoque

Una dirección clara para producto, experiencia y operación.

  1. 01

    Usar Theme App Extensions y App Embeds para integrarse sin modificar el theme.

  2. 02

    Diseñar comportamiento mobile-first y sincronizado con producto, variante, cantidad y disponibilidad.

  3. 03

    Mantener una identidad compartida y una responsabilidad clara para cada producto.

03 / Trabajo realizado

Del criterio a una solución que el equipo puede usar.

  • Prometeo: mensajes, CTA, countdown, sticky y cierre persistente.
  • Hermes: compra visible durante el scroll, variantes, cantidad y estados de inventario.
  • Administración embedded, persistencia, compliance webhooks y despliegue.

04 / Gráficos

Evidencia traducida a lectura visual.

BCA-MAP

Mapa de producto Bloqio CRO

Dos apps, un criterio: reducir fricción en momentos distintos del recorrido.

  • Prometeo · Top Bar50%

    Mensaje, oferta, countdown y CTA global.

  • Hermes · Sticky ATC50%

    Compra persistente en PDP / quick add.

Pesos iguales = énfasis de portfolio; no representan ingresos ni installs.

BCA-ARC

Arquitectura Shopify app

Embedded admin + Theme App Extension como superficie del comerciante y del comprador.

  • Admin embedded30%

    React Router, App Bridge, onboarding.

  • Theme App Extension40%

    Liquid/JS/CSS en storefront.

  • App Embed / settings20%

    Configuración sin editar tema a mano.

  • Compliance & deploy10%

    Webhooks, Postgres, URLs de producción.

Diagrama metodológico verificado en repos públicos/privados del autor.

06 / Resultado

Lo que el proyecto dejó construido.

  • Dos productos funcionales para storefronts Shopify.
  • Una arquitectura que permite instalar y configurar sin intervenir el código del theme.

Principios aplicados

  • Configuración simple.
  • Datos reales del storefront.
  • Experiencia móvil primero.

07 / Tecnología

Stack elegido para la solución.

  • ShopifyShopify CLI
  • ShopifyTheme App Extensions
  • ShopifyApp Embeds
  • ShopifyLiquid
  • JavaScriptJavaScript
  • CSSCSS
  • ReactReact Router
  • ReactReact
  • ShopifyShopify App Bridge
  • ShopifyPolaris
  • PrismaPrisma
  • PostgreSQLPostgreSQL
  • RailwayRailway
  • TypeScriptTypeScript
  • ViteVite

Siguiente paso

Conversemos sobre una app Shopify diseñada alrededor de una necesidad comercial concreta.

Iniciar conversación