Hummingbird — the new PrestaShop theme architecture: how it differs from Classic and what changed in PrestaShop 9.2

For many years, almost every PrestaShop store started from the same foundation — the standard Classic theme.

It has survived several generations of the platform, thousands of modules, and a huge number of customizations. Many commercial themes were built on top of Classic, so replacing it with a new theme was far more difficult than it might seem.

But over time, one thing became obvious: modern online stores had changed significantly, while the architecture of Classic increasingly limited front-end development.

That is why PrestaShop introduced a new theme — Hummingbird.

Starting with PrestaShop 9.1, Hummingbird became the default theme of the platform, while Classic has largely remained for backward compatibility. For new development, PrestaShop documentation now recommends focusing on Hummingbird.

And this is not just about a new visual design.

Hummingbird effectively introduces a new front-end architecture for PrestaShop.

Why PrestaShop could not simply update Classic

Classic was created in a very different era of web development.

Over the years, a huge ecosystem has grown around it:

• themes;

• modules;

• JavaScript scripts;

• template overrides;

• CSS;

• custom hooks;

• third-party libraries.

Any major architectural change could have broken compatibility with thousands of existing solutions.

As a result, Classic gradually became trapped by backward compatibility.

To build a truly modern front end, PrestaShop would have had to change Bootstrap, JavaScript, SCSS, template structure, and the way interface components interact with each other.

Trying to change all of that inside Classic would have meant constantly working around architectural decisions made many years ago.

PrestaShop chose a more sensible approach — to create a new foundation.

That is how Hummingbird appeared.

Hummingbird is not just another PrestaShop design

If you install Hummingbird and look only at its appearance, it is easy to underestimate the scale of the changes.

The theme is intentionally quite neutral.

Its purpose is not to demonstrate the most impressive possible store design.

Its purpose is to provide a technically correct foundation on top of which developers can build modern commercial themes.

PrestaShop describes Hummingbird as a reference implementation of the platform's modern front end.

In other words, Hummingbird shows how the PrestaShop team currently believes themes should be structured.

And that is far more important than the default design itself.

Bootstrap 5 instead of the old foundation

One of the biggest changes is the move to Bootstrap 5.3.

Classic is historically tied to an older Bootstrap architecture and a large number of solutions built around it.

Hummingbird uses a modern Bootstrap version.

This provides a more up-to-date grid system, components, utilities, CSS variables, and a much better base for responsive interfaces.

But PrestaShop did more than simply update Bootstrap.

Hummingbird is structured so that it is much clearer where Bootstrap ends and PrestaShop-specific styles begin.

This may sound like a small detail until you have to maintain a large theme for several years.

In older projects, it is often difficult to understand:

does this style come from Bootstrap, PrestaShop, a module, or the custom theme?

Hummingbird tries to separate these layers.

A completely different SCSS structure

Another major change is inside the CSS architecture.

Hummingbird received a new modular SCSS structure.

Bootstrap components, PrestaShop styles, and theme-specific components are separated from each other.

It also uses the modern CSS @layer mechanism.

This makes it much easier to control the priority of different CSS layers in a predictable way.

For a large online store, this matters a lot.

The larger the project becomes, the more likely developers are to encounter the classic problem:

!important

Then another !important, followed by an even more specific selector — and a few years later nobody is quite sure why a particular element looks the way it does.

A cleaner CSS architecture reduces these conflicts.

For developers building their own themes, this is one of the most useful changes in Hummingbird.

BEM instead of chaotic CSS classes

Hummingbird uses the BEM — Block, Element, Modifier methodology.

It introduces a clear naming structure for CSS classes and components.

Instead of a large number of globally connected selectors, the interface is divided into independent blocks.

For example, a product card becomes a standalone component with its own elements and states.

This is especially important for large stores where, over time, you may need:

• several product card variants;

• mobile-specific layouts;

• quick view;

• different catalog layouts;

• marketplace-style interface elements;

• personalized blocks;

• recommendations;

• additional purchase scenarios.

The bigger the theme becomes, the more noticeable the difference is between a simple collection of CSS rules and a real component-based architecture.

Hummingbird is gradually moving away from jQuery

Classic was created at a time when jQuery was considered almost mandatory for any major website.

Today, the situation is very different.

Modern JavaScript can handle most tasks without an additional library.

In Hummingbird, the theme's own code no longer requires jQuery.

This does not mean that PrestaShop has completely removed jQuery from the platform.

It can still be used by modules that need backward compatibility.

But the architectural direction has changed.

New code is gradually moving toward native JavaScript and TypeScript.

This reduces dependencies and makes the front end easier to modernize further.

JavaScript should no longer depend on design classes

There is another important architectural change here.

Hummingbird increasingly separates:

• how an element looks;

• how its JavaScript behavior works.

For JavaScript interaction, dedicated attributes are used, such as:

data-ps-component
data-ps-action
data-ps-target
data-ps-state

For example, JavaScript no longer has to search for a button by a CSS class that is also responsible for its visual styling.

This is a proper separation of responsibilities.

A designer can change classes or styling without breaking the JavaScript logic of the component.

For developers building custom themes, this means significantly more freedom.

Performance became part of the architecture

A modern online store cannot be designed only around appearance.

Speed directly affects usability, conversion, and SEO.

That is why Hummingbird pays much more attention to resource loading and image handling.

Among other things, it uses lazy loading for images and reduces unnecessary dependencies.

But the most important point is not any single optimization.

Performance is treated as one of the fundamental requirements of the theme itself.

The new architecture is designed with future optimization in mind instead of trying to add performance improvements on top of old code.

Accessibility became much more important

A few years ago, accessibility was often treated as an optional feature for online stores.

Today, it is a full part of modern web development.

Hummingbird was designed with accessibility requirements in mind, including:

• proper semantic markup;

• keyboard navigation;

• ARIA attributes;

• form labels;

• correct heading structure;

• accessible menus;

• accessible checkout controls.

In Hummingbird 2.0, the team reported compliance with more than 93% of the tested requirements of European accessibility standards.

For the European market, this is especially important after the introduction of the European Accessibility Act.

But even for stores operating outside the EU, good semantics improve the overall quality of the interface and usually make the project easier to maintain.

Better template structure

One of the long-standing problems with older PrestaShop themes has always been the large number of template overrides.

A developer wants to change a small part of a page — but sometimes has to copy a large .tpl file entirely.

Then PrestaShop releases an update, the original template changes, while the overridden copy remains outdated.

That is how technical debt gradually accumulates.

In Hummingbird, templates have been seriously reworked and split into more logical parts.

Additional Smarty blocks and hooks are being added so developers do not have to duplicate large portions of templates for small modifications.

For example, in Hummingbird 2.1 product actions were moved into a separate product_actions block, making it much easier to customize the add-to-cart area cleanly.

This may seem like a minor change, but these are exactly the kinds of architectural decisions that determine whether a theme can be maintained properly for several years.

A new approach to modules

Hummingbird also creates a new challenge.

A huge number of existing PrestaShop modules were developed around Classic and Bootstrap 4.

Some of them output their own markup, use older Bootstrap classes, or directly bind JavaScript to a specific DOM structure.

That means the entire ecosystem cannot move to Hummingbird overnight.

PrestaShop has even prepared separate guidance for migrating modules from Bootstrap 4 to Bootstrap 5.

This is exactly why Classic has not disappeared yet.

PrestaShop needs to give module and theme developers time to adapt.

But the direction is already clear: new development should increasingly target Hummingbird.

What changed in Hummingbird for PrestaShop 9.2

It is important not to confuse the versions here.

Hummingbird became the default theme in PrestaShop 9.1, which introduced Hummingbird 2.0.

For PrestaShop 9.2, Hummingbird 2.1 is intended.

This is not as radical an architectural shift as Hummingbird 2.0.

Instead, version 2.1 continues to refine the architecture already introduced.

Several areas are particularly interesting.

Checkout has been improved

Navigation between checkout steps was reworked into a reusable component.

The steps can now be generated dynamically from the $checkout_steps structure instead of relying on hardcoded markup.

For the default theme, this is an important change.

Checkout is one of the areas developers customize most frequently.

The more component-based this part of PrestaShop becomes, the easier it will be to build:

• alternative checkout flows;

• one-page checkout;

• additional steps;

• custom delivery logic;

• integrations with external services.

This is especially interesting given the appearance of PrestaShop's own One Page Checkout module in the 9.2 branch.

SEO and JSON-LD improvements continue

Hummingbird 2.1 also improves structured data handling.

When data is available on the server side, JSON-LD can be generated directly by the server using safer encoding.

Structured data for product listings has also been improved.

For an online store, structured data matters because it helps search engines better understand products, prices, and catalog structure.

This is a good example of a change customers will never notice visually, but which improves the technical quality of the platform.

Building child and commercial themes is becoming easier

Hummingbird 2.1 introduces additional Smarty blocks in breadcrumbs and other interface elements.

Large pieces of the interface continue to be split into smaller, extensible components.

This is the right direction for PrestaShop.

A good base theme should not force developers to rewrite it.

It should allow developers to extend it.

Hummingbird is gradually moving toward exactly that model.

Old JavaScript continues to be removed

In version 2.1, several more components were migrated from jQuery to modern native browser APIs.

This process will continue gradually because completely removing legacy dependencies in a single release would create serious compatibility problems.

But the direction is clear:

fewer legacy dependencies, more native browser capabilities and TypeScript.

Why Hummingbird is especially interesting for the future of PrestaShop themes

The main advantage of Hummingbird is not that the default store looks more attractive.

There are commercial themes that are visually far more impressive.

The real advantage is that PrestaShop finally has a modern foundation on top of which serious e-commerce interfaces can be built.

A modern theme needs to support much more than a theme from ten years ago.

Today, e-commerce is no longer just:

catalog → product page → cart.

A modern online store is gradually becoming a complex application.

It may include:

• smart recommendations;

• personalized product feeds;

• advanced search;

• multiple product card layouts;

• dynamic filters;

• complex product combinations;

• fast checkout;

• pickup-point maps;

• mobile-first interfaces;

• marketplace mechanics;

• personalization;

• B2B features;

• dynamic content loading.

Building all of this on top of an architecture designed for an earlier generation of online stores becomes increasingly difficult.

Hummingbird addresses exactly this problem.

What is happening with PrestaShop 9.2 itself

At the time of writing, PrestaShop 9.2 is still in a pre-release stage, so it is too early to deploy it in a production store.

However, the direction of development is already clear.

Several major changes are appearing in 9.2.

One of the most interesting for developers is Extra Properties.

Previously, if a module needed to add its own field to a product, combination, customer, or order, developers often had to create a separate database table, implement their own relation, and handle data saving manually.

Extra Properties introduces a standard mechanism for this directly inside PrestaShop.

This is a very important architectural improvement.

Modules can extend platform entities in a cleaner way without recreating the same infrastructure every time.

The modernization of the Back Office also continues, with more legacy components being moved toward the modern Symfony architecture.

The shipping system is evolving as well, gradually moving away from the old limitation where an order was too tightly connected to a single carrier.

A native One Page Checkout has appeared.

Ask AI has been introduced for the Back Office.

This means Hummingbird should not be viewed separately from the rest of the platform.

In the Front Office, PrestaShop is building a modern component-based architecture.

In the Core, it is introducing cleaner extension mechanisms.

In the Back Office, legacy code continues to be replaced.

Together, these changes are gradually shaping the next generation of PrestaShop.

Why this is a strong foundation for future development

PrestaShop has one major advantage and one major challenge — its long-standing ecosystem.

The platform cannot simply discard everything old and start over.

Thousands of stores depend on existing themes, modules, and integrations.

That is why modernization is happening gradually.

First came the new Symfony architecture in the Back Office.

Then a new API.

Now Hummingbird is becoming the new foundation of the Front Office.

Extra Properties are being introduced.

The delivery architecture is evolving.

Old dependencies are gradually being replaced with modern technologies.

For an open-source platform the size of PrestaShop, this approach is the most realistic.

Instead of rewriting everything in a single release and breaking half of the ecosystem, outdated parts are being replaced step by step with modern architectural solutions.

Classic did its job. Now the Hummingbird era begins

Classic should not be considered a bad theme.

On the contrary, it has proven remarkably durable and became the foundation of a huge number of online stores.

But technologies change.

What was good architecture several years ago does not have to remain the best architecture forever.

Hummingbird is not simply a new visual design for the default store.

It represents a shift toward a different front-end development model:

Bootstrap 5, BEM, structured SCSS, CSS Layers, TypeScript, reduced reliance on jQuery, component-based templates, modern accessibility, and a cleaner overall architecture.

That is why Hummingbird is far more important than another redesign of the default PrestaShop theme.

For theme developers, it is a new starting point.

For module developers, it means gradually adapting to the new architecture.

And for store owners, it creates the opportunity to build projects that will be easier to develop, maintain, and expand over the next several years.

At Ewonta Market, new themes and modules are gradually being built around the modern PrestaShop 9 and Hummingbird architecture. This makes it possible not only to change the appearance of a store, but to create interfaces designed for the future development of e-commerce.