DocumentationCommerceCommerce on Cloud Infrastructure Guide

Custom theme

Last update: Thu Apr 27 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • Admin
  • Developer

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:

  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.

    code language-bash 
    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.

    code language-bash 
    git add -A && git commit -m "Add theme"

  4. Push the files to your branch.

    code language-bash 
    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:

    code language-bash 
    composer require <vendor>/<name>:<version>

    For example,

    code language-bash 
    composer require zero1/theme-fashionista-theme:1.0.0

  4. Wait for dependencies to update.

  5. Enter the following commands:

    code language-bash 
    git add -A && git commit -m "Add theme"
    code language-bash 
    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.

05f2f56e-ac5d-4931-8cdb-764e60e16f26