---
title: Hummingbird — tema por defecto de PS 9.x
section: themes
slug: hummingbird
description: "Guia del tema Hummingbird de PrestaShop 9.x: Bootstrap 5, nuevos patrones JS, arquitectura SCSS, migracion desde Classic y diferencias clave."
keywords: prestashop hummingbird tema PS9 bootstrap 5 SCSS webpack migracion classic PS9 tema por defecto
last_updated: 2024-12-01
source_url: "https://ayudaprestashop.es/themes/hummingbird"
---

# Hummingbird — tema por defecto de PS 9.x

> Guia del tema Hummingbird de PrestaShop 9.x: Bootstrap 5, nuevos patrones JS, arquitectura SCSS, migracion desde Classic y diferencias clave.

Hummingbird es el tema por defecto de PrestaShop 9.x, sustituyendo a Classic. Usa Bootstrap 5, ES Modules nativos, SCSS con tokens CSS y elimina jQuery como dependencia obligatoria.

## Novedades de Hummingbird vs Classic

| Caracteristica | Classic (PS 8.x) | Hummingbird (PS 9.x) |
| --- | --- | --- |
| Framework CSS | Bootstrap 4 | Bootstrap 5 |
| JavaScript | jQuery obligatorio | Vanilla JS / ES Modules |
| CSS Variables | No | Si (tokens CSS personalizables) |
| SCSS | Partial SCSS | Tokens + componentes modulares |
| Webpack | Webpack 4 | Webpack 5 + ESBuild |
| Twig | Smarty principal | Twig con Smarty en FO legacy |
| Dark mode | No nativo | Soporte via prefers-color-scheme |
| Accesibilidad | Basica | WCAG 2.1 AA objetivo |

## Estructura del tema

*Estructura de directorios de Hummingbird*

```text
themes/hummingbird/
├── assets/
│   ├── css/
│   │   └── theme.css         ← CSS compilado
│   ├── js/
│   │   └── theme.js          ← JS compilado
│   └── img/
├── config/
│   └── theme.yml             ← Configuracion del tema
├── modules/                  ← Overrides de modulos
├── templates/
│   ├── catalog/
│   ├── checkout/
│   ├── customer/
│   └── layouts/
│       ├── layout-full-width.tpl
│       └── layout-left-column.tpl
├── _dev/                     ← Fuentes SCSS y JS (no incluido en la distribucion)
│   ├── scss/
│   │   ├── _variables.scss
│   │   ├── _tokens.scss      ← CSS Custom Properties
│   │   └── components/
│   └── js/
│       └── components/
├── preview.jpg
└── theme.yml
```

## Bootstrap 5 — cambios en el HTML

| Bootstrap 4 (Classic) | Bootstrap 5 (Hummingbird) |
| --- | --- |
| data-toggle | data-bs-toggle |
| data-dismiss | data-bs-dismiss |
| data-target | data-bs-target |
| ml-auto / mr-auto | ms-auto / me-auto |
| float-left / right | float-start / float-end |
| text-left / right | text-start / text-end |
| jQuery.modal('show') | new bootstrap.Modal(el).show() |
| no-gutters | g-0 |
| sr-only | visually-hidden |

## SCSS y sistema de tokens CSS

*_tokens.scss — personalizar el tema con CSS Custom Properties*

```scss
// En _dev/scss/_tokens.scss (o en tu child theme)
:root {
  // ── Colores ──
  --color-primary:        #1a73e8;
  --color-primary-light:  #4a90e8;
  --color-secondary:      #6c757d;
  --color-success:        #28a745;
  --color-danger:         #dc3545;
  --color-warning:        #ffc107;

  // ── Tipografia ──
  --font-family-base:     'Inter', system-ui, sans-serif;
  --font-size-base:       1rem;
  --font-size-sm:         0.875rem;
  --font-size-lg:         1.125rem;
  --line-height-base:     1.5;

  // ── Espaciado ──
  --spacer:               1rem;
  --spacer-xs:            calc(var(--spacer) * .25);
  --spacer-sm:            calc(var(--spacer) * .5);
  --spacer-lg:            calc(var(--spacer) * 1.5);
  --spacer-xl:            calc(var(--spacer) * 3);

  // ── Bordes ──
  --border-radius:        0.375rem;
  --border-radius-lg:     0.5rem;
  --border-color:         #dee2e6;
}
```

## JavaScript modular (ES Modules)

*Patron de componentes JS en Hummingbird*

```javascript
// En _dev/js/components/myComponent.js

export default class MyComponent {
  constructor(el, options = {}) {
    this.el = el;
    this.options = {
      animationDuration: 300,
      ...options,
    };
    this.init();
  }

  init() {
    this.el.addEventListener('click', (e) => this.handleClick(e));
  }

  handleClick(event) {
    event.preventDefault();
    // ...
  }
}

// En _dev/js/theme.js — punto de entrada
import MyComponent from './components/myComponent';

// Inicializar cuando el DOM esta listo
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('[data-my-component]').forEach(el => {
    new MyComponent(el);
  });
});

// Exponer en window para compatibilidad con modulos legacy
window.MyTheme = { MyComponent };
```

## Migracion desde Classic

| Tarea de migracion | Prioridad | Notas |
| --- | --- | --- |
| Cambiar data-toggle por data-bs-* | Alta | Afecta dropdowns, modals, tabs |
| Reemplazar jQuery por Vanilla JS | Media | jQuery sigue disponible pero no es recomendado |
| Actualizar clases de utilidades BS4 a BS5 | Alta | ml-*, mr-*, float-left, etc. |
| Migrar SCSS a sistema de tokens | Media | Permite personalizacion sin recompilar |
| Probar modulos de terceros | Critica | Muchos modulos usan jQuery y BS4 |
| Actualizar child themes | Alta | Revisar todos los templates extendidos |
| Testar checkout completo | Critica | Bootstrap 5 cambia el HTML del checkout |


---

*Fuente: [https://ayudaprestashop.es/themes/hummingbird](https://ayudaprestashop.es/themes/hummingbird). Version Markdown generada automaticamente para consumo por LLMs.*