Aprendiendo Shopify: 8 Horas de Plantillas Liquid y Desarrollo de Comercio Electrónico

Construí un sitio web para Dorian hace unas semanas. Limpio, accesible, bilingüe, tres puntuaciones perfectas de Lighthouse. Escribí sobre ese viaje también. Pensé que habíamos terminado.

Entonces preguntó si la gente podía comprar mercancía.

No solo un enlace a Shopify. Quería algo que se sintiera como el sitio principal. Algo cálido. Algo intencional. Algo que no se viera como todas las demás tiendas de impresión bajo demanda.

Nunca había construido un tema de Shopify antes. Esto parecía una buena oportunidad para aprender.

La oportunidad de aprendizaje

Esto es lo que podría haber hecho: embeber un botón de compra de Shopify en el sitio de Astro. Tal vez agregar una página dedicada con sus widgets de producto por defecto. Hecho en una tarde.

Esto es lo que quería hacer: aprender cómo funcionan realmente los temas de Shopify. Entender la plataforma. Ver qué es posible.

El sitio principal tenía una sensación específica. Colores cálidos. Tipografía cuidadosa. Rayos de fondo animados. Modo oscuro que realmente funcionaba. Navegación que tenía sentido. Todo bilingüe desde el principio.

Si la tienda se veía genérica, socavaría todo lo demás.

Así que en lugar de embeber Shopify en el sitio de Astro, decidí construir un tema de Shopify completamente separado que coincidía con el sistema de diseño del sitio principal.

Enfoque diferente. Desafíos diferentes. Cosas nuevas que aprender.

Por qué elegí aprender desarrollo de temas completos

La mayoría de los desarrolladores te dirían que los widgets embebidos son más fáciles. No están equivocados.

Pero esto es lo que quería entender:

¿Cómo funciona realmente la experiencia de checkout de Shopify? ¿Qué es posible con la personalización de páginas de productos? ¿Cómo se compara el rendimiento del CDN de Shopify? ¿Cómo se ve la gestión apropiada del carrito? ¿Cómo construyes algo que puede crecer?

Lo que ganas con widgets es velocidad. Lo que aprendes con un tema completo es todo lo demás.

Dorian no está ejecutando una tienda genérica de camisetas. Esta es una extensión de su marca. Su viaje espiritual. Su escritura. La mercancía existe para apoyar esa historia, no reemplazarla.

Quería entender cómo contar esa historia apropiadamente en Shopify.

Comenzando desde Dawn, aprendiendo la estructura

Usé el tema Dawn de Shopify como fundación. No porque sea perfecto, sino porque está bien estructurado y mantenido por personas que entienden el comercio electrónico mejor que yo.

Luego empecé a aprender qué hacía cada pieza y cómo modificarla.

La paleta de colores vino directamente del sitio principal:

• Fondo blanco cálido (#fefbf1)
• Texto marrón profundo (#0e0a01)
• Resaltados beige (#fee8b9)
• Acentos amarillo-verde (#e9f57a)
• Bordes marrón apagado (#b8ab8e)

Mismas fuentes:

• Vollkorn para encabezados
• Arimo para texto del cuerpo

Mismo fondo animado con el efecto de rayos divinos.

Mismos estilos de botones—fondos oscuros con estados hover amarillo-verde.

El objetivo no era copiar el sitio principal exactamente. Era aprender cómo hacer que ambos sitios se sintieran como si vinieran del mismo lugar. Entender qué hace que el diseño se sienta intencional.

Las secciones que tuve que aprender

Shopify 2.0 está construido alrededor de secciones. Bloques reutilizables y personalizables que los comerciantes pueden agregar, remover y reorganizar.

Tuve que averiguar cómo construir estos:

Sección Hero
Primera cosa que los visitantes ven. Mensaje simple: “Mercancía para el viaje.” Superposiciones de gradiente. Animaciones de aparición gradual. Botones CTA que se sienten sustanciales pero no agresivos.

Cuadrícula de todos los productos
Muestra todo. Tarjetas de producto con efectos hover—elevación sutil, superposiciones de gradiente, zoom de imagen. Nada discordante. Justo suficiente para sentirse interactivo.

Páginas de producto
Aquí es donde la impresión bajo demanda se complica. Múltiples colores. Múltiples tallas. Diferentes precios por talla. Las imágenes necesitan cambiar cuando seleccionas un color. Los precios necesitan actualizarse cuando seleccionas una talla.

Pasé la mayor parte de mi tiempo aquí aprendiendo cómo funciona realmente la selección de variantes. Hacer esto bien importa más que cualquier otra cosa porque aquí es donde los clientes toman decisiones.

Cajón del carrito
Se desliza desde la derecha. Muestra lo que has agregado. Te permite ajustar cantidades. Procede al checkout. Sin recargas de página. Solo funcionalidad de carrito AJAX limpia y moderna.

Todo responsivo. Todo accesible. Todo bilingüe.

Los detalles de diseño que tuve que averiguar

Las tarjetas de producto parecían simples hasta que empecé a construirlas.

El estado hover necesitaba sentirse interactivo sin ser distractor. Elevación sutil (4px). Superposición de gradiente que se oscurece ligeramente. La imagen se amplía un 5%. Duración de transición de 200ms—lo suficientemente rápido para sentirse instantáneo, lo suficientemente lento para ser suave.

El efecto de fondo de “rayos divinos” del sitio principal necesitaba animarse sin causar problemas de rendimiento. Keyframes CSS. Cambios de transformación y opacidad. Acelerado por GPU. Corre a 60fps incluso en dispositivos más lentos.

La jerarquía tipográfica tenía que funcionar tanto en inglés como en español. Algunas traducciones al español son más largas. Los botones necesitaban acomodar eso sin romper los diseños.

La navegación necesitaba ser simple pero completa. Encabezado de dos niveles: enlaces de todo el sitio arriba, enlaces de colección/producto abajo. Se colapsa en móvil en un cajón inferior limpio.

Ninguno de estos detalles era “requerido.” Todos ellos eran cosas que tuve que aprender a implementar apropiadamente.

Lo que aprendí sobre el valor de negocio

Esto es lo que descubrí que un tema personalizado puede proporcionar:

Valor percibido
Tus productos se ven más caros porque tu tienda se ve intencional. Misma camiseta, mejor presentación, mayor valor percibido.

Consistencia de marca
Los clientes hacen clic desde tu sitio principal a tu tienda y se siente conectado. Sin transición discordante. Sin disonancia cognitiva.

Confianza del cliente
Una tienda pulida señala profesionalismo. La gente se siente más cómoda ingresando información de pago cuando el sitio no se ve improvisado.

Flexibilidad futura
Cuando quieras agregar nuevos productos, nuevas colecciones, nuevas características—no estás luchando contra widgets embebidos o plantillas predefinidas. Puedes crecer.

Mejores tasas de conversión
Experiencia de checkout suave. Información clara del producto. Sin fricción. La gente completa compras en lugar de abandonar carritos.

Estos no son beneficios abstractos. Son medibles. Afectan los ingresos.

Pero solo suceden si tomas el tiempo para aprender cómo construirlos apropiadamente.

Aprendiendo a trabajar con Printful

Los servicios de impresión bajo demanda como Printful son geniales hasta que te das cuenta de lo complejas que son sus estructuras de producto.

Una camiseta. Cinco colores. Ocho tallas. Cuarenta variantes.

Cada variante tiene su propio SKU. Su propio precio. Su propio conjunto de imágenes. Cuando alguien selecciona “Verde bosque” en “2XL”, la imagen correcta necesita mostrarse, el precio correcto necesita aparecer y el SKU correcto necesita ir al carrito.

Shopify maneja esto con selectores de variantes. El truco es hacer que esos selectores no se vean como menús desplegables feos.

Los estilicé como muestras de color para colores (selección visual) y botones de talla para tallas (opciones claras). Los estados seleccionados son obvios. Los estados deshabilitados están en gris.

Las imágenes se actualizan instantáneamente cuando escoges un color. El precio se actualiza instantáneamente cuando escoges una talla. Sin recarga de página. Sin spinner de carga. Solo retroalimentación suave e inmediata.

Hacer esto bien tomó más tiempo que construir toda la sección hero.

Pero aprendí mucho sobre cómo funciona realmente el comercio electrónico.

Aprendiendo el sistema bilingüe de Shopify

La tienda no está ‘disponible en español’. Está construida en español.

Cada sección. Cada botón. Cada mensaje de error. Cada pieza de microcopia.

El sistema de localización de Shopify maneja esto limpiamente. Dos archivos JSON: en.default.json y es.json. Mismas claves, diferentes valores.

{
  "products": {
    "product": {
      "add_to_cart": "Agregar al carrito",
      "sold_out": "Agotado",
      "unavailable": "No disponible",
      "quantity": "Cantidad"
    }
  }
}

La versión en español tiene exactamente la misma estructura. Solo cadenas traducidas.

Esto importa por más que solo el idioma. Es algo que tuve que aprender a implementar apropiadamente en Shopify.

Lo que tuve que aprender

Construir un tema de Shopify desde cero significa lidiar con cosas que no encontrarías con widgets embebidos.

Lógica de selección de variantes
Los productos de Printful tienen estructuras de opciones complejas. Colores. Tallas. Diferentes precios para diferentes tallas (S-XL a un precio, 2XL-4XL a precios más altos). Hacer que las imágenes se actualicen correctamente con cambios de color. Hacer que los precios se actualicen correctamente con cambios de talla. Asegurarse de que las variantes agotadas estén deshabilitadas pero visibles.

La solución: JavaScript en línea que observa cambios de opciones, consulta los datos de variantes de Shopify, actualiza el DOM inmediatamente. Sin llamadas a la API de renderizado de secciones por cada clic. Solo gestión de estado local rápida.

Manejo de galería de imágenes
Cada variante puede tener múltiples imágenes. Imagen de producto principal. Miniaturas. La imagen principal necesita coincidir con la variante seleccionada. Las miniaturas necesitan mostrar todas las imágenes disponibles. La miniatura activa necesita indicación visual.

La solución: cambio de imagen dinámico basado en medios destacados de variantes. Haz clic en una miniatura, se convierte en la imagen principal. Selecciona un color, la imagen principal cambia a la imagen destacada de ese color. Lógica simple, pero tiene que funcionar perfectamente cada vez.

Simplificación de navegación
El diseño original tenía demasiadas opciones de navegación. Enlaces del sitio principal. Enlaces de la tienda. Enlaces de pie de página. Enlaces de colección. Carrito. Búsqueda. Selector de idioma. Íconos sociales.

La solución: Simplificar despiadadamente. Mantener solo lo que importa para una tienda: productos, colecciones, carrito, enlace de vuelta al sitio principal. Todo lo demás es ruido.

Diseños de producto responsivos
Imágenes de producto a la izquierda, detalles de producto a la derecha. Funciona genial en escritorio. Se rompe en móvil. Miniaturas tomando demasiado espacio vertical. Texto quedando apretado.

La solución: Diseños de cuadrícula que se adaptan. Escritorio: columna de imagen de 400px, espacio restante para detalles. Móvil: imagen de ancho completo, detalles de ancho completo abajo. Las miniaturas se desplazan horizontalmente en móvil en lugar de apilarse verticalmente.

Funcionalidad del cajón del carrito
El carrito AJAX es estándar en el comercio electrónico moderno. Pero implementarlo desde cero significa manejar casos extremos. ¿Qué pasa cuando agregas el mismo artículo dos veces? ¿Qué pasa si alguien cambia la cantidad a cero? ¿Qué pasa si el carrito está vacío?

La solución: Componente web de carrito personalizado. Escucha eventos de actualización del carrito. Obtiene el estado del carrito de la API de carrito de Shopify. Actualiza el cajón automáticamente. Maneja todos los casos extremos con gracia.

Ninguno de estos fueron problemas catastróficos. Todos ellos fueron oportunidades de aprendizaje.

La parte donde el aprendizaje continúa

La tienda está en vivo. Funciona. Los productos cargan. Las variantes se actualizan. El carrito funciona. El checkout se completa.

Pero no está “terminado” porque todavía estoy aprendiendo sobre comercio electrónico.

Agregaremos más productos. Veremos dónde los clientes se confunden. Optimizaremos basados en comportamiento real, no en suposiciones.

La fundación es lo suficientemente sólida. El diseño es lo suficientemente cohesivo. El código es lo suficientemente mantenible.

Todo lo demás es más aprendizaje.

Lo que aprendí sobre el desarrollo en Shopify

La mayoría de los negocios no necesitan un tema personalizado de Shopify. Los widgets embebidos funcionan bien para probar el ajuste producto-mercado. Las plantillas genéricas funcionan bien para inventario directo.

Pero si quieres entender cómo funcionan realmente las plataformas de comercio electrónico—si quieres aprender qué es posible—entonces construir un tema personalizado te enseña cosas que no puedes aprender de otra manera.

La inversión de tiempo (alrededor de 8 horas totales para este proyecto) me dio una comprensión mucho más profunda del ecosistema de Shopify. Cómo funcionan las plantillas Liquid. Cómo funciona realmente la UX del comercio electrónico. Cómo manejar variantes de productos complejas.

Lo que me enseñaron las puntuaciones de Lighthouse

Una cosa que aprendí rápidamente: los temas de Shopify tienen características de rendimiento diferentes a los sitios construidos personalmente. Las puntuaciones de Lighthouse salieron en 97-90-96-92 respectivamente—no los 100 perfectos a los que estoy acostumbrado con construcciones personalizadas de Astro.

Esto fue en realidad un aprendizaje valioso. Me mostró que la plataforma de Shopify tiene compensaciones inherentes. La conveniencia de su ecosistema viene con cierta sobrecarga de rendimiento. Entender estos matices es parte de aprender la plataforma apropiadamente.

Es un buen recordatorio de que todavía tengo un camino por recorrer para aprender los matices de los estándares y técnicas de optimización de Shopify.

La alternativa es usar soluciones pre-construidas sin entender cómo funcionan. Entonces estás limitado a lo que otros ya han construido.

Elegí aprender.

Este aprendizaje continúa

Tanto la tienda como el sitio principal son proyectos en evolución. A medida que Dorian se acerca al lanzamiento del libro, continuaremos agregando características, refinando la experiencia del usuario y adaptándonos a lo que su audiencia necesite.

Se agregarán nuevos productos. El contenido se expandirá. El diseño crecerá junto al viaje.

La fundación que construí es lo suficientemente sólida para soportar lo que venga después, y seguiré aprendiendo mientras avanzamos.

---

Mírala en vivo:
shop.awakentolifeinthemeatsuit.com

Sitio principal:
awakentolifeinthemeatsuit.com

¿Quieres algo similar?
Hablemos

---

Escrito después de finalmente entender cómo funciona la selección de variantes de Shopify, lo cual tomó más tiempo del que me gustaría admitir.