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 - blank and luma - can be found as Composer-installed packages (in vendor/magento/theme-*), 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 register it:

• registration.php tells Magento the theme exists and is similar to the same file in a module.
• theme.xml defines 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.

Tips:

• The first parameter of the register call in registration.php is a different type than modules use.
• The second parameter of the register call is in the format frontend/{vendor}/{theme}.
• The <parent> node in module.xml does 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

Run 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 app/etc/config.php or env.php to 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 SwiftOtter/professional path.

SEE THE CODE