Quick start

Create your own custom theme in 5 minutes by cloning Hummingbird, the default PrestaShop theme, and using it as a starting point.

Hummingbird’s compatibility is strictly tied to specific PrestaShop releases. To find the correct theme version for your store, please refer to the compatibility matrix on the Hummingbird repository.

Clone Hummingbird as a base

Replace mytheme with your theme name:

git clone https://github.com/PrestaShop/hummingbird.git mytheme
cd mytheme
rm -rf .git && git init   # Remove Hummingbird's history and start your own

Configure your theme

Edit config/theme.yml:

name: mytheme          # Must match the directory name
display_name: My Theme
version: 1.0.0
author:
  name: "Your Name"
  email: "[email protected]"   # Optional
  url: "https://example.com" # Optional

meta:
  compatibility:
    from: 9.1.0
    to: ~9.1.0
    framework: bootstrap-v5.3.3  # Informational, not parsed by PrestaShop

Install dependencies and build

From your theme’s root directory, install dependencies and compile the source files into production-ready assets:

npm ci
npm run build

Activate the theme

The recommended method to install your theme is through the Back Office to ensure all installation processes are handled correctly:

  1. In the Back Office, go to Design > Theme & Logo.
  2. Click on Add new theme and upload your theme as a .zip file.
  3. Once uploaded, select your theme and click Use this theme.

Alternatively, you can manually place your extracted theme folder in the /themes/ directory of your PrestaShop installation and then activate it from the Back Office. However, the .zip upload method is preferred for future-proofing.

See Exporting your theme for how to create a distributable ZIP file.

Start developing

npm run watch

This watches for file changes and recompiles assets automatically. Edit SCSS files in src/scss/, JavaScript in src/js/, and templates in templates/.