How to Customize Your Store Design with the OpenCart 3.0 Theme Editor

One of the most important and game-changing features in OpenCart 3.0 is the new Theme Editor. Customizing your default theme is finally possible straight from the Design section of your admin panel.

Not all OpenCart store owners rely on a theme for improving the design of their stores. Users who have some coding knowledge and know how to customize their design now have a much easier way to do that.

The new Theme Editor gives you direct access to the source of all your template files.

In this post, we will show you how the Theme Editor looks like and give an example of how it works by making some changes in our test setup.

Theme Editor Overview

To locate the Theme Editor, open your OpenCart admin and go to Design > Theme Editor.

Now, in this section, you will notice three main fields:

Choose your store

You can select the store you wish to customize if you’re running multiple setups from a single OpenCart installation.

Choose a template

Select the template file you wish to customize. For example, if you want to edit the home page, select common, and then home.twig.

Theme History

As the name suggests, this is where all the changes you’ve made are logged so you can easily access them and revert or continue with the changes to your OpenCart template.

How to Edit a Template

Let’s say we want to modify one of the templates in our OpenCart site. We’ll leave the store to Default and choose the product template.

The product template holds the .twig files you can see in the screenshot below.

We’ll choose the product.twig file so we can edit the Product pages in our OpenCart store.

The modification we will implement is a simple one. We will change the color of the breadcrumb link in the navigation.

This is the code sample we will be using:

<li><a href="{{ breadcrumb.href }}" {{ loop.last ? 'style="color: red;"' }}>{{ breadcrumb.text }}</a></li>

Paste the sample on line 5:

Now click the Save button and go to the storefront to view the changes.

Enter any product page and you will notice that the breadcrumb link is now colored red:

If you want the color to be different, simply change red in the code sample with the color you prefer. You can change this depending on the color scheme you are using for your store design, so it matches its surroundings better.

Summary

This was a brief overview of the new Theme Editor in OpenCart 3.0, but you can get an idea of how easy it is to play around with the design of your store now.

You no longer have to access your store files and templates via FTP and using various language editors to implement changes. Everything is performed straight from your dashboard.

We are very curious to see what you think about the new feature in OpenCart, so please share your opinion and experience in the comments below!

Meet OpenCart 3.0 Here!