Choosing a suitable theme for a Magento store is an essential step towards a pleasing shopping experience for customers. The theme is a set of templates; JavaScript, CSS, and other files that define a store’s interface. A nice theme is elaborated with the best possible UX in mind; it is also SEO-optimized and reflects the latest design trends.
Online store owners often want to go beyond the standard Magento design. In this case, they can buy a new theme on a marketplace or create it themselves. In this beginners guide I’ll explain how to install a theme on Magento.
The Types of Magento Themes
Before we start with the installation process, let’s see what you can choose from when it comes to Magento themes.
- A default theme. In actual fact, there are two default themes available for every Magento store. But if you want a unique look and feel, as well as better usability and new features for desktops and smartphones, you can choose another path.
- A ready-made theme. You can upload a theme for Magento from third-party vendors. Themeforest, Envato Elements, and others offer plenty of themes for various eCommerce sectors. Firstly, these options cost many times less than custom-made ones. Secondly, they’re still customizable. But there is one potential pitfall: buying a theme doesn’t guarantee its stable operation. You may encounter errors related to the theme’s incompatibility with some modules. It may entail the loss of functionality applied previously.Furthermore, the theme can get outdated in relation to whatever Magento version you’re running, and some features will no longer be relevant. However, there are updatable themes on the market as well.
- A custom theme. A full-service Magento development agency can attend to all the client’s individual requirements and analytics on customers’ behavior. Obviously, an exclusive theme will be the most efficient choice. On the other hand, it takes hundreds of hours of designers’ and developers’ work that can be costly for some businesses.
Magento Theme “Inheritance”
Ready-made and custom themes are based on the default Magento themes: a concept called theme inheritance (much like WordPress child themes, if you’re familiar with that). And the best thing about Magento is that its open-source nature that means every part of the CMS is fully customizable, including its design.
Once you’ve purchased or developed a theme, you can further modify it at any point. This is usually done by creating a new theme, which inherits the existing one, and making changes. In this way you don’t lose the original theme and you’re free to experiment and vividly express the brand personality.
Magento Themes: the Setup Process
Let’s now look at the installation of a theme on Magento 2.4, step by step.
As a rule, there is also a module (or a number of modules) along with a theme. They extend the functionality and add various configurations to control the theme.
There are two possible paths to set up a theme:
- With the help of a Composer, if this theme is available as a Composer package. The likelihood of errors with this method is reduced because the theme will be stored in a separate non-editable folder and its original kept in a remote repository.
- Manually. This option guarantees that the theme will be under complete control of the business, being a part of the store’s codebase.
Here we’ll describe the manual installation procedure.
Step 1
Magento contains the “Design” folder (app/design/) that will store the chosen theme. There you need to create the “Vendor” folder and inside it a folder with the theme’s name (e.g., “default”).
You need to create a number of service files in it. First of all, there should be a declaration file theme.xml where you mention the theme’s name and the theme from which it’s inherited if that’s the case.
This is an example of how this file should look:
<theme xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>Custom Theme</title>
<parent>Magento/luma</parent>
<media>
<preview_image>media/preview.jpg</preview_image>
</media>
</theme>
Besides this, create files view.xml (optional), composer.json (optional), and registration.php.
If you’ve purchased a theme (such as the Ecofood - Responsive Organic Store Magento 2 Theme from Envato Elements) you will be presented with this folder structure in your downloaded file, possibly within a quickstart zipped folder, so you can copy the app folder straight across:
Step 2
Now you need to copy the files. Be cautious with the directory structure you are copying: it must be <VendorName>/<theme>. Also, check whether the needed theme files are located in the right directory (<theme>).
Copy the directory to the following one: <Magento root dir>/app/design/frontend/<VendorName>/<theme>.
Then set up modules related to the theme if you have them. This is done via the command line (see the official documentation if needed): bin/magento module:enable <module_name>.
Step 3
The next stage is rebuilding Magento, again via the command line. Connect the store via SSH and go to the root directory. You’ll need to run several commands.
Firstly, upgrade the setup:
php bin/magento setup:upgrade php bin/magento setup:di:compile
Secondly, deploy the static content:
php bin/magento setup:static-content:deploy
Step 4
Finally, you should make sure the theme is registered. To do this log into the Magento Admin page, and the theme will be added to the database.
In the Admin, go to Content > Design > Themes. If you see it amongst the available ones, then it’s been successfully registered.
Choose this new theme to apply it to your store.
That’s it!
To Conclude
As you see, it’s quite straightforward to install a new theme on Magento. What’s more difficult is finding the right theme to deliver a pleasant user experience. Take a look at these Magento theme collections to see if anything fits your needs:
No comments:
Post a Comment