Applabmx · Desarrollo de tema Shopify
Tema Shopify: filtros con metafields para Exclusive Iron Doors
Secciones de inicio, galería, filtros de colecciones basados en metafields e integración de favoritos.
- Rol
- Shopify Developer · Applabmx
- Período de referencia en Applabmx
- 2024–2025
- Tecnologías
- Shopify · Liquid · HTML · CSS · JavaScript · Tailwind CSS · Shopify CLI · Git · GitHub
- Sitio público
- exclusiveirondoors.com
Versión actual del sitio. Inicio actual de Exclusive Iron Doors con navegación y banner de puertas. Captura de referencia; puede incluir cambios posteriores a mi trabajo.
En Applabmx desarrollé secciones del inicio, la galería y las páginas de colecciones del sitio web de Exclusive Iron Doors. Implementé la lógica de filtros con metafields de Shopify y la integración con una app de favoritos dentro del tema.
Requerimiento
El alcance incluía presentar el catálogo en colecciones, implementar filtros basados en los metadatos de los productos y conectar la interfaz con una app de favoritos. También desarrollé secciones del inicio y la galería.
Implementación
Desarrollé las vistas del tema con Liquid, HTML, CSS y JavaScript. Utilicé los metafields de Shopify como base para la lógica de filtros e integré la app de favoritos con la interfaz de la tienda.
Cómo funciona
El desarrollo combinó la presentación del catálogo con dos funcionalidades: filtrar productos según sus metafields y utilizar la app de favoritos desde el tema Shopify.
Metafields como datos de filtrado
Los metafields de Shopify contienen campos personalizados asociados a los productos. Implementé la lógica de filtros de las colecciones tomando esos valores como criterios, en lugar de depender únicamente del texto visible en las tarjetas del catálogo.
Interfaz de las colecciones
Liquid conecta la vista con el catálogo de Shopify; HTML y CSS estructuran y presentan los controles y productos. JavaScript participa en el comportamiento de la interfaz de filtrado dentro del tema.
Integración de favoritos
Integré una app de favoritos existente con la interfaz del tema. El trabajo consistió en conectar esa funcionalidad con la tienda; la gestión de la lista corresponde a la app integrada.
Inicio y galería
Desarrollé las secciones del inicio y la galería como vistas del tema, con Liquid, HTML, CSS y JavaScript. La galería presenta imágenes, mientras que las colecciones organizan el catálogo de productos.
Versión actual del sitio. Colección actual de Exclusive Iron Doors con controles de estilo, tamaño, apertura y precio. Captura de referencia; puede incluir cambios posteriores a mi trabajo.
Versión actual del sitio. Galería actual de Exclusive Iron Doors con fotografías de proyectos y categorías. Captura de referencia; puede incluir cambios posteriores a mi trabajo.
Trabajo realizado
Desarrollo realizado en el tema Shopify.
Inicio y galería
Desarrollé secciones de la página de inicio y la galería.
Colecciones con filtros
Construí las páginas de colecciones y la lógica basada en metafields.
App de favoritos
Integré la funcionalidad de favoritos con el tema Shopify.
Funcionalidades entregadas
Secciones y funcionalidades entregadas.
Filtros por campos personalizados
Se entregó la lógica de filtrado basada en metafields de Shopify.
Vistas e integración
Se entregaron las secciones de inicio, galería, colecciones e integración de favoritos.
El período de referencia corresponde a mi trabajo en Applabmx, de junio de 2024 a abril de 2025; no indica las fechas exactas de este proyecto. Las capturas muestran el sitio público actual y pueden incluir cambios posteriores.
Habilidades aplicadas
- Desarrollo de temas Shopify
- Liquid
- Metafields de Shopify
- Filtros de colecciones
- Integración de favoritos
- Galerías
- HTML
- CSS
- JavaScript
- Shopify CLI
- Git y GitHub