# How to customize cubecart templates: Before and After Example



## Rodney (Nov 3, 2004)

Just thought I'd show a quick example of the customization abilities of cubecart.

You can take it from a stock/default installation, to looking completely customized by just editing a few HTML templates.

There's been a few threads here about "plugging in a shopping cart into your existing site" so it looks the same as your site layout. Here's a concrete example 

*Here's Before (click to enlarge):*


* Here's After (click to enlarge):*


----------



## AndyC (Jul 20, 2007)

I am going to do this but which templates do you edit?


----------



## Dave G (Aug 7, 2006)

Sweet! That's what I'll need to do.


----------



## Rodney (Nov 3, 2004)

AndyC said:


> I am going to do this but which templates do you edit?


I started with the Killer skin (I think) and I followed the instructions here: How can I completely change the look of CubeCart v3? - Powered By Kayako eSupport

The first template I edited was this one:

SkinNam/styleTemplates/global/index.tpl

the index.tpl template covers the main look and feel for the site and product pages. You can basically add your own header and footer to that page to give your store a custom look.


Then I edited the:

SkinName/styleTemplates/global/cart.tpl

The cart.tpl template allows you to customize the shopping cart page to look how you want it.

Then I edit the: SkinName/styleSheets/*

The .css files in that directory will help you edit the background colors, links, etc.

Then you can sort of look at your page and see what areas you want to change. Then just look in the styleTemplates folder and find the template that fits the area you want to edit.

Some of it is trial and error, since it's only HTML, it's pretty easy to find what part changes what.


----------



## AndyC (Jul 20, 2007)

Thanks for the info, Rodney. I appreciate it.


----------

