Hummingbird vs Classic Theme: Which Should You Use?

Two Official Themes, Two Different Philosophies

PrestaShop ships with two official themes: Classic and Hummingbird. Classic has been the default theme since PrestaShop 1.7 was released in 2016. Hummingbird arrived with PrestaShop 8.x as a modern alternative designed for performance and future-readiness. Choosing between them is not simply a matter of which looks better. The two themes represent fundamentally different approaches to front-end architecture, and your choice affects performance, module compatibility, customization effort, and long-term maintainability.

This article provides a thorough comparison based on architecture, real performance data, practical considerations, and the specific situations where each theme makes sense. Whether you are starting a new store or considering a migration, this will help you make an informed decision.

Architecture: What Changed and Why

Classic was built on Bootstrap 4, jQuery, and Smarty templates. It follows a traditional server-rendered approach where the server generates full HTML pages and sends them to the browser. JavaScript is used primarily for interactive elements like the cart, product page, and checkout. The CSS is compiled from Sass files and delivered as a single large stylesheet.

Hummingbird was built as a ground-up reimagining. It uses Bootstrap 5, drops jQuery in favor of vanilla JavaScript, and introduces a component-based architecture. The CSS is more modular, the JavaScript is lighter, and the overall asset footprint is significantly smaller.

The removal of jQuery is the most consequential architectural change. jQuery added approximately 87KB (30KB gzipped) to every page load and encouraged a coding style where modules freely manipulated the DOM without coordination. Hummingbird replaces jQuery with modern browser APIs like fetch, querySelector, classList, and event delegation. This means the theme itself is faster, but modules that depend on jQuery need updates.

Bootstrap 5 brings its own changes. It drops jQuery as a dependency (aligning with Hummingbird's approach), uses CSS custom properties (variables) for easier theming, improves the grid system with better responsive utilities, and updates component markup patterns. Moving from Bootstrap 4 to 5 affects any custom CSS or template overrides that reference Bootstrap-specific classes.

Performance Comparison: Real Numbers

Performance is the primary reason PrestaShop created Hummingbird, and the numbers support the decision. Testing both themes on an identical PrestaShop 8.1 installation with the same products, modules, and server configuration reveals meaningful differences.

On a typical product page measured with Lighthouse on a simulated mobile connection, Classic scores in the 45-55 range for Performance, while Hummingbird scores in the 65-75 range. The specific metrics tell a clearer story.

First Contentful Paint (FCP) improves by roughly 0.5 to 1.0 seconds with Hummingbird. This is primarily due to the smaller CSS payload and the absence of render-blocking jQuery. Largest Contentful Paint (LCP) improves by a similar margin because the critical rendering path is shorter.

Total Blocking Time (TBT) sees the most dramatic improvement. Classic's jQuery-based JavaScript creates significant main thread blocking as the browser parses and executes the library plus all jQuery-dependent module scripts. Hummingbird's vanilla JavaScript approach reduces TBT by 40-60% in typical configurations.

Cumulative Layout Shift (CLS) is roughly equivalent between the two themes when properly configured, as layout stability depends more on image dimensions and lazy loading implementation than on the framework choice.

The total transfer size tells another part of the story. A default Classic installation transfers approximately 350-450KB of CSS and JavaScript on the first page load. Hummingbird brings this down to 200-300KB. The difference compounds across the entire browsing session as visitors navigate through your store.

These numbers assume a clean installation. In practice, third-party modules often add their own CSS and JavaScript, which can narrow or widen the gap depending on how well those modules are optimized for each theme.

Module Compatibility: The Elephant in the Room

This is where Hummingbird's advantages come with a significant caveat. Many PrestaShop modules were built with Classic's architecture in mind. They depend on jQuery, they use Bootstrap 4 markup patterns, and they assume specific template structures that Classic provides.

When you install these modules on Hummingbird, several things can break. JavaScript functionality that relies on jQuery will fail silently or throw errors. Modal dialogs, dropdowns, and other Bootstrap 4 components may not render correctly with Bootstrap 5's changed markup and class names. Template overrides that assume Classic's template structure will not work with Hummingbird's reorganized templates.

The severity of this issue depends on your module stack. Core PrestaShop modules are compatible with both themes. Well-maintained third-party modules from active developers typically support Hummingbird. However, older modules, niche modules, or modules from developers who have stopped updating their products may only work with Classic.

Before choosing Hummingbird, you should test every module you plan to use. Install them on a staging environment with Hummingbird active and thoroughly test every feature. Pay special attention to JavaScript-dependent functionality like AJAX carts, product customization fields, quick views, and checkout steps.

Some module developers ship separate template files for Classic and Hummingbird. When you see directories like views/templates/hook/classic/ and views/templates/hook/hummingbird/ in a module, that module explicitly supports both themes. This is the gold standard for compatibility.

Smarty vs Twig: Future-Proofing Considerations

PrestaShop has announced its intention to transition from Smarty to Twig as the template engine for the front office. This transition has been discussed for years and is partially implemented in the back office already. Hummingbird is designed with this transition in mind, though as of PrestaShop 8.x and 9.x, both themes still use Smarty for front-office templates.

The relevance for your theme choice is indirect but important. Hummingbird's template structure is organized in a way that will make the eventual Smarty-to-Twig migration smoother. If you build extensive customizations on Classic's template structure, you may face a larger migration effort when (not if) PrestaShop completes the Twig transition.

That said, this transition has been "coming soon" for several years now. Making a decision today based solely on a future template engine change is premature. Choose based on current, concrete needs and accept that some migration effort will be required regardless of which theme you choose when the Twig transition happens.

Customization Approach

Customizing Classic is well-documented and widely understood. There are hundreds of tutorials, thousands of forum posts, and years of community knowledge about modifying Classic. The theme uses straightforward Sass for styling, traditional jQuery for interactivity, and Smarty templates that are easy to read and modify.

Customizing Hummingbird requires updated skills. You need to be comfortable with modern CSS (custom properties, modern selectors, container queries), vanilla JavaScript (no jQuery crutch), and Bootstrap 5's utility-first approach. The learning curve is steeper if your team is accustomed to jQuery-based development.

However, Hummingbird's CSS custom properties make certain types of customization much easier than they were with Classic. Want to change the primary color across the entire theme? Modify a single CSS custom property. With Classic, you needed to track down every Sass variable, recompile, and deal with specificity conflicts.

Hummingbird also uses a more semantic HTML structure, which makes it easier to target elements with CSS selectors and improves accessibility. The template files are better organized with clearer separation of concerns.

Child Theme Support

Both themes support child themes, which is the recommended way to customize a PrestaShop theme without modifying the parent theme files directly. Child themes allow you to override specific templates, add custom CSS and JavaScript, and maintain your customizations across theme updates.

Classic's child theme mechanism is mature and well-tested. You create a child theme directory, define a theme.yml that references Classic as the parent, and selectively override the files you need to change. This workflow has been stable since PrestaShop 1.7.

Hummingbird's child theme support works the same way at the framework level but has some practical differences. Because Hummingbird's templates are structured differently, child theme overrides from a Classic-based child theme cannot be reused. You need to create new overrides based on Hummingbird's template structure.

PrestaShop 8.x improved child theme handling in general, making it easier to override assets (CSS and JavaScript) and partial templates. These improvements benefit both Classic and Hummingbird child themes equally.

If you are commissioning a custom theme from a developer, starting with Hummingbird as the parent is the better long-term choice. The cleaner architecture means less technical debt, and the modern CSS approach means fewer overrides are needed for common customizations.

Migration Path: Classic to Hummingbird

If you are currently running Classic and considering a switch to Hummingbird, here is what the migration actually involves.

Template overrides need to be rebuilt from scratch. You cannot simply copy your Classic template overrides into a Hummingbird child theme. The template file structure, variable names, and block names are different. You need to examine each override, understand what it accomplishes, and recreate it using Hummingbird's template structure.

Custom CSS needs review and likely significant revision. If your CSS targets Bootstrap 4 classes, those class names may have changed in Bootstrap 5. If your CSS uses jQuery-dependent patterns (like styling elements based on jQuery-added classes), those will break. If your CSS uses theme-specific class names from Classic, those may not exist in Hummingbird.

Custom JavaScript needs to be rewritten. Any jQuery code must be converted to vanilla JavaScript. This is often the most time-consuming part of the migration because jQuery code tends to be deeply intertwined with DOM manipulation patterns that need to be rethought.

Module compatibility needs to be verified for every installed module. As discussed above, modules that depend on jQuery or Bootstrap 4 may need updates or replacements.

A realistic timeline for migrating a moderately customized Classic store to Hummingbird is 40-80 hours of developer time. This is not a weekend project. Plan it as a proper development effort with a staging environment, thorough testing, and a rollback plan.

When to Choose Classic

Choose Classic when your store depends on older third-party modules that have not been updated for Hummingbird compatibility. Choose it when your development team is more comfortable with jQuery and Bootstrap 4 and you do not have the budget for retraining or hiring. Choose it when you are building on a tight deadline and need the widest possible selection of compatible themes and modules from the PrestaShop marketplace.

Classic is also the safer choice for stores running PrestaShop 1.7.x or early 8.0.x versions. Hummingbird was introduced later in the 8.x cycle and may not be fully available or stable on older PrestaShop versions.

If your store is already running on Classic with extensive customizations and performing adequately, there may be no compelling reason to migrate. The performance gains from Hummingbird are real but may not justify the migration effort if your store already loads quickly and converts well.

When to Choose Hummingbird

Choose Hummingbird when you are starting a new PrestaShop 8.x or 9.x store from scratch. The performance advantages are free when you do not have legacy customizations to migrate. Choose it when performance is a top priority for your business, particularly if your audience is primarily mobile users on slower connections where every kilobyte matters.

Choose Hummingbird when you want to future-proof your store. As PrestaShop continues to evolve toward modern front-end practices, Hummingbird will receive the most development attention and be the first to benefit from new features.

Choose it when you have developers comfortable with modern JavaScript and CSS. Hummingbird's architecture is cleaner and more maintainable for teams with current front-end skills.

And choose it when you care about accessibility. Hummingbird's semantic HTML, ARIA attributes, and keyboard navigation support are noticeably better than Classic's. If your store needs to meet WCAG accessibility standards, Hummingbird gives you a better starting point.

The Third-Party Theme Question

Many store owners skip both official themes entirely and purchase a third-party theme from the PrestaShop Addons marketplace or independent sellers. These themes are almost always based on Classic's architecture because Classic has been available far longer and represents the larger installed base.

If you are using a third-party theme, the Classic vs Hummingbird question is largely academic for your current store. Your theme's developer made the architectural decisions for you. However, when evaluating new third-party themes, check whether they are built on Classic or Hummingbird foundations. Themes built on Hummingbird will perform better and maintain compatibility longer.

Be wary of third-party themes that claim to be "based on Hummingbird" but actually just borrow its visual style while keeping Classic's jQuery-dependent architecture underneath. Check the theme's JavaScript dependencies and CSS framework to verify.

Verdict: There Is No Wrong Answer, But There Is a Better One

For new stores on PrestaShop 8.x or later, Hummingbird is the clear recommendation. It is faster, more modern, better maintained, and more future-proof. The module compatibility concern is diminishing as the ecosystem catches up, and starting fresh means you do not have legacy migration costs.

For existing stores running Classic with significant customizations, the decision requires a cost-benefit analysis. Calculate the migration effort honestly, measure your current performance to understand the potential gain, and decide whether the improvement justifies the investment. Sometimes the answer is yes, sometimes it is not, and sometimes the right answer is to wait for your next major redesign to switch.

Regardless of which theme you choose, the principles of good front-end performance apply equally: minimize asset sizes, lazy-load below-the-fold content, optimize images, and regularly audit your page speed. A well-optimized Classic store will outperform a poorly configured Hummingbird store every time. The theme provides the foundation, but execution determines the result.

For more details, read our guides: Child Themes in PrestaShop: Why You Should Never Edit the Parent Theme and How to Choose the Right PrestaShop Theme for Your Business.