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.

Published: Dec 23, 2018. Updated: September 10, 2020.


Magento 2 Maintenance

Magento 2 Maintenance

As a store owner you will need to block the access temporary for Customers in order to update CMS Page, Products or Updating Configuration. This is how you can do it.

Read

Magento 2 Mode

The Magento 2 store can run in different modes, depending on the environment, that can increase speed load.

Read

Magento 2 API

Magento 2 API tutorial for setting up authentication, Authentication types and URLs that can be used.

Read

Magento 2 Cache

Magento 2 Cache tutorial on different usage scenarios and why Cache should be enabled on your store.

Read
Magento 2 Google Analytics

Magento 2 Google Analytics

Magento 2 Google Analytics setup for a smooth integration between tracking in GA and your store.

Read
Magento 2 Cron

Magento 2 Cron

Magento 2 Cron tutorial on how to to configure and what is Cron needed for.

Read
Contact
Hire us


Need help with Magento 2 Theme ?


Tech

Technologies we work with

Magento is an open-source e-commerce platform written in PHP
PHP is a popular general-purpose scripting language that is especially suited to web development.
MySQL is an open-source relational database management system.
Redis is an in-memory data structure project implementing a distributed, in-memory key-value database with optional durability.
Varnish is an HTTP accelerator designed for content-heavy dynamic web sites as well as APIs.
Google Tag Manager is a free tool that allows you manage and deploy marketing tags on your website / app
Google Analytics is a web analytics service offered by Google that tracks and reports website traffic
Elasticsearch is a search engine based on the Lucene library.