Shopify · Actualización de tema comercial
Actualización de tema Shopify con personalizaciones para Charlotte’s Web
Actualización de un tema comercial de Shopify, con migración de settings y secciones personalizadas, adaptación de estilos y pruebas en staging.
- Rol
- Shopify Developer
- Período de referencia
- 2026
- Tecnologías
- Shopify · Liquid · HTML · CSS · JavaScript · Shopify CLI · Git · GitHub
- Sitio público
- charlottesweb.com
Inicio del sitio público actual. Captura de referencia; no corresponde al staging entregado.
Actualicé el tema de pago de Charlotte’s Web a una nueva versión. Revisé las secciones declaradas en todas las páginas, identifiqué las personalizaciones al compararlas con el tema actualizado y migré sus settings y código Liquid, CSS y JavaScript. Adapté los estilos y la lectura de variables globales a la nueva versión. La entrega se realizó en staging, donde se probó el flujo completo del usuario.
Requerimiento
El tema comercial tenía personalizaciones que debían trasladarse a la nueva versión. Actualizar sin revisar esas modificaciones podía dejar fuera secciones custom, configuraciones y código asociado. Además, la nueva versión cambiaba la forma de leer las variables globales de estilo.
Implementación
Comparé las secciones de todas las páginas con las disponibles en la versión actualizada. Migré los settings y las secciones custom junto con su código, adapté los estilos al nuevo tema y lo subí a staging para validar el recorrido del usuario.
Cómo funciona
La actualización requirió separar la configuración de las secciones, el código personalizado y los cambios de compatibilidad de la nueva versión. El proceso terminó con la entrega y las pruebas en staging.
Inventario de secciones por página
Revisé las secciones declaradas en todas las páginas del tema existente. Esta revisión permitió identificar qué componentes utilizaba cada vista y qué configuración debía trasladarse a la nueva versión.
Comparación con el tema actualizado
Comparé ese inventario con las secciones de la versión actualizada del tema comercial. La comparación permitió distinguir las secciones del tema de las secciones custom que requerían una migración de su código.
Migración de settings de cada sección
Trasladé los settings de cada sección al tema nuevo para conservar su configuración. Los valores configurados se migraron junto con las secciones que los utilizan; copiar el código Liquid por sí solo no reconstruía toda la configuración de las páginas.
Migración del código personalizado
Migré las secciones custom y su código Liquid, CSS y JavaScript. Liquid define el marcado y su integración con Shopify; CSS aporta la presentación y JavaScript los comportamientos de la interfaz que acompañan a esas secciones.
Adaptación de estilos y variables globales
Ajusté los estilos para que las secciones migradas funcionaran con la versión actualizada. También adapté la forma en que se leen las variables globales de estilo, siguiendo la estructura de la nueva versión del tema.
Entrega y validación en staging
Subí el tema actualizado a staging. Allí se realizaron pruebas reproduciendo el flujo completo de un usuario para revisar la integración de las secciones, sus configuraciones y comportamientos dentro del tema actualizado.
Colección del sitio público actual con filtros y catálogo. La captura muestra la versión disponible al momento de consulta.
Ficha de producto del sitio público actual. Captura de referencia para mostrar la interfaz de la tienda.
Trabajo realizado
Migración de configuraciones y personalizaciones del tema.
Revisión y comparación
Revisé las secciones de todas las páginas y las comparé con las del tema actualizado.
Settings y código custom
Migré las configuraciones y las secciones personalizadas con su código Liquid, CSS y JavaScript.
Compatibilidad y staging
Adapté los estilos y la lectura de variables globales, y subí el tema a staging para las pruebas del flujo de usuario.
Funcionalidades entregadas
Tema actualizado entregado en staging.
Personalizaciones trasladadas
Se migraron los settings y las secciones custom identificadas en el tema existente.
Estilos adaptados
Se ajustaron los estilos y la lectura de variables globales para la nueva versión.
Entrega en staging
El tema se entregó en staging y se realizaron pruebas reproduciendo el flujo completo del usuario.
El trabajo descrito fue entregado y probado en staging. Las capturas muestran el sitio público actual de Charlotte’s Web; no documentan el staging ni confirman la publicación del tema entregado. El año 2026 es el período de referencia del trabajo, no una fecha exacta de implementación.
Habilidades aplicadas
- Actualización de temas Shopify
- Migración de personalizaciones
- Configuración de secciones
- Liquid
- HTML
- CSS
- JavaScript
- Shopify CLI
- Git y GitHub
- Pruebas en staging