Diy Template

If you’re ready to tackle customizing your very own template, please read through these guidelines. Although you don’t need to know any HTML, you will need a basic understanding of how this DIY template works in order to customize it.

The pre-installed “DIY Template” is basically a pre-structured 2-column layout. The layout and structure itself you cannot change unless you are familiar with HTML. However, even with absolutely NO HTML experience, you can “build” your own template simply by replacing the images that make up this pre-structured layout with your own images. The layout is made up of 14 images. Nine are regular images and buttons, and 5 are “background” images. The “background” images are by default completely transparent and are optional. So if you don’t want to use backgrounds in those areas, just leave them as-is.

Customizing your DIY Template

  1. Overview of the DIY Template
  2. Creating your Images
  3. Regular image guidelines
  4. Background image guidelines
  5. How to activate your DIY Template.
  6. Font and Color Customization
  7. Advanced customization notes
  8. Copyright

Let’s review the various images that make up this DIY Template.   TOP

You may click on a number within the image below and be taken to the details pertaining to that number.


Creating your Images:   TOP

In order to create your own custom graphics and images to insert into your DIY Template, you will need some sort of graphics program. There are many available, some free, and some paid programs. Below you will find a list of some of the more popular graphics and image editing programs.

Free or Open Source Software:

Paid or Licensed Software:

Many more are available out there. Feel free to search the web to find one that suits your needs. Once you have some graphics software, you’ll need to create new images that you want to use within your new DIY Template.


Regular Images:   TOP

Image

File Name

Description

Instructions / How to replace image

1) Logo or Website TopperTOP (can be any file name) A “Logo” could be any size and would only take up part of the top area of the website.A “Website Topper” or “Header” would be a large, wide image at least 800 pixels wide and any height. The default height is 100 pixels but if your header image is taller, the template will adjust accordingly to fit your header image or topper.
  • In your store admin, click “Images” on the left.
  • Click the “Catalog Images” button
  • Next to Logo, upload your custom logo or header/topper.
2) “Shopping” or “Categories” image headerTOP shopping.gif This image will appear directly above your product categories in your left navigation area. The image MUST be named shopping.gif or it will not appear.
  • In your store admin, click “Images” on the left.
  • Under “General Images”, click on “Show Images”.
  • At the very bottom, click “Browse”, find your image named shopping.gif, and click “Add”.
3) “Information” headerTOP information.gif This image will appear directly above your list of website pages in your left navigation area. The image MUST be named information.gif or it will not appear.
  • In your store admin, click “Images” on the left.
  • Under “General Images”, click on “Show Images”.
  • At the very bottom, click “Browse”, find your image named information.gif, and click “Add”.
4) “Cart” HeaderTOP cart.gif This image will appear in your left navigation area directly above either the “View Your Cart” text or your customized “View Cart” button. The image MUST be named cart.gif or it will not appear.
  • In your store admin, click “Images” on the left.
  • Under “General Images”, click on “Show Images”.
  • At the very bottom, click “Browse”, find your image named cart.gif, and click “Add”.
5) “View Cart” Button (optional)TOP (can be any filename) This optional button will appear in your left navigation direclty underneath the Cart Header (#4 above). This is an optional button. If you don’t use this button, by default a “View Your Cart” text link will appear. If you have a shopping cart image you would like to use instead, you may do so.
  • In your store admin, click “Images” on the left.
  • Click the “Catalog Images” button
  • Next to View Cart Button, upload your custom view cart image.
6) “Search” HeaderTOP search.gif This image will appear in your left navigation area directly above the search box and “Go” button. The image MUST be named search.gif or it will not appear.
  • In your store admin, click “Images” on the left.
  • Under “General Images”, click on “Show Images”.
  • At the very bottom, click “Browse”, find your image named search.gif, and click “Add”.
7) “Go” Button (optional)TOP (can be any file name) This optional button will appear in your left navigation direclty under the Search Header (#6 above), and directly to the right of the search text box. This is an optional button. If you don’t use this button, by default a plain text”Go” button will appear. If you have a Go button image you would like to use instead, you may do so.
  • In your store admin, click “Images” on the left.
  • Click the “Catalog Images” button
  • Next to Search Button, upload your custom Go button image
11) “Order” or “Add to Cart” button (optional)TOP (can be any file name) This optional button will appear under or next to all of your orderable products. This is an optional button. If you don’t use this button, by default a plain text “Order” button will appear. If you have a custom Order or Add To Cart button image you would like to use instead, you may do so.
  • In your store admin, click “Images” on the left.
  • Click the “Catalog Images” button
  • Next to Order Button, upload your custom order button image
12) “Add to Registry” button (optional)TOP (can be any file name) *IF* you have activated and are using the Gift Registry feature, this optional button will appear under all of your orderable products just to the right of the order button. This is an optional button. If you don’t use this button, by default a plain text “Add to Registry” button will appear. If you have a custom Add to Registry button image you would like to use instead, you may do so.
  • In your store admin, click “Images” on the left.
  • Click the “Catalog Images” button
  • Next to Registry Button, upload your custom order button image

Background Images:   TOP

Notes:
These images are all transparent (invisible) by default.
The main area of the website is white by default.

Image

File Name

Description

Instructions / How to replace image

8) Header background (optional)TOP topbg.gif If you do not have a full size header or topper and want to use a background image for the top of the website, you may do so. By default, the top row is 100 pixels high so keep that in mind if you are using a top background. If you do not have a Logo or Website Topper uploaded, your Site Name (from the Site Settings page) will appear here in text.TIP: If you want just a general color in this header area, make a 1 pixel by 1 pixel image in the color you want, and upload this.If you need to adjust the height of the top row to accomodate your top background image, read here.
  • In your store admin, click “Images” on the left.
  • Under “General Images”, click on “Show Images”.
  • At the very bottom, click “Browse”, find your image named topbg.gif, and click “Add”.
9) Page background (optional)TOP pagebg.gif Most people like a “pretty” background for their website. If you would like to use a background image for your website, you may do so. The image MUST be named pagebg.gif or it will not appear.
  • In your store admin, click “Images” on the left.
  • Under “General Images”, click on “Show Images”.
  • At the very bottom, click “Browse”, find your image named pagebg.gif, and click “Add”.
10) Left side background (optional)TOP sidebg.gif If you would like to use a background for the left navigation area of your website, you may do so. The image MUST be named sidebg.gifor it will not appear.TIP: If you want just a general color other than white in this left navigation area, make a 1 pixel by 1 pixel image in the color you want, and upload this.
  • In your store admin, click “Images” on the left.
  • Under “General Images”, click on “Show Images”.
  • At the very bottom, click “Browse”, find your image named sidebg.gif, and click “Add”.
13) Right side background (optional)TOP rightbg.gif If you would like to use a background for the right side, content area of your website, you may do so. The image MUST be named rightbg.gifor it will not appear.TIP: If you want just a general color other than white in this content area, make a 1 pixel by 1 pixel image in the color you want, and upload this.
  • In your store admin, click “Images” on the left.
  • Under “General Images”, click on “Show Images”.
  • At the very bottom, click “Browse”, find your image named rightbg.gif, and click “Add”.
14) Bottom background (optional)TOP bottombg.gif If you would like to use a background for the bottom footer area of your website, where the copyright goes, you may do so. The image MUST be named bottombg.gifor it will not appear.TIP: If you want just a general color other than white in this left navigation area, make a 1 pixel by 1 pixel image in the color you want, and upload this.If you need to adjust the size of your footer row to accomodate your background image, read here.
  • In your store admin, click “Images” on the left.
  • Under “General Images”, click on “Show Images”.
  • At the very bottom, click “Browse”, find your image named bottombg.gif, and click “Add”.

How to Activate your DIY Template:   TOP

  1. Log into your Store Administration area
  2. Click “Template” on the left side.
  3. In the drop down box, find “DIY Template”
  4. Check both boxes below for Update Link Colors and Update Logo/Images
  5. Click “Apply”. That’ it!

Fonts and Colors Customization:   TOP

  1. Log into your Store Administration area
  2. Click “Fonts and Colors” on the right side under Administration
  3. You may type the name of the main font you would like to use throughout your site. I recommend either of the following: Arial, Helvetica, Verdana, Times New Roman, Tahoma, Trebuchet MS, Comic Sans MS, or Georgia. These are the easiest fonts for your visitors to read and most people already have these fonts pre-installed on their computers. DO NOT, I repeat DO NOT enter the name of some fancy font that you have downloaded onto your own computer. Unless your visitors have also downloaded and installed this particular font on their computer (highly unlikely), they will not see it anyway. If you really want to use a “Fancy” font, about the only one that is generally accepted is “Monotype Corsiva“. But it is best to stick to standard fonts.
  4. If desired, change the sizes of the fonts using the size drop downs.
  5. Change the colors you wish to change here. You may choose a color with the color picker button or type in the HEX Color code of your choice. For a wider variety of color choices, you may wish to visit http://www.colorpicker.com to find a color you like. Or for some color scheme inspiration, try http://www.colourlovers.com.

TIP: Unless you like boxes around each of your thumbnails in your catalog, leave the “Line Color” field blank.


Other Customization Tips:   TOP

Outer table border
By default, the outer table of this template is 1 pixel sold black line. If you wish to change this, you will need to edit the DIY Template by following these instructions below.

  1. In your Store Admin, click on “Templates”
  2. Select “DIY Template” from the drop down and click “Customize”
  3. Now look below in the “Custom Template” box. Here you will see all of the HTML for this pre-made template. Find the following line near the top in the Style area:
  4. To change it, simply change the border: 1px solid #000000 to something else.
    – For example if you want NO border, change it to 0px.
    – If you want to change the color, change the color from black (#000000) to the hex code code for the color you want.
    – If you want to make the border wider or more bold, increase the px to 2px, 3px, or 4px and so on.
    – If you want the line something other than solid, you may change “solid” to either dotted, dashed, or double.

Header or Website Topper Row Height   TOP
Remember, if you are using a logo or website header that you uploaded through the Catalog Images page, you do not need to adjust the height as it will adjust automatically. However, if you want to use a special background for the website topper/header area you may need to increase or decrease the row height. The default row height is 100 pixels. If you need to increase or decrease this to match the height of the header background image (topbg.gif) that you want to use, follow these instructions:

  1. In your Store Admin, click “Templates”
    **If you have already begun customizing the DIY Template by changing the border as described above, then skip to step 3**
  2. Select “DIY Template” from the drop down and click “Customize”
  3. Now look below in the “Custom Template” box. Here you will see all of the HTML for this pre-made template. Find the following line near the top in the Style area:
  4. To change the height, simply change the 100px to whatever the height of your topbg.gif file.

Footer Row Height   TOP
You may wish to use a special background for the footer or copyright area and you need to increase or decrease the row height. The default row height is 80 pixels. If you need to increase this to match the height of the bottom background image (bottombg.gif) that you want to use, follow these instructions:

  1. In your Store Admin, click “Templates”
    **If you have already begun customizing the DIY Template by changing the border as described above, then skip to step 3**
  2. Select “DIY Template” from the drop down and click “Customize”
  3. Now look below in the “Custom Template” box. Here you will see all of the HTML for this pre-made template. Find the following line near the top in the Style area:
  4. To change the height, simply change the 80px to whatever the height of your bottombg.gif file.

Copyright Information:   TOP

By using the DIY Template, you agree to leave the header code in tact, as well as to display the Shoppe Pro / DIY copyright message at the bottom. Failure to comply will result in the deletion of your template from your website.