Template 011 Installation Instructions

Files included in Template011.zip file:

  • images directory
  • Store.html (all codes compiled into one HTML file for experienced HTML users)
  • Header.html (your store header code)
  • Home.html (your store's home page code)
  • Template.html (your listings/auction template code)
  • Template011-ScSh.jpg (a screenshot of how the finished design should look in your store)
  • Template011-Instructions.html (instructions)
   
Step 1: Upload All Images You will need to unzip the image folder and upload all images contained in the folder to your own hosting. Once you've uploaded all images, you will need to find the URL to each image in order to change the image paths of your code.
Step 2: Installing Your Store

Let's start with your Store design files. If you will be editing the code on your own, you will need either an HTML editing software or a text editor such as Notepad.

To install your Store Header:

  1. To use your editor for making the required changes to your code, open Header.html into your editor.
  2. If you are not using an editor, the code is below for you to copy/paste.
  3. Log-in to your eBay account (my eBay) and click on the "Manage My Store" link in the lower-left column of My eBay.
  4. You should now be in the "Manage My Store" area of your eBay account. Click on the "Display Settings" link under the "Store Design" section of the upper-left column.
  5. If you are not yet using a custom store header, you will need to change your theme.
    If you are already using a custom store header, skip to step 6.
    To change your theme you want to click on "Change To Another Theme" on the right-hand side of your "Theme And Display" section.
    Click on the "Easily Customizable" link in the upper-left column of the page. You can select any of the themes that appear, however we recommend using "Minimal Left", "Minimal Top" or "Custom Header Only".
    After you've made your selection click on the "save settings" button at the bottom of the page to return to the "Display Settings" page of "Manage My Store".
  6. From the "Display Settings" page, click on the "Change" link on the right-hand side of the "Store header display" section (3rd section under "Theme And Display").
  7. You should now be on "Edit Store Header Display". This is where we will be adding the Header.html code.
    1. Click on the radio button for "Yes, include additional information in the header. (Enter below)"
    2. Copy and paste the following code into the box below the radio buttons (make sure you paste all code into the box) so that we can edit the code:

      <style type="text/css">
      <!--
      .T0001HEADER { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #333333; text-decoration: none; }
      .T0001HEADER A:link { color: #333333; text-decoration: none; }
      .T0001HEADER A:hover { color: #333333; text-decoration: none; }
      .T0001HEADER A:active { color: #333333; text-decoration: none; }
      .T0001HEADER A:visited { color: #333333; text-decoration: none; }


      -->
      </style>
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
      <td><table width="100%" height="126" border="0" cellpadding="0" cellspacing="0" bgcolor="#6C9B84">
      <tr>
      <td width="325" align="center">
      <!-- replace the text YOUR-STORE-NAME with your own store's name, use dashes (-) in place of spaces -->
      <a href="http://stores.ebay.com/YOUR-STORE-NAME"><img src="images/logo.gif" width="310" height="90" vspace="6" border="0"></a>
      </td>
      <td align="center" valign="bottom">&nbsp;</td>
      </tr>
      </table>
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
      <td width="184">&nbsp;</td>
      <td align="right" valign="top"><table width="100%" border="0" cellpadding="2" cellspacing="0" bgcolor="F2E28C">
      <tr align="center">
      <td width="25%" style="border-right: 1px solid #FFFFFF" class="T0001HEADER">
      <!-- replace the text YOUR-STORE-NAME with your own store's name, use dashes (-) in place of spaces -->
      <a href="http://stores.ebay.com/YOUR-STORE-NAME">store home</a></td>
      <td width="25%" style="border-right: 1px solid #FFFFFF" class="T0001HEADER">
      <!-- replace the text YOURUSERID with your own eBay user ID -->
      <a href="http://members.ebay.com/ws/eBayISAPI.dll?ViewUserPage&userid=YOURUSERID">about
      us</a></td>
      <td width="25%" style="border-right: 1px solid #FFFFFF" class="T0001HEADER">
      <!-- replace the text YOURUSERID with your own eBay user ID -->
      <a href="http://contact.ebay.com/ws1/eBayISAPI.dll?ReturnUserEmail&requested=YOURUSERID&de=off&iid=-1&frm=-1&redirect=0&pass=D">contact
      us</a> </td>
      <td width="25%" class="T0001HEADER">
      <!-- replace the text YOURUSERID with your own eBay user ID -->
      <a href="http://my.ebay.com/ws/eBayISAPI.dll?AcceptSavedSeller&sellerid=YOURUSERID&ssPageName=STRK:MEFS:ADDSTR">add
      to favorites</a></td>
      </tr>
      </table></td>
      </tr>
      </table> </td>
      </tr>
      </table>

    3. As you can see in the code there are areas where you will need to replace information with your own.
      First you will need to scroll through the code you've just pasted into the header box page and change all image paths which have the following tag:
      <img src="images/imagename.gif" ....
      Replace all instances of images/imagename.gif with the URL to the images on your own host
      (for instance: http://www.yourdomain.com/images/imagename.gif). Leave the rest of the tag as-is.
    4. Now you will need to change all instances of YOUR-STORE-NAME with your own eBay store's name. If there are spaces in your store name you will want to replace the spaces with dashes. For instance, if your store name was "My Store Rocks", then you would type over YOUR-STORE-NAME with My-Store-Rocks. Leave the rest of the tag as-is.
    5. Changing your eBay userid is the next step and is very important as these are the links to your "me" page, contact us and add to favorites.
      You will need to replace all instances of YOURUSERID in the HTML code to your own eBay user ID exactly as it appears in your account. For instance, if your username was "myusername*rocks" then you would replace YOURUSERID with myusername*rocks. Leave the rest of the tag as-is.
    6. After all changes have been made, click on the "save settings" button at the bottom of the page.

To install your Home Page:

  1. To use your editor for making the required changes to your code, open Home.html into your editor.
  2. If you are not using an editor, the code is below for you to copy/paste.
  3. You should now be in the "Manage My Store" area of your eBay account. Click on the "Custom Pages" link under the "Store Design" section of the upper-left column.
  4. To create a new page, click on the "create new page" link.
  5. You should now see a page with options for layouts of your custom page. Click on the radio button for "1 Text Section/HTML" then click the "continue" button at the bottom.
  6. You should now be on " Create Custom Page: Provide Content". This is where we will be adding the Home.html code.
    1. In the first text box you will need to name your page, and this text will be displayed as the link for that page. Using a name like "home" or "Homepage" will make it easy for your visitors to understand what the link means.
    2. Copy and paste the following code into the "Text Section 1" box (make sure you paste all code into the box) so that we can edit the code:

      <table width="100%" border="0" cellspacing="5" cellpadding="5">
      <tr align="center" valign="top">
      <td width="33%"> <table width="100%" border="0" cellspacing="0" cellpadding="3">
      <tr>
      <td align="center" bgcolor="#6C9B84"><font size="2" face="Arial" color="#000000"><strong>
      <!-- REPLACE THE TEXT CATEGORY NAME 1 WITH YOUR 1ST CATEGORY -->

      Category Name 1</strong></font></td>
      </tr>
      <tr>
      <td align="center" valign="top" bgcolor="#6C9B84"> <table width="100%" border="0" cellpadding="3" cellspacing="0" bgcolor="#FFFFFF">
      <tr>
      <td>
      <!-- REPLACE ONLY THE TEXT CATNUMB TEXT WITH THE ID NUMBER GIVEN UNDER MANAGE MY STORE > STORE CATEGORIES / MAKE SURE TO LEAVE THE QUOTES BEFORE AND AFTER THE ID NUMBER -->
      {eBayStoresItemShowcase STORECATID="CATNUMB" SIZE="1"}
      </td>
      </tr>

      </table></td>
      </tr>
      </table></td>
      <td width="33%"> <table width="100%" border="0" cellspacing="0" cellpadding="3">
      <tr>
      <td align="center" bgcolor="#6C9B84"><font size="2" face="Arial" color="#000000"><strong>
      <!-- REPLACE THE TEXT CATEGORY NAME 2 WITH YOUR 2ND CATEGORY -->
      Category Name 2</strong></font></td>
      </tr>

      <tr>
      <td align="center" valign="top" bgcolor="#6C9B84"> <table width="100%" border="0" cellpadding="3" cellspacing="0" bgcolor="#FFFFFF">
      <tr>
      <td>
      <!-- REPLACE ONLY THE TEXT CATNUMB TEXT WITH THE ID NUMBER GIVEN UNDER MANAGE MY STORE > STORE CATEGORIES / MAKE SURE TO LEAVE THE QUOTES BEFORE AND AFTER THE ID NUMBER -->
      {eBayStoresItemShowcase STORECATID="CATNUMB" SIZE="1"}
      </td>
      </tr>
      </table></td>
      </tr>

      </table></td>
      </tr>
      <tr align="center" valign="top">
      <td width="33%"><table width="100%" border="0" cellspacing="0" cellpadding="3">
      <tr>
      <td align="center" bgcolor="#6C9B84"><font size="2" face="Arial" color="#000000"><strong>
      <!-- REPLACE THE TEXT CATEGORY NAME 4 WITH YOUR 4TH CATEGORY -->
      Category Name 3</strong></font></td>
      </tr>
      <tr>
      <td align="center" valign="top" bgcolor="#6C9B84"> <table width="100%" border="0" cellpadding="3" cellspacing="0" bgcolor="#FFFFFF">

      <tr>
      <td>
      <!-- REPLACE ONLY THE TEXT CATNUMB TEXT WITH THE ID NUMBER GIVEN UNDER MANAGE MY STORE > STORE CATEGORIES / MAKE SURE TO LEAVE THE QUOTES BEFORE AND AFTER THE ID NUMBER -->
      {eBayStoresItemShowcase STORECATID="CATNUMB" SIZE="1"}
      </td>
      </tr>
      </table></td>
      </tr>
      </table></td>
      <td width="33%"> <table width="100%" border="0" cellspacing="0" cellpadding="3">

      <tr>
      <td align="center" bgcolor="#6C9B84"><font size="2" face="Arial" color="#000000"><strong>
      <!-- REPLACE THE TEXT CATEGORY NAME 3 WITH YOUR 3RD CATEGORY -->
      Category Name 4</strong></font></td>
      </tr>
      <tr>
      <td align="center" valign="top" bgcolor="#6C9B84"> <table width="100%" border="0" cellpadding="3" cellspacing="0" bgcolor="#FFFFFF">
      <tr>
      <td>
      <!-- REPLACE ONLY THE TEXT CATNUMB TEXT WITH THE ID NUMBER GIVEN UNDER MANAGE MY STORE > STORE CATEGORIES / MAKE SURE TO LEAVE THE QUOTES BEFORE AND AFTER THE ID NUMBER -->

      {eBayStoresItemShowcase STORECATID="CATNUMB" SIZE="1"}
      </td>
      </tr>
      </table></td>
      </tr>
      </table></td>
      </tr>
      </table>

    3. Scroll through the code to find your category titles which have tags like this:
      Category Name 1</td>
      You will need to change the text Category Name 1 (or 2, 3 or 4) with the name of the category you'll be displaying items for in the box. Do this for each of the 4 categories.
    4. After each of the category name codes there is a special eBay HTML tag that looks like this:
      {eBayStoresItemShowcase STORECATID="CATNUMB" SIZE="1"}
      For each of the corresponding categories you will need to change CATNBUM to the store category ID number you have selected to be displayed in the box. You can find your store category ID's under "Manage My Store > Store Categories >" Then click the "All Categories: # of 300 created" link in the bottom-right corner of your category list. The ID will be to the far-right of the category.
    5. After you've revised all your code, click on the "continue" button at the bottom to preview your page. If all looks okay, then click on the "Save and Publish" button at the bottom of the page to return to your Manage My Store area.
Step 3: Coordinating your store colors with your new design.

For your convenience, we've provided step-by step instructions and color codes in order to coordinate your eBay store colors with the new store design (to achieve the affect in the screenshot below)

  1. If you're not already there, click on the "Manage My Store" link in the lower-left column of "My eBay".
  2. Click on "Display Settings" in the upper-left column under "Store Design"
  3. Under the Theme and Display section, click on the Edit current theme link on the right-hand side of the section.
  4. These are your color codes:
  • Primary Color: 6C9B84
  • Secondary Color: F2E28C
  • Accent Color: FFFFFF
  • Display accent boxes in left navigation bar and header is unchecked
  • Store name font: Arial     size: Xsmall   color: 000000
  • Section title font: Arial    size: Xsmall     color: 000000
  • Store description font: Arial    size: XXsmall     color: 000000

Click on "Save Settings" to save your new settings.
Step 4: Using Your Listings Template.

Steps for using your template may vary depending on how you list your items to eBay (sell your item form on eBay, Turbo Lister, 3rd Party, etc.) The easiest way to use your listings template is to use an HTML page editor like FrontPage, Dreamweaver, Coffee Cup or a free service like HTMLarea. These instructions will walk you through the basic editing, copy/paste process.

  1. Open your Template.html page either using your HTML editor software or your text editor. If you are using an HTML editor that allows you to view the page design itself (displays your graphics and text instead of the HTML code, also knows as WYSIWYG editors) then you will be able to see exactly what areas you need to change for the TITLE, DESCRIPTION and POLICIES areas, just highlight and type over those areas. To change image paths and links, you will need to use the HTML view to edit the code (step 2).
  2. Editing your HTML you will need to again change all image paths and links (the code is below for reference).
    1. First you will need to scroll through the code and change all image paths which have the following tag:
      <img src="images/imagename.gif" ....
      Replace all instances of images/imagename.gif with the URL to the images on your own host
      (for instance: http://www.yourdomain.com/images/imagename.gif). Leave the rest of the tag as-is.
    2. Changing your links. You will now need to change the HTML code to create the links to your store, contact and "me" page.
      Scroll through the code to find all instances of YOUR-STORE-NAME and replace that text with your own store's name using dashes (-) in place of spaces.
      Scroll through the code to find all instances of YOUR USERID and replace that text with your own user ID exactly as it appears in your eBay account.
      Scroll through the code to find the instance of SELLERID (in the search form) and replace the text with your own seller ID number (as you did when you created your search promotion box). Also in the search form you will need to replace STORE NAME with your own store's name, including any spaces and/or special characters.
    3. Changing your item's photo. Scroll through the code until you see the following snippet of code (shown exact)
      <img src="images/YOURPHOTOHERE.gif" width="300">
      You will need to replace the images/YOURPHOTOHERE.gif part of the code to your own URL and item image name. Leave the rest of the tag as is.
  3. Editing your HTML you will need to again change the title, description and terms within the template.
    1. First you will need to scroll through the code and change the title which has the following tag:
      <td align="center" valign="top" bgcolor="242086" class="0008title">TYPE YOUR TITLE HERE</td>
      Change just the all-caps text of TYPE YOUR TITLE HERE to your own item's title.
    2. To change the description, scroll through the code and change the description which has the following tag:
      <td align="center" class="0008content">TYPE YOUR DESCRIPTION HERE</td>
      Change just the all-caps text of TYPE YOUR DESCRIPTION HERE to your own item's description.
    3. To change the terms, scroll through the code and change the description which has the following tag:
       <td align="center" class="0008content">TYPE YOUR PAYMENTPOLICIES,
      SHIPPING INFORMATION AND RETURN POLICIES HERE.      </td>
      Change just the all-caps text of TYPE YOUR PAYMENTPOLICIES, SHIPPING INFORMATION AND RETURN POLICIES HERE. to your own policies.
  4. Your template code is now ready to copy/paste into your selling form. In the description box of your selling form, make sure you are on HTML view and not design view. Copy all of the code on your page and paste the code into the box. Complete your listing process.
Template HTML code

<style type="text/css">
<!--
.T0001HEADER { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #333333; text-decoration: none; }
.T0001HEADER A:link { color: #333333; text-decoration: none; }
.T0001HEADER A:hover { color: #333333; text-decoration: none; }
.T0001HEADER A:active { color: #333333; text-decoration: none; }
.T0001HEADER A:visited { color: #333333; text-decoration: none; }

.0008title { font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; color: #FFFFFF; text-decoration: none; }
.0008content { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000000; text-decoration: none; }
-->
</style>

<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="100%" height="126" border="0" cellpadding="0" cellspacing="0" bgcolor="#6C9B84">
<tr>
<td width="325" align="center">
<!-- replace the text YOUR-STORE-NAME with your own store's name, use dashes (-) in place of spaces -->
<a href="http://stores.ebay.com/YOUR-STORE-NAME"><img src="images/logo.gif" width="310" height="90" vspace="6" border="0"></a>
</td>
<td align="center" valign="bottom">&nbsp;</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="184">&nbsp;</td>
<td align="right" valign="top"><table width="100%" border="0" cellpadding="2" cellspacing="0" bgcolor="F2E28C">
<tr align="center">
<td width="25%" style="border-right: 1px solid #FFFFFF" class="T0001HEADER">
<!-- replace the text YOUR-STORE-NAME with your own store's name, use dashes (-) in place of spaces -->
<a href="http://stores.ebay.com/YOUR-STORE-NAME">store
home</a></td>
<td width="25%" style="border-right: 1px solid #FFFFFF" class="T0001HEADER">
<!-- replace the text YOURUSERID with your own eBay user ID -->
<a href="http://members.ebay.com/ws/eBayISAPI.dll?ViewUserPage&userid=YOURUSERID">about
us</a></td>
<td width="25%" style="border-right: 1px solid #FFFFFF" class="T0001HEADER">
<!-- replace the text YOURUSERID with your own eBay user ID -->
<a href="http://contact.ebay.com/ws1/eBayISAPI.dll?ReturnUserEmail&requested=YOURUSERID&de=off&iid=-1&frm=-1&redirect=0&pass=D">contact
us</a> </td>
<td width="25%" class="T0001HEADER">
<!-- replace the text YOURUSERID with your own eBay user ID -->
<a href="http://my.ebay.com/ws/eBayISAPI.dll?AcceptSavedSeller&sellerid=YOURUSERID&ssPageName=STRK:MEFS:ADDSTR">add
to favorites</a></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="800" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="170" align="left" valign="top">
<table width="170" border="0" cellpadding="0" cellspacing="0" bgcolor="F2E28D">
<tr>
<td bgcolor="#689B88"><table width="161" border="0" cellspacing="0" cellpadding="3">
<tr>
<td bgcolor="689B88"><b><font size="2" face="Arial" color="#000000">Store
Search</font></b></td>
</tr>
</table></td>
</tr>
<tr>
<td><form name="search" method="get" style="display: inline;" action="http://search.stores.ebay.com/search/search.dll?GetResult">
<table border="0" cellpadding="3" cellspacing="0" width="170">
<tr>
<td width="99%" colspan="2" align="center"><input name="query" size="17" maxlength="300" type="text">
<input name="srchdesc" value="y" checked="checked" type="hidden">
<!-- replace the text SELLERID with your seller ID number --> <input name="sid" value="SELLERID" type="hidden">
<!-- replace the text STORE NAME with your own store's name --> <input name="store" value="STORE NAME" type="hidden">
<input name="colorid" value="-1" type="hidden"> <input name="fp" value="0" type="hidden">
<input name="st" value="1" type="hidden"> <input name="fsoo" value="2" type="hidden">
<input name="fsop" value="3" type="hidden"> </td>
</tr>
<tr>
<td colspan="2" align="center"> <input name="submit" type="submit" value="Search">
</td>
</tr>
</table>
</form></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>
</td>
<td align="center" valign="top"><table width="100%" border="0" cellspacing="2" cellpadding="2">
<tr>
<!-- replace the text TYPE YOUR TITLE HERE with the title of your item --> <td align="center" valign="top" bgcolor="689B88" class="0008content">TYPE YOUR TITLE
HERE</td>
</tr>
<tr>
<!-- replace the text "images/YOURPHOTOHERE.gif" with the URL and image name of your image ex: "http://www.yourdomain.com/images/yourimage.jpg --> <td align="center" class="0008content"><img src="images/YOURPHOTOHERE.gif" width="300"></td>
</tr>
<tr>
<!-- replace the text TYPE YOUR DESCRIPTION HERE with the description of your item -->
<td align="left" class="0008content">TYPE YOUR DESCRIPTION HERE</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="2" cellpadding="2">
<tr>
<td align="center" valign="top" bgcolor="689B88" class="0008content">Terms
&amp; Policies</td>
</tr>
<tr>
<!-- replace the text TYPE YOUR PAYMENTPOLICIES, SHIPPING INFORMATION AND RETURN POLICIES HERE. with your own terms & policies -->
<td align="left" class="0008content">TYPE YOUR PAYMENTPOLICIES,
SHIPPING INFORMATION AND RETURN POLICIES HERE.</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>