Problema / reto
Reproducir un diseño de Figma sin romper una arquitectura de eCommerce existente
El reto no consistía únicamente en modificar colores y espaciados. Falcon ya incluía
plantillas, módulos, hooks, comportamiento JavaScript y una estrategia propia para mover
elementos entre escritorio y móvil. La personalización debía integrarse con esa estructura
en lugar de reemplazarla.
- Adaptar la cabecera, la navegación y el buscador sin perder su contenido dinámico.
- Mantener operativos la cuenta de cliente, el carrito y los resultados del buscador.
- Personalizar tarjetas, filtros, paginación y ficha de producto conservando los datos
nativos.
- Evitar IDs duplicados y bloques repetidos al cambiar entre escritorio y móvil.
- Organizar los estilos por componente para limitar conflictos con Bootstrap y Falcon.
- Trabajar sin modificar el núcleo de PrestaShop ni introducir overrides PHP innecesarios.
- Comprender el sistema de compilación y caché para poder verificar cada cambio.
Solución
Extender las plantillas y componentes existentes en lugar de sustituirlos
La solución se apoyó en varios principios:
- Smarty para reorganizar el marcado y los datos de cada bloque.
- Hooks existentes para conservar la ubicación y el funcionamiento de
los módulos.
- SCSS por componente para mantener los cambios localizados.
- Responsive de Falcon para reutilizar el movimiento nativo de
bloques.
- Webpack para generar los assets finales después de cada cambio.
Criterio técnico
Una personalización visual compatible con el comportamiento de la tienda
Cada decisión visual se comprobó también desde el punto de vista funcional. El buscador
debía seguir devolviendo productos, el menú móvil debía abrir el modal nativo, el
carrito debía conservar sus datos y las plantillas de producto debían seguir recibiendo
precios, descuentos, disponibilidad y características.
- Sin modificaciones del core.
- Sin duplicar sistemas ya resueltos por Falcon.
- Con clases BEM y selectores limitados a cada componente.
- Con adaptación progresiva para escritorio, tablet y móvil.
Arquitectura
Plantillas Smarty y estilos SCSS separados por área de la tienda
Los cambios se organizaron alrededor de las partes principales de Falcon. Las plantillas
controlan el marcado y la posición de los datos, mientras que los archivos SCSS agrupan las
reglas visuales por cabecera, categoría, producto, breadcrumb y footer.
themes/falcon/
├── _dev/
│ └── css/
│ ├── custom/
│ │ ├── breadcrumb/
│ │ │ ├── _breadcrumb.scss
│ │ │ └── _index.scss
│ │ ├── footer/
│ │ │ ├── _footer.scss
│ │ │ └── _index.scss
│ │ ├── header/
│ │ │ ├── _header-nav.scss
│ │ │ ├── _header.scss
│ │ │ ├── _index.scss
│ │ │ └── _search-form.scss
│ │ ├── page-category/
│ │ │ ├── _active-filters.scss
│ │ │ ├── _category-heading.scss
│ │ │ ├── _cover-image.scss
│ │ │ ├── _filters.scss
│ │ │ ├── _index.scss
│ │ │ ├── _pagination.scss
│ │ │ └── _products.scss
│ │ └── page-product/
│ │ ├── _container.scss
│ │ ├── _index.scss
│ │ ├── _product-details.scss
│ │ ├── _product-tabs.scss
│ │ ├── _slider-image.scss
│ │ └── _slider-thumbs.scss
│ ├── fonts/
│ │ ├── montserrat-v31-latin-300.woff2
│ │ ├── montserrat-v31-latin-500.woff2
│ │ ├── montserrat-v31-latin-600.woff2
│ │ ├── montserrat-v31-latin-700.woff2
│ │ ├── montserrat-v31-latin-800.woff2
│ │ └── montserrat-v31-latin-900.woff2
│ ├── theme/
│ │ └── base/
│ │ ├── _fonts.scss
│ │ └── _typography.scss
│ └── theme.scss
├── modules/
│ ├── ps_contactinfo/
│ │ └── ps_contactinfo.tpl
│ ├── ps_customersignin/
│ │ └── ps_customersignin.tpl
│ ├── ps_facetedsearch/
│ │ └── views/
│ │ └── templates/
│ │ └── front/
│ │ └── catalog/
│ │ ├── active-filters.tpl
│ │ └── facets.tpl
│ └── ps_linklist/
│ └── views/
│ └── templates/
│ └── hook/
│ └── linkblock.tpl
└── templates/
├── _partials/
│ ├── breadcrumb.tpl
│ ├── footer.tpl
│ ├── header.tpl
│ └── pagination.tpl
├── catalog/
│ ├── _partials/
│ │ ├── miniatures/
│ │ │ ├── _partials/
│ │ │ │ ├── product-prices.tpl
│ │ │ │ └── product-thumb.tpl
│ │ │ └── product.tpl
│ │ ├── category-header.tpl
│ │ ├── product-add-to-cart.tpl
│ │ ├── product-cover-thumbnails.tpl
│ │ ├── product-prices.tpl
│ │ ├── product-tabs.tpl
│ │ └── products-top.tpl
│ └── product.tpl
└── layouts/
└── layout-both-columns.tpl
Esta división permite localizar rápidamente cada cambio y reduce el riesgo de que una regla
destinada a la ficha de producto termine afectando al listado o al buscador.
Responsive
Reutilizar el sistema móvil de Falcon
Falcon mueve determinados bloques entre contenedores mediante JavaScript. En lugar de
duplicar el menú, el buscador o los accesos de usuario, se mantuvieron los contenedores
previstos por el tema y se adaptaron sus estilos.
- Modal móvil nativo para el menú de categorías.
- Contenedores específicos para escritorio y móvil.
- Control de IDs y marcado para evitar duplicados.
- Breakpoints compatibles con Bootstrap y Falcon.
Módulos
Integración con las piezas requeridas por el tema
is_imageslider: gestión del slider de
imágenes.is_searchbar: buscador y resultados
dinámicos.is_shoppingcart: acceso y estado del
carrito.is_themecore: funcionalidades base de
Falcon.
La personalización visual se realizó alrededor de estos módulos, no reemplazándolos por
bloques estáticos.
Dificultades y soluciones
Incidencias reales de entorno, compilación y comportamiento del tema
01
Compatibilidad de Node.js
Falcon no compilaba correctamente con Node.js 24. Se utilizó Node.js 18.18.0 y npm
9.8.1, se reinstalaron las dependencias y se ejecutó de nuevo project-init.
Algunas directivas antiguas de .htaccess no eran
compatibles con la configuración actual de Apache. Se revisó mod_authz_core y se adaptaron las reglas problemáticas.
03
OpenSSL y certificados
Los errores de openssl_pkey_new se resolvieron revisando
las extensiones PHP y la ruta configurada para cacert.pem en WAMP64.
La limpieza de caché podía bloquearse o agotar memoria. Se revisó la ruta temporal y
se ejecutó php -d memory_limit=512M bin/console cache:clear.
Bootstrap y Falcon sobrescribían algunas reglas. Se aumentó la especificidad solo
cuando era necesario, se limitó el uso de !important y
se separó el SCSS por componente.
06
Características en dos columnas
La plantilla original mostraba una característica por fila. Se añadió un contador
Smarty para agrupar dos características completas y crear celdas vacías cuando el
número era impar.
Criterios de desarrollo
Decisiones orientadas al mantenimiento
- No modificar el núcleo de PrestaShop.
- Evitar PHP adicional cuando Smarty y los hooks eran suficientes.
- Conservar módulos y funcionalidades nativas.
- Separar los estilos por componentes.
- Reducir reglas duplicadas y selectores globales.
- Priorizar soluciones compatibles con futuras modificaciones.
Compilación
Flujo para aplicar y comprobar cambios
cd themes/falcon/_dev
npm install
npm run project-init
npm run build
# Desde la raíz de PrestaShop
php -d memory_limit=512M bin/console cache:clear
Después se realiza una recarga sin caché del navegador para
comprobar los recursos generados.
Resultado
Una tienda adaptada al diseño sin perder las capacidades de PrestaShop y Falcon
El resultado es una personalización visual completa que conserva la estructura funcional de
PrestaShop. La cabecera, la navegación, el catálogo, los filtros, la ficha y el footer
siguen trabajando con datos y módulos reales, pero presentan una interfaz alineada con la
propuesta de Figma.
Como proyecto de portfolio, demuestra capacidad para trabajar sobre una base existente,
comprender una arquitectura desconocida, adaptar Smarty y SCSS, resolver problemas de
compilación y entorno, y equilibrar fidelidad visual con mantenimiento y compatibilidad.
