Ecommerce Templates > General Help > Design help

Design help for Ecommerce Templates

The great thing about working from templates is the simplicity of setting up the design of your store to reflect your products and needs. The hard work of preparing the layout of the store is already done for you - from there you can change color schemes, add your own graphics and modify the existing ones.

All the templates come with .png files. These can be edited in Fireworks- they have a 30 day free trial available if you don't already have the program.

Graphics and sections which are repeated on many pages are usually set up as include pages or form part of the Dreamweaver .dwt file or library items.

Below we've added some help for designing your store and you can find more detailed information in our User Manual here.

Using Fireworks

You don't have to own a copy of Fireworks to work with our templates but it does make graphic editing simpler. The .png files are usually found in the extras folder.

Editing text
File>Open and browse to the image you need to edit
Click on the text tool the icon is an "A"
Place your cursor on the text and type your wording
Export your graphic by going to File>Export Preview and choosing the format (usually as a GIF)
You can change the color of the text by choosing the select tool (the white arrow), clicking on the graphic and selecting the color from the properties window. You can also change the font by selecting from the drop down list in the same window. If you need to change the background color choose Modify>Canvas>Canvas Color.
Effects such as drop shadow, bevel etc. can be added by clicking on the plus sign next the word "effect" in the properties window and selecting the options until you get the look that best suits your needs.

Editing graphic colors
Most of the templates have small rounded corner graphics, menu tops or bottoms etc. which are easily changed. These usually consist of a background color which can be changed as above and a rounded image which is modified by selecting it and changing the color in the properties window

NB There are quite a few windows available in Fireworks, probably the most important being the tools and properties - if you don't see these, select them from the "window" menu at the top of the screen.

Dreamweaver Issues

To change the background colors in Dreamweaver click in the cell in design view and then select the color from the Properties Window.

NB It's very important to define your site before modifying the Dreamweaver templates and to make global changes through the template file, usually called Main.dwt. For more information take a look at our page Using Dreamweaver.

Cascading Style Sheets (CSS)

Most of the templates use CSS to govern the font and link properties - this means that by editing one file you can get a uniform look across the whole of your site - we've added detailed information here.

If you haven't found what you are looking for here, please get in touch with us through our support forum.