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.

To get started with environment branches:

1. On your local workstation, change to your Cloud project directory.

2. Switch to the Magento file system owner.

3. Log in to your Magento project.

   1
   magento-cloud login
   

4. List your projects.

   1
   magento-cloud project:list
   

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

   1
   magento-cloud environment:list
   

   It is important to use the magento-cloud environment:list command because it displays environment hierarchies, whereas the git branch command does not.

6. Fetch origin branches to get the latest code.

   1
   git fetch origin
   

7. Checkout, or switch to, a specific branch and environment.

   1
   magento-cloud environment:checkout <environment-ID>
   

   Git commands only checkout the Git branch. The magento-cloud checkout command checks out the branch and switches to the active environment.

   You can create a new environment branch using the magento-cloud environment:branch <environment-name> <parent-environment-ID> command syntax. It may take some additional time to create and activate a new environment branch.

8. Use the environment ID to pull any updated code to your local. This is not necessary if the environment branch is new.

   1
   git pull origin <environment-ID>
   

9. (Optional) 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:

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

   1
   git push origin <branch name>
   

6. Log in to the Magento Admin.

7. Click Content > Design > Themes.

   The theme displays in the right pane.