6.3.1: Creating a theme
6.3: Theme basics
Technical Blueprint: Make theme-specific changes to the “Order Export Details” page.
Creating the theme
Custom themes reside in the
app/design directory (or can be installed via Composer, just like modules can).
Magento's core themes -
luma - can be found as Composer-installed packages (in
for easy references for key files.
Create a theme directory at
app/design/frontend/SwiftOtter/professional. A theme needs to minimum files to define and
registration.phptells Magento the theme exists and is similar to the same file in a module.
theme.xmldefines basic information about the theme, like its name and what theme it extends.
Create these files in the root directory of the theme; use the core themes as an example.
- The first parameter of the
registration.phpis a different type than modules use.
- The second parameter of the
registercall is in the format
module.xmldoes not have the "frontend" prefix. Our theme should extend the Magento Luma theme.
Let's also copy one file forward from the Luma theme: Find
web/css/source/_theme.less and copy it into the same location
in the new theme.
Setting the theme
bin/magento setup:upgrade to allow Magento to register the new theme.
Magento Core Concept
Themes are only automatically registered in an environment in developer mode. You can lock "themes" config in
env.phpto register a theme, as an alternative to database-based registration.
In the Adobe Commerce admin, visit Content > Design > Configuration and edit the theme configuration on whatever scope you'd like to set the theme on. You should see the "SwiftOtter Professional" theme in the available options for "Applied Theme." Set this as your theme and save.
If you clear Magento's cache now and visit the site front-end, you can verify the right theme is set. While we obviously
haven't actually made any updates in our theme that would result in a different appearance from its parent (Luma), you
can inspect the static file sources in your developer tools and verify that CSS and JS files are being loaded from the