Custom theme
You can install one or multiple themes to use for one or all of your stores and sites in your project. Themes include multiple static files including images, fonts, CSS, JavaScript, PHP, and more to fully design your stores. You can add the theme by either extracting its code to the file system or using Composer.
Install a theme manually
To install a theme manually, you must have the theme’s code in a compressed archive or in a directory structure similar to the following:
<VendorName>
├── composer.json
├── etc
│ └── view.xml
├── media
├── registration.php
├── theme.xml
└── web
├── css
│ └── source
├── fonts
├── images
└── js
To install a theme manually:
-
Copy the theme’s code under
<Project root dir>/app/design/frontendfor a storefront theme or<Project root dir>/app/design/adminhtmlfor an Admin theme. Verify that the top-level directory is<VendorName>; otherwise, the theme does not install properly.code language-bash cp -r ExampleTheme <project-root>/app/design/frontend -
Confirm the theme copied to the correct place.
- Storefront theme:
ls <project-root>/app/design/frontend - Admin theme:
ls <project-root>/app/design/adminhtml
A sample follows:
ExampleTheme Adobe Commerce
- Storefront theme:
-
Add and commit files.
code language-bash git add -A && git commit -m "Add theme" -
Push the files to your branch.
code language-bash git push origin <branch name> -
Wait for deployment to complete.
-
Log in to the Admin.
-
Click Content > Design > Themes.
The theme displays in the right pane.
Install a theme using Composer
Installing a theme using Composer is the same as installing any other extension using Composer. See Install, manage, and upgrade modules for details.
To install a theme using Composer:
-
Purchase the theme from Commerce Marketplace.
-
Get the theme’s Composer name.
-
Change to your Adobe Commerce root directory and enter the command:
code language-bash composer require <vendor>/<name>:<version>For example,
code language-bash composer require zero1/theme-fashionista-theme:1.0.0 -
Wait for dependencies to update.
-
Enter the following commands:
code language-bash git add -A && git commit -m "Add theme"code language-bash git push origin <branch name> -
Log in to the Admin.
-
Click Content > Design > Themes.
The theme displays in the right pane.
Multiple themes
When using multiple themes, such as different themes per locale, review the SCD_MATRIX environment variable for customizing theme deployment. See the build or deploy stages in the environment configuration.