En vivo — tienda en producción.

Corriendo en getundim.com, con landing en dos idiomas y checkout en Shopify.

Caso · Skincare DTC · Estados Unidos

undim.
Una marca de skincare para Estados Unidos, vendida desde una sola página en dos idiomas.

undim es una crema para aclarar axilas, codos y rodillas, construida sobre niacinamida. El producto se vende a un mercado que no habla español, desde un país que sí, y compite contra góndolas enteras de Amazon. Eso definió todo: una sola página que resuelve argumento, modo de uso y compra sin pedirle al visitante que navegue; dos idiomas reales, no un traductor; y una arquitectura de datos estructurados que le explica a Google y a los buscadores con IA qué es exactamente este producto.

Proyecto
Landing + tienda
Sector
Skincare DTC
Mercado
Estados Unidos
Stack
HTML generado · Vercel · Shopify
Estado
En producción · pública
URL pública
getundim.com
Punto de partida

El competidor real no era otra crema de axilas. Era un serum de vitamina C que la gente ya estaba usando mal.

La categoría parece obvia: crema aclarante, compite con cremas aclarantes. La investigación decía otra cosa. Quien busca una solución para axilas oscuras ya está usando algo — normalmente un serum de vitamina C para cara, aplicado en una zona para la que no fue formulado, que se oxida y que irrita piel que además se afeita.

Eso cambia el argumento por completo. La página no tiene que convencer de que existe un problema: tiene que reencuadrar por qué lo que ya usan no está funcionando. De ahí sale el titular, que no habla del producto sino de la persona:

  • «You didn't do anything wrong.» — el visitante llega con culpa, no con curiosidad.
  • La explicación fisiológica va antes que el producto: la piel irritada responde con más pigmento.
  • El producto entra recién después, como consecuencia lógica y no como oferta.

Tres restricciones de diseño salieron de ahí: (1) el argumento tiene que caber antes del primer scroll en un celular, (2) la compra no puede estar a más de un toque desde cualquier punto de la página, (3) ninguna afirmación puede ir más allá de lo que la formulación respalda.

Arquitectura

Una sola página, pero generada por un pipeline. No es un HTML que se edita a mano.

La landing es un archivo estático, pero no se escribe: se compila. El cuerpo vive partido en fragmentos —portada, precios, garantía, argumento, modo de uso, FAQ, pie— y un script los ensambla junto con el CSS, el diccionario de idiomas y el grafo de datos estructurados. Después un validador comprueba el resultado antes de publicar.

  • Fragmentos por sección. Tocar los precios no obliga a abrir un archivo de 5.000 líneas.
  • Validador propio. Comprueba que cada imagen referenciada exista, que cada bloque de JavaScript parsee y que los dos diccionarios de idioma tengan exactamente las mismas claves.
  • Un solo archivo servido. El visitante recibe una página sin dependencias de framework: el argumento se lee aunque el JavaScript falle.

La ventaja no es técnica, es de operación: cambiar una garantía de 60 a 30 días es editar un fragmento y reconstruir, no buscar y reemplazar en un documento gigante rezando por no romper nada.

Dos idiomas

237 claves por idioma, verificadas en cada build.

El público está en Estados Unidos, pero una parte considerable es hispanohablante. La página cambia de idioma sin recargar y sin cambiar de URL: un diccionario de 237 claves por idioma, aplicado sobre los nodos de texto.

Eso trae una trampa que rompe sitios: el motor de idioma escribe con innerHTML, así que cualquier etiqueta traducible puesta sobre un contenedor que tenga enlaces dentro se los lleva por delante al cambiar de idioma. La regla del proyecto es que la marca de traducción solo va sobre texto plano, nunca sobre un contenedor con marcado. El validador falla el build si los dos diccionarios se desalinean.

Visibilidad

Un grafo de 13 nodos, para que Google y los buscadores con IA sepan qué es esto.

Una página nueva, de una marca nueva, en un mercado saturado, no compite por autoridad. Compite por ser entendible. La landing publica un grafo de datos estructurados de trece nodos enlazados entre sí —organización, marca, producto, oferta, preguntas frecuentes, migas— para que un buscador no tenga que adivinar qué se vende ni en qué condiciones.

  • 16 preguntas frecuentes, escritas para responder la duda real y no para rellenar.
  • Condiciones de envío, devolución y garantía declaradas también en los datos estructurados, no solo en el texto.
  • Guía larga aparte, enlazada desde la landing, para las búsquedas informativas que no están listas para comprar.

Sobre el producto solo se afirma lo que la formulación respalda. Sin porcentajes que no estén certificados, sin reseñas que no existan, sin comparativas contra marcas que no se han medido. En una categoría donde la competencia promete blanqueamientos milagrosos, decir menos es el diferencial.

Compra

El checkout es de Shopify. La página, no.

Montar toda la tienda dentro de Shopify habría significado pelearse con un tema para conseguir la portada que el argumento necesitaba. Montar el checkout desde cero habría significado hacerse responsable de pagos y fraude.

La división es la obvia una vez dicha: la página es propia y hace el trabajo de convencer; el cobro, los impuestos y el correo transaccional los hace Shopify. El visitante ve una sola marca, y el carrito flotante vive en la landing hasta el momento de pagar.

¿Vendes un producto físico y tu web no lo está explicando?

undim es la prueba de que una sola página bien argumentada sostiene una marca completa. Si vendes algo que la gente no entiende del todo, el problema casi nunca es el tráfico: es que la página empieza por el producto en vez de empezar por la persona. Lo revisamos juntos.