Install a 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 by extracting its code to the Magento file system or using Composer.

Get started with a branch

We recommend using a branch for adding, configuring, and testing your theme.

1. Log in to your local development system, or switch to, the Magento file system owner.
2. Change to a directory to which the Magento file system owner has write access.

3. Enter the following command in a terminal to log in to your project:

   1
   magento-cloud login
   

4. List your projects. With the project ID, you can complete additional commands.

   1
   magento-cloud project:list
   

5. If necessary, clone the project to your local. You should have cloned when setting up your local development workspace.

   1
   magento-cloud project:get <project ID>
   

6. Change to a project directory. For example, cd /var/www/html/magento2

7. List environments in the project. Every environment includes an active Git branch of your code, database, environment variables, configurations, and services.

   1
   magento-cloud environment:list
   

   magento-cloud environment:list—displays environment hierarchies whereas the git branch command does not.

8. Fetch origin branches to get the latest code:

   1
   git fetch origin
   

9. Check out, or switch to, a specific branch and environment. Git commands only checkout the Git branch. The Magento Cloud command also switches to the active environment.

   1
   magento-cloud environment:checkout <environment ID>
   

   To create a new environment, use magento-cloud environment:branch <environment name> <parent environment ID>

10. Pull any updated code to your local for the environment ID (which is the Git branch):

    1
    git pull origin <environment ID>
    

11. Create a snapshot of the environment as a backup:

    1
    magento-cloud snapshot:create -e <environment ID>
    

Install a theme manually

To install a theme manually, you must have the theme’s code, either in a compressed archive or in a directory structure similar to the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
<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 <Magento root dir>/app/design/frontend for a storefront theme or <Magento root dir>/app/design/adminhtml for an Admin theme. Verify that the top-level directory is <VendorName>; otherwise, the theme will not install properly.

   For example:

   1
   cp -r ExampleTheme <Magento root dir>/app/design/frontend
   

2. Confirm the theme copied to the correct place.

   • Storefront theme: ls <Magento root dir>/app/design/frontend
   • Admin theme: ls <Magento root dir>/app/design/adminhtml

   A sample follows:

   1
   ExampleTheme Magento
   

3. Add and commit files:

   1
   git add -A && git commit -m "Add theme"
   

4. Push the files to your branch:

   1
   git push origin <branch name>
   

5. Wait for deployment to complete.
6. Log in to the Magento 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 summarize the procedure:

1. Purchase the theme from Magento Marketplace.
2. Get the theme’s Composer name.

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

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

   For example,

   1
   composer require zero1/theme-fashionista-theme:1.0.0
   

4. Wait for dependencies to update.

5. Enter the following commands:

   1
   2
   git add -A && git commit -m "Add theme"
   git push origin <branch name>
   

6. Log in to the Magento Admin.

7. Click Content > Design > Themes.

   The theme displays in the right pane.