Magento 2 Theme

Magento 2 Theme Tutorial, what is a theme and how can it be installed, configured or uninstalled in your store

First of all what exactly is a “Theme” and what is its purpose ? Wikipedia Theme as this definition:

“A theme is a preset package containing graphical appearance details. A theme usually comprises a set of shapes and colors for the graphical control elements, the window decoration and the window. Themes are used to customize the look and feel of a piece of computer software or of an operating system.”

Theme Install #

How to install a Magento 2 Theme

Theme Install Manually #

The theme is packaged under a wwwroot directory that is the vendor name and under the vendor directory there is the theme directory so: VendorName/theme.

Copy this directory to the /app/design/frontend directory

Theme Install Composer #

Enter the following commands in the console:

composer require <component-name>:<version> --no-update

Example:

composer require vendorname-theme:1.0.0 --no-update

Then to have Composer pull the theme from marketplace execute:

composer update

Themes installed through Composer are placed in the vendor/ directory.

Theme Install as an extension #

If the theme is available as a extension package then you can use the install guide from here Extension Install

#``# Apply Theme After you Install the the theme by using steps above you have to use the admin backend to set the new theme as the default theme. To do this you:

  1. Login into the backend and navigate to CONTENT > Design > Configuration

  2. Based on your store view, click Edit.

  3. The Default Theme tab select in the Applied Theme drop-down the new theme.

  4. Click Save Configuration.

  5. If caching is enabled, clear the cache.

You should now reload the frontend and the new theme will be applied.

Theme Exception #

Theme exceptions allow you to set diferent themes for your Magento store based on user-agents. What is a user-agent you may ask to quote Wikipedia User agent definition:

“the Hypertext Transfer Protocol (HTTP) identifies the client software originating the request, using a user-agent header, even when the client is not operated by a user.”

In short you can specify a diferent theme for a Chrome user then a Safari user for example.

To add a such design exception you must:

  1. Login into the backend and navigate to CONTENT > Design > Configuration

  2. Based on your store view, click Edit.

  3. Click on the Design Rule tab Add New User Agent Rule.

  4. Specify the user-agent in the Search String box.

  5. Select the theme in the Theme Name drop-down list to be used for matching agent.

  6. Click Save Configuration or Save and Continue.

Theme Uninstall #

How to uninstall a Magento 2 Theme

Theme Development #

If you require a Custom Theme to be developed you can contact us, we offer Magento Theme development inline with all quality requirements for a Magento 2 Theme.

Need help with Magento 2 Theme ?