image
Sidebars |
Paypal Setup |
Page Editing |
Options |
Colors |
Pictures |
Menu Editing |

image
image


[ HomePage ]
[ Allwebco Design ]
[ Allwebco Templates ]
[ Allwebco Hosting ]


Allwebco Design Corporation

[ Your Missing Page ]
[ Your Thanks Page ]
[ Paypal Thanks ]
Setting up your website template:

Step 1:
EDIT FLASH ANIMATION: | Click for more details
Open the "flash.txt" file with Notepad or any text editor and edit the text following "logo=". Edit the "Your" with the first part of your company or site name. Be sure not to delete the "logo=". Edit the text following "&logo2=". Edit the "Site Title" text with the second part of your site name. Put spaces in front of this text to separate the two logo parts. You can optionally leave either the "logo" or "logo2" line blank and use only one of the logo spaces for your site name. You may need to experiment with the flash.txt to setup the logo how you want it to look. This will update the header logo on all pages. If you wish to use a graphic logo, there are instructions later in this document.

HEADER IMAGE: You can optionally replace the small image in the top corner with your own .jpg graphic. Simply replace the "flash-icon.jpg" that you will find in the "picts" folder. Do not save this .jpg as a progressive image, save this as a standard .jpg.

Step 2:
EDIT FOOTER: | Click for more details
Open the "footer.js" in Notepad or any text editor. Edit the "Your Site Title" about in the middle of this file with your website or company name. Edit all ".js" files with a text editor.

Step 3:
EDIT CONTACT E-MAILS: | Click for more details | Variable help
Open the "contact.js" file in Notepad or any text editor and change the e-mail address in 8 total areas with your e-mails. Or you can turn off any e-mails you are not using in the "contact.js". This will update contact info on the contact page. Be sure to test these e-mail links.

Step 4:
EDIT SIDEBARS: | Click for more details
Open the "sidebar-left.js" or "sidebar-right.js" in Notepad or any text editor, and edit the text and links with your own text. You will also find some options at the top of these files for showing images. Editing these 2 sidebar files will update all the pages at one time. You may want to review the Advanced users .js editing support page. This page is helpful if you are adding items to a .js file.

SIDEBAR VIEW CART BUTTON:
Edit the "sidebar-left.js" and change the "paypal@your-web-domain.com" after the "var paypal_email" to your Paypal e-mail. For the other Paypal forms see the info later in this document.

Step 5:
EDIT PAGES: | Software choices | Notepad Editing
Change the text on all pages to match your information. You can use a text editor like Notepad, Frontpage, Dreamweaver or any wysiwyg editor. Take care not to delete any of the HTML tags that surround the text. You will find notes inside each page to help you navigate. NOTE: You will not see the footer and header in some software because they are .js include files so you can globally edit the footer and menu. See the next step for editing the product details pages.

Step 6:
SETUP THE PRODUCT IMAGES & PAGES: | Click for more details | Thumbnail Help
The best way to setup the pictures for the products is not to actually edit the HTML pages and change the pictures on each individual page. The fastest way is to simply replace the pictures in the "products" folder with your own by overwriting the files that are in there now and using the same generic names. Product thumbnails named "product?-1?.jpg" in the "products" folder are 130 x 86 pixels in size. Product large page images named "Fproduct?-?.jpg" are 400 x 266 pixels. You can make these images larger but it is not recommended that you go more than 500 pixels in width.

EXAMPLE: SETUP PRODUCT 1-1: In the "products" folder replace the "product1-1.jpg" with a 130 x 86 thumbnail image of your first product. Replace the "Fproduct1-1.jpg" with a 400 x 266 image of the same product. Now edit the "product1-1.htm" in the "products" folder with your product details. Then go to the next step on this page to setup the Paypal form. Now open the "store-1.htm" and check the first product on the page to see that it is setup. Your first product will be setup and you can proceed to product 1-2.

Step 7:
EDIT THE PAYPAL CART: | Click for more details
To setup the Paypal cart you will edit all "product?-?.htm" HTML pages in the products folder you are using, the "sidebar-left.js" and the "menu_horz.js".
STEP 1: Set up a paypal merchant account. You will be editing template files with your Paypal e-mail.

STEP 2: EXAMPLE: Edit the Paypal form for the first product page. Edit the "product1-1.htm" in the "products" folder. Find this note "START PAYPAL FORM 1-1". Edit, or remove, six items:

A. Replace "paypal@your-web-domain.com" with your Paypal e-mail.
B. Edit the item_name "Product 1-1".
C. Edit the amount "39.99".
D. Edit or remove the "OPTIONS AREA".
E. Edit or remove the "SHIPPING OPTIONS".
F. Edit the return after payment page, replace "your-web-domain.com" with your domain.

For more help with this editing see this support page.

STEP 3: While still editing the "product1-1.htm", edit or delete the "START OPTIONS AREA" with any options you require. If you require no options delete the code between the "START OPTIONS AREA" notes. If you need an option that will change the item price see this support page. Do the same for the shipping options.

STEP 4: In the "sidebar-left.js" edit the "paypal@your-web-domain.com" (near the top) with your Paypal e-mail. This will update the 1st view cart button.

STEP 5: In the "menu_horz.js" edit the "paypal@your-web-domain.com" (near the top) with your Paypal e-mail. This will update the 2nd view cart button.

STEP 6: Open the "store-1.htm" and test the first product by making a test order. Also test both view cart buttons on this page.

STEP 7: Go to the next product page, "product1-2.htm" and setup the forms as shown in the steps above.



Step 8:
EDIT TITLES, DESCRIPTIONS AND KEYWORDS: | Click for more details
Open each of the pages and change the titles (at the very top of the page) and also the description and the keywords to match your product or service. You can edit one page and copy and paste to the other pages. Be careful to only change what's inside the "" so you don't disturb the html code. Page titles are important so your site will get a good listing at Google or MSN and other search engines.

Step 9:
UPLOAD: | Click for more details
Upload the pages on to your hosting company's server using ftp software or Windows Explorer or your control panel. Be sure to upload the "picts" and "products" folders and all files in these folders.



Options:

USING A GRAPHIC LOGO:
You can replace the Flash logo with a graphic logo. To do this, delete or rename the "header.js", then rename the "graphic_logo_header.js" to "header.js". In the picts folder you will find a graphic called "logo.jpg". Edit this graphic with your logo. You can make this image higher than 50 pixels but it is not recommended that you exceed 500 pixels in width.

THE header-products.htm PAGE
This page is used as the header for all product pages in the "products" folder. Do not edit this page. The "Back" link for the product pages is inside this file.

SITE MAP PAGE:
The "site_map.htm" is linked from the index.html. It is best not to remove this link so search engines can find your site map and properly list all your pages when users search at major search engines.

FONTS: | Click for more details
You can change your font colors and sizes by editing the "coolstyle.css" with a text editor. You can find other font colors by clicking here. You can also change the font sizes in the "coolstyle.css" file. Change the "TABLE" px size to change the copy on all pages. Change the "title" px size to change all the title sizes.

CHANGING / ADDING TO THE MENU: | Click for more details
You can change the name of the menu links like "about us" or "contact" to other names by editing the "menu.js" or the "menu_horz.js" in Notepad or any plain text editor. You will generally not change the name with the ".htm" after it, only the link name area. Edits you make in the menus will update every page on the website. You can add more pages by copying one link in the menu.js and pasting it right below itself. Be sure to back up your files before you edit them. The "footer.js" also includes links you can edit and links can also be added to either sidebar .js file.

You can also edit links in the "footer_products.js" in the "products" folder.

PICTURES: | Click for more details
You can replace all the template pictures with your own. You will find all pictures in the "picts" and "products" folders. Images are named according to the page they are on. To see what size an image is in Windows you can hover your mouse over the image for the info or select the image to see image information.

ADDING PAGES: | Click for more details | Add a gallery (store page)
You can add pages to your website by copying and pasting any one of the pages and renaming it to whatever you need. You can then add links from the other pages or even add the page to the menu by opening the menu.js and copying and pasting one of the links below another. There are notes in the "menu.js" to help you add a link.

ADDING A NEW ROW OF PRODUCTS IN A PAGE:
You can add more rows of products in any store HTML page. EXAMPLE: In the "store1.htm" find the "START PRODUCT TABLE 2" note. Copy the code group between the START note and END note and paste it after itself. Add <br><br> between the code groups. In your new code group, or table area, you will edit the 3 .htm links with new product links and edit the 3 .jpg areas with your new .jpg image names that you will place in the "products" folder. For example in this new row you will be adding products 1-7, 1-8 and 1-9. Make 3 copies of any of the .htm pages in the "products" folder for your new products. Name them "product1-7.htm" and "product1-8.htm" and "product1-9.htm".