How to Build eCommerce Templates
E-commerce templates are created by Web designers, who usually sell their templates to people looking to start an e-commerce site, but who do not have the skills or the time to design the site themselves. To create your own e-commerce Web templates, you will need some working knowledge in HTML and CSS (see Resources below).
Other People Are Reading
Instructions
-
-
1
Decide on a niche for your e-commerce template to target. Draw a diagram of your template on paper. Divide your template into four sections. Label the the sections as "Heading," "Content and Menu," "Alternative Navigation" and "Footer."
-
2
Plan your content for each section. Create a generic company logo and slogan for the "Heading Section," and sample text for the "Content and Menu" section. Create sample page names, such as "Contact," "Products" and "Sales" in the "Content and Menu" section for site navigation.
-
-
3
Write the page names in the "Alternative Navigation" section if you would like a navigation section of purely text to be available. Use the footer for copyright information, contact information -- and any other information you wish to supply with your template.
-
4
Paste this code into your text editor (for example; Notepad):
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="div1">
<div id="div1-left">Place a sample company name here (or an image).</div>
<div id="div1-right">Place a sample site slogan here.</div>
</div>
<div id="div2">
<div id="div2-left">Place sample text content here. </div>
<div id="div2-right">Place your sample page names here for your menu.</div>
</div>
<div id="div3">
<div id="div3-left">Place copyright information here.</div>
<div id="div3-middle">Place a text only site map here.</div>
<div id="div3-right">Place sample contact information here.</div>
</div>
<div id="div4">Place information on how to contact you here (should anyone want you to create a template for them.)</div>
</body>
</html>
-
5
Customize your template by adding images. Optimize your images by loading them into an image editor and resizing them so that they are as close to 72 dpi as possible. Save as a JPEG for photographs, or a GIF for site logos and emblems.
-
6
Tweak your template until you are satisfied with its appearance. Ensure that all files used in your template are in the same folder. Rename the folder to represent your template, then compress the folder (right-click the folder and choose "Compress" or "Send To... / Compressed Folder," depending on which version of Windows you are using. For Mac OS X 10.4 and up, right-click (or "Control-Click") on the folder, then click "Create Archive of 'File Name'."
-
1
Tips & Warnings
Make sure you know how to add images to a HTML document -- and how
to create links.
The point of a template is to visually appeal to those who own e-commerce sites, while staying generic enough so that they can easily customize the template to fit the needs of their niche.
Use caution when using images you do not own the rights to.
Make sure you have permission to use content not owned by you.
