OpenCart released third engine version and one of the most important and game-changing features – Theme Editor. Previous OpenCart engines had no option to edit its coding straight from the admin panel, you had to use FTP or cPanel, and those who are not familiar with the server were in uncomfortable position. But now Theme Editor gives you direct access to the source of all your template files.
In this tutorial, we will show you how the Theme Editor looks like and give an example of how it works by making some changes.
- In order to find the Theme Editor, open Admin panel, go to Design tab and choose a Theme Editor option.
[notice type=”warning”]NOTE: It’s important to say that the OpenCart 3 Theme Editor uses Twig as a template engine for PHP. This means that the Theme Editor gives you control over the HTML elements in your templates. This does not include the modification of styles and CSS. You can learn about Twig in the documentation. - Let’s proceed to Theme Editor, once you open it you can see the Choose your store and a drop down below it, here you can select the store you want to add changes to.
- Below it, you see Choose a template and here you select the file you want to edit. At the end of the list, there is a BACK button to go back to the previous folder.
- For example, we will select the featured.twig file under extension/module and change products amount displayed per row on store frontend in Featured Products section.
- Once we open the file, we can locate the following code:
If we change the Bootstrap classes: col-lg-4 col-md-4 col-sm-4 into col-lg-6 col-md-6 col-sm-6 we will get 2 products per row instead of 3.
- After changes are made, we click Save button below the code editor window and check the changes on store frontend. If you did anything wrong you just slick RESET button next to SAVE one and get the initial code before your changes were added.
This was a brief overview of the new Theme Editor in OpenCart 3, and you can play around with the design of your store now.
