Custom theme

Last update: 2023-04-27
  • Topics:
  • Cloud
    View more on this topic
  • Themes
    View more on this topic
  • Created for:
  • Admin

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:

  ├── composer.json
      ├── etc
      │   └── view.xml
      ├── media
      ├── registration.php
      ├── theme.xml
      └── web
          ├── css
          │   └── source
          ├── fonts
          ├── images
          └── js

To install a theme manually:

  1. Copy the theme’s code under <Project root dir>/app/design/frontend for a storefront theme or <Project root dir>/app/design/adminhtml for an Admin theme. Verify that the top-level directory is <VendorName>; otherwise, the theme does not install properly.

    cp -r ExampleTheme <project-root>/app/design/frontend
  2. 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

  3. Add and commit files.

    git add -A && git commit -m "Add theme"
  4. Push the files to your branch.

    git push origin <branch name>
  5. Wait for deployment to complete.

  6. Log in to the Admin.

  7. 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:

  1. Purchase the theme from Commerce Marketplace.

  2. Get the theme’s Composer name.

  3. Change to your Adobe Commerce root directory and enter the command:

    composer require <vendor>/<name>:<version>

    For example,

    composer require zero1/theme-fashionista-theme:1.0.0
  4. Wait for dependencies to update.

  5. Enter the following commands:

    git add -A && git commit -m "Add theme"
    git push origin <branch name>
  6. Log in to the Admin.

  7. 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.

On this page