The Hummingbird theme is the new default theme for PrestaShop 9, replacing the Classic theme. Built with Bootstrap 5 and TypeScript, it delivers a faster, more modern shopping experience with native WebP/AVIF support and an improved checkout flow.

What is the Hummingbird Theme?

Hummingbird is the official default theme shipped with PrestaShop 9. It represents a complete front-end rebuild using modern web technologies.

Key Technical Features

• Bootstrap 5 — updated from Bootstrap 4 used in Classic theme. Better grid, flexbox utilities and components.
• TypeScript — replaces plain JavaScript for better type safety and maintainability
• BEM methodology — cleaner CSS structure, easier to override and customize
• Native WebP and AVIF — modern image formats served automatically for faster page loads
• Deferred jQuery loading — jQuery loads asynchronously, improving Core Web Vitals scores

Performance Improvements

Hummingbird theme scores significantly better on Google PageSpeed Insights compared to Classic theme:

• Smaller CSS bundle size due to BEM and Bootstrap 5 optimizations
• Reduced JavaScript blocking time
• Better Largest Contentful Paint (LCP) via WebP images

Improved Checkout Flow

The checkout process has been redesigned in Hummingbird with a cleaner step-by-step UI, fewer distractions, and better mobile responsiveness — all aimed at reducing cart abandonment.

Hummingbird vs Classic Theme

Can I Use Classic Theme on PrestaShop 9?

Yes. The Classic theme still works on PrestaShop 9, but it does not benefit from the new WebP/AVIF pipeline or Hummingbird performance optimizations. If you have a custom theme based on Classic, it will generally continue to work with minor adjustments.

Related Resources

Read our PrestaShop 9 complete guide or compare PrestaShop 9 vs PrestaShop 8.

How to Customize the Hummingbird Theme

Direct modification of the Hummingbird theme files is discouraged — updates will overwrite your changes. The recommended approach is to create a child theme.

Creating a Child Theme

1. Copy the Hummingbird theme folder: /themes/hummingbird/ → /themes/mytheme/
2. Edit /themes/mytheme/config/theme.yml and change the name and parent reference
3. Only keep the files you want to override in your child theme — all others will fall back to the parent
4. Override CSS by adding your styles to /themes/mytheme/assets/css/custom.css

CSS Variables Override

Hummingbird uses CSS custom properties (variables) for colors and spacing, making customization easy:

/* In your custom.css */
:root {
  --color-primary: #e63946;        /* Change brand color */
  --color-secondary: #457b9d;
  --font-family-base: "Inter", sans-serif;
  --border-radius-base: 8px;
}

PageSpeed Comparison: Hummingbird vs Classic Theme

Scores depend on hosting, modules, and content. Hummingbird advantage is most visible on mobile.

Switching from Classic to Hummingbird

1. Go to Design → Theme & Logo in your back office
2. Install the Hummingbird theme (download from the official PrestaShop Addons if not pre-installed)
3. Click Use this theme next to Hummingbird
4. Clear all caches: Back Office → Advanced Parameters → Performance → Clear cache
5. Test your store thoroughly — product pages, checkout, mobile view

Warning: If you have a custom child theme based on Classic, switching to Hummingbird will show the new default design. You will need to rebuild your customizations as a Hummingbird child theme.

Hummingbird for Developers — BEM Class Structure

BEM (Block, Element, Modifier) is a CSS naming convention that makes stylesheets more predictable and easier to override:

/* BEM examples in Hummingbird */
.product-miniature { }                    /* Block */
.product-miniature__title { }             /* Element */
.product-miniature__title--on-sale { }    /* Modifier */

/* Override example */
.product-miniature__price {
  color: var(--color-primary);
  font-weight: 700;
}

Frequently Asked Questions

Is the Classic theme still available in PrestaShop 9?

Yes. Classic theme continues to work in PS9. Hummingbird is the new default, but you are not forced to switch. However, you will miss out on WebP/AVIF support, Bootstrap 5, and the improved checkout that come with Hummingbird.

Can I use Bootstrap 4 components with Hummingbird?

Hummingbird uses Bootstrap 5, which has breaking changes vs Bootstrap 4 (notably, jQuery is no longer required and some class names changed). Bootstrap 4 components will generally need updates to work with Hummingbird.

Does Hummingbird work with all PrestaShop modules?

Most front office modules work with both Classic and Hummingbird. However, modules that inject specific CSS targeting Classic theme classes may need updates. Check our PS9 module compatibility guide for details.

How does Hummingbird handle WebP images?

PrestaShop 9 with Hummingbird automatically generates WebP and AVIF versions of your product images. The theme serves the best format supported by the visitor browser — modern browsers get WebP/AVIF, older browsers get JPEG/PNG fallback. No configuration needed.