Industria Social · Liquid y email HTML
Componentes Shopify y plantillas de email HTML para Original Penguin
Componentes personalizados para la tienda Shopify y reconstrucción de las plantillas de correo de campañas de marketing.
- Rol
- Lead Web Developer · Industria Social
- Período en la agencia
- 2021–2025
- Tecnologías
- Shopify · Liquid · HTML · CSS · JavaScript · HTML legacy
- Sitio público
- originalpenguin.com.mx
Versión actual del sitio de Original Penguin. Captura de referencia; el sitio puede haber cambiado desde mi trabajo.
En Industria Social desarrollé componentes personalizados para Original Penguin con Liquid, HTML, CSS y JavaScript. También reconstruí las plantillas antiguas de campañas de marketing con nuevos templates en HTML legacy para correo electrónico.
Requerimiento
El trabajo incluía agregar componentes personalizados a la tienda Shopify y reemplazar las plantillas antiguas de las campañas de correo.
Implementación
Desarrollé los componentes con Liquid, HTML, CSS y JavaScript. Para los correos, reconstruí los templates utilizando HTML legacy para email, separado de la implementación de los componentes de la tienda.
Cómo funciona
El proyecto tuvo dos implementaciones distintas: componentes para la tienda Shopify y templates HTML para campañas de correo electrónico.
Liquid y generación del HTML
Liquid integra los componentes con el contenido de Shopify y genera su marcado HTML. Desarrollé los componentes a medida dentro de ese entorno, con CSS para su presentación y JavaScript para los comportamientos de la interfaz.
Componentes dentro de la tienda
El trabajo sobre los componentes combina la plantilla Liquid con las capas del navegador: HTML, CSS y JavaScript. La implementación pertenece a la interfaz de la tienda y utiliza el contexto de Shopify.
Reconstrucción de los templates de correo
Para las campañas reconstruí los templates antiguos con HTML legacy para email. Los correos tienen su propio marcado y presentación: su destino es un cliente de correo, mientras que los componentes Liquid se presentan en el sitio web.
Versión actual del sitio. Colección actual de polos de Original Penguin con filtros, ordenación y tarjetas de productos.
Versión actual del sitio. Ficha actual de un polo de Original Penguin con fotografías, selector de color y talla e información de compra.
Trabajo realizado
Componentes de tienda y templates de campañas.
Componentes Liquid
Creé componentes a medida con Liquid, HTML, CSS y JavaScript.
Reconstrucción de templates
Reemplacé las plantillas antiguas por nuevos templates para las campañas de marketing.
HTML legacy para correo
Desarrollé el marcado HTML de los correos como una implementación distinta a los componentes web.
Funcionalidades entregadas
Componentes personalizados y plantillas renovadas.
Componentes a medida
La tienda contó con componentes personalizados desarrollados en Liquid.
Nuevas plantillas de campañas
Las plantillas anteriores fueron reconstruidas con nuevos templates HTML para email.
El trabajo descrito corresponde a mi período en Industria Social (2021–2025). El sitio público actual es una referencia y puede incluir cambios posteriores.
Habilidades aplicadas
- Desarrollo Shopify
- Liquid
- Componentes web personalizados
- HTML para email
- CSS
- JavaScript