Post by » Thu Oct 04, 2018 4:05 am


I'm a newbie to Open Cart so please have patience...

Please note: I do not have a live site where I'm actually selling products. I'm working on a "fake" site for my portfolio and work is still in progress so disregard formatting, etc. for now.

I've researched several ways to customize Open Cart but there is so much information out there my head is spinning.

Just changing the background color and font size isn't enough for me, yet I don't know php so don't know how advanced I'm capable of going.

What I ended up with is experimenting around with the Theme Editor > common > home.twig, code shown below:

  • Is this how you edit this template - just stick your own html into the code? Because I'm not familiar with php, I'm not sure where to place it. Have I done it correctly or how should I approach this? In browser it looks fine. It is placed directly underneath the slideshow.
  • I have located the stylesheet in catalog > view > theme >stylesheet and have been successful at making the changes I want except that every now and then I have to clear my browser cache and the theme cache in order for changes to show.
  • When I cleared the theme cache all changes to home.twig that I made were gone and had to start over. Is there a way to prevent this?
  • I was looking at a tutorial that was talking about .tpl pages such as home.tpl but I only see .twig files? Are .tpl files something from the past?

{{ header }}
<div id="common-home" class="container">
<div class="row">{{ column_left }}
{% if column_left and column_right %}
{% set class = 'col-sm-6' %}
{% elseif column_left or column_right %}
{% set class = 'col-sm-9' %}
{% else %}
{% set class = 'col-sm-12' %}
{% endif %}
<div id="content" class="{{ class }}">
{{ content_top }}


Code: Select all

<h4 class="homeIntro">Burch &amp; Gottfried is the UK's go-to source for the hottest trends and styles in accessories. We are now expanding into the United States and continuing our legendary heritage.</h4>
 <h3 class="homeQuickShop">Quick Shop These Popular Categories!<br></h3>
      <div class="mainCatImage">  
         <a href=";path=68&quot;" target="_blank" >
<img src=""></a>
 <a href="http://;path=64" target="_blank" ><img src="" ></a>
<a href="http://;path=65" target="_blank" ><img src="" ></a>
<a href=";path=59" target="_blank"><img src="" ></a><figcaption>Accessories</figcaption>

{{ content_bottom }}
{{ column_right }}
{{ footer }}


Sun Aug 19, 2018 2:25 am

Post by cyclops12 » Sun Oct 07, 2018 9:31 pm

Hi, there are a few ways of changing the appearance of your opencart store.
If you want to edit the theme files yourself then i would suggest Creating a new theme and editing those files.
Otherwise you could install VQmod along with VQmod Manger and make changes using vqmods.
You cannot make changes to css files using vqmod though.
Viethemes has a great Theme Editor if you want to purchase an extension to help you out.

Active Member


Sun Sep 27, 2015 1:10 am

Post by Johnathan » Sun Oct 07, 2018 10:43 pm

1. Yes, .tpl files were from previous OpenCart versions. OpenCart 3.0 uses .twig now, which uses Twig syntax instead of the normal HTML/PHP syntax in .tpl files.

2. If you're planning on installing extensions at any point, I would recommend not using the Theme Editor in OpenCart 3.0. If you do that, then it won't allow you to use any ocMod files, because the two systems don't work together. Many extensions use ocMod, so you end up having to remove your edits or hard-code all ocMod content using the Theme Editor, which is pain.

3. When doing development and testing, I generally turn off the Twig caching. You can do that (and refresh the cache) in the main admin dashboard, using the gear icon in the upper-right.

4. If you just need to add content to an existing page, a better way to do that is using an HTML module. You can find that in Extensions > Modules. Then, once you've created it, you can apply it to the relevant layout in Design > Layouts.

Image Image Image Image

User avatar
Global Moderator


Fri Dec 18, 2009 3:08 am

Post by IP_CAM » Mon Oct 08, 2018 4:13 am

Not very funny, but one could use this Extension, to edit Source instead. ;)
CodeManager - Web-based IDE framework for OpenCart ... n_id=17423

I am no longer active at the OC Forum, to reach me, contact:
My latest free Opencart LIGHT Source is available on demand:
900+ FREE OC Extension-Repositories - from OC v.1.5.x up, on the
world's largest OC-related Github Site:

User avatar
Legendary Member


Tue Mar 04, 2014 1:37 am
Location - Switzerland

Post by » Sat Oct 13, 2018 4:24 am

Do appreciate your excellent feedback regarding the many questions I had...feel that most of my questions have been answered to the point where I feel the best route for now is to create the HTML content module and then place these modules in the page.

Problems I'm having with this:
1) Word wrap? Am creating code in Sublime, then copy/paste into the HTML content editor in code view. There is no word wrap that I can see and this makes it difficult to see the code.
2) Styling code? is inline the only way to style code here? I would like to be able to use a stylesheet but don't know how to do this for content editor.
3) What about responsiveness? If I can't use a stylesheet, how will I make it work in various devices? Or is this already taken care of somehow?

Thank-you again for your help....appreciate the work you do in this forum....


Sun Aug 19, 2018 2:25 am
Who is online

Users browsing this forum: No registered users and 4 guests