The recommended way to create a new PrestaShop 9 theme is to start from Hummingbird. This gives you a complete, production-ready foundation with modern architecture, accessibility compliance, and a structured codebase.
This workflow assumes you have a local PrestaShop development instance running. Run the following from the /themes/ directory of that installation:
git clone https://github.com/PrestaShop/hummingbird.git mytheme
cd mytheme
rm -rf .git && git init # Detach from Hummingbird's history and start your own
git add -A && git commit -m "Initial commit from Hummingbird"
rm -rf .git permanently discards the full Hummingbird commit history. This is the right choice when you want a clean project history. If you want to keep the ability to pull future Hummingbird changes (e.g., bug fixes), set a new remote instead: git remote set-url origin <your-repo-url>.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
See Requirements for the required Node and npm versions.
npm ci # Installs exact versions from the lockfile. Use this instead of npm install for reproducible builds
npm run build
During development, use npm run watch instead to recompile automatically on every file save.
See Activate the theme in the quick start guide for activation instructions. Since the theme is already inside your PrestaShop /themes/ directory, you can skip the zip upload step and activate directly from the Back Office.
Before customizing, take time to assess what your design actually requires. Many changes can be achieved by overriding Bootstrap variables or restyling existing components, no new code needed. Custom components should only come when the existing system genuinely cannot cover your need. See CSS conventions for the full structure.
data-ps-* attributes for behavior hooks. Listen to PrestaShop events for dynamic updates. See JavaScript conventions.modules/. See Overrides.