What Module In Opencart Do I Need To Edit Colors On Template

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 accept some coding knowledge and know how to customize their design now accept a much easier way to do that.

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

In this postal service, we volition show you lot 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.

OpenCart 3.0 Theme Editor

First of all, it'due south important to note that the OpenCart 3.0 Theme Editor uses Twig as a template engine for PHP.

This ways that the Theme Editor gives you lot control over the HTML elements in your templates. This does not include the modification of styles and CSS.

You can learn almost Twig in the documentation here.

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

Choose your shop

Y'all can select the store you lot 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 desire to edit the home folio, select common, and then habitation.twig.

Theme History

Every bit the proper noun suggests, this is where all the changes y'all've made are logged so you tin can easily access them and revert or keep with the changes to your OpenCart template.

How to Edit a Template

Allow's say we want to alter one of the templates in our OpenCart site. We'll leave the store to Default and cull the product template.

Product Template

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

We'll choose the production.twig file and then we can edit the Product pages in our OpenCart shop.

Theme Editor Twig

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

This is the lawmaking sample we volition exist using:

<li><a href="{{ breadcrumb.href }}" {{ loop.last ? 'fashion="colour: cerise;"' }}>{{ breadcrumb.text }}</a></li>

Paste the sample on line 5:

html

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

Enter any production page and yous will notice that the breadcrumb link is now colored reddish:

OpenCart 3.0 Default Theme

If you want the colour to be different, only modify red in the code sample with the colour you prefer. You lot can change this depending on the colour scheme yous are using for your store design, and then information technology matches its environment better.

Summary

This was a cursory overview of the new Theme Editor in OpenCart three.0, simply you can go an idea of how easy information technology is to play around with the pattern 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 direct 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!