How to easily edit your Zencart template

In this post I will show you how to use the 3 most powerful tools to tweak and edit your Zencart! Please note that I make some foolish assumptions here: I assume you know a bit about php and are familiar with HTML and CSS.

First, if you have never used Firefox, it’s time to get the fox
Once you have Firefox installed on your computer, you can now grab the bug

I will take our site as an example because it is using Zencart. Say I want to edit the Contact us button you see on the banner of our homepage.

Step 1 – Inspect

Right click on the element you want to check and then choose Inspect Element from the menu

Firebug will show you the code of this element as well as the css rules are currently applied to this element (along with the file name of the css file and the line number in the file)

Say if you want to change the margin-left value here to can easily edit the particular CSS file. Please note that RubikIntegration’s site is currently using CJ Loader which automatically combines all the css files into 1 file to speed up the load speed. So in my case I have to dig a bit deeper to find out the specific file where the css rule for the link with the id “buttonContactNow” is defined, but at least now I know what I have to search.

Step 2 – Utilize the power of Zencart’s Developers Toolkit

Now lets say I dont want to add the class “myButtons” to this link, I will need to find out which file (and which line of code) generates this line, and here Zencart’s Developers’ Toolkit will come to the rescue

In this case, you can choose to search only the “catalog files” which control the layout of the frontend, but in this case I will try to search in admin as well.

Zencart will quickly show the result

That’s it. Simple and Fast. You can easily edit your template files and make minor changes conveniently thanks to the power for Firefox + Firebug + Zencart Developers Toolkit. If you have any tips you want to share please feel free to post here. All questions are also welcome.