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:
- To use your editor
for making the required changes to your code, open Header.html into
your editor.
- If you are not
using an editor, the code is below for you to copy/paste.
- Log-in to your
eBay account (my eBay) and click on the "Manage My Store"
link in the lower-left column of My eBay.
- 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.
- 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".
- 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").
- You should now
be on "Edit Store Header Display". This is where we will be
adding the Header.html code.
- Click on the
radio button for "Yes, include additional information in the
header. (Enter below)"
- 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"> </td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td width="184"> </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>
- 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.
- 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.
- 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.
- After all changes
have been made, click on the "save settings" button at
the bottom of the page.
To install
your Home Page:
- To use your editor
for making the required changes to your code, open Home.html into your
editor.
- If you are not
using an editor, the code is below for you to copy/paste.
- 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.
- To create a new
page, click on the "create new page" link.
- 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.
- You should now
be on " Create Custom Page: Provide Content". This is where
we will be adding the Home.html code.
- 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.
- 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>
- 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.
- 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.
- 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)
- If you're not already
there, click on the "Manage My Store" link in the lower-left
column of "My eBay".
- Click on "Display
Settings" in the upper-left column under "Store Design"
- Under the Theme
and Display section, click on the Edit current theme link on the right-hand
side of the section.
- 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.
- 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).
- Editing your HTML
you will need to again change all image paths and links (the code is
below for reference).
- 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.
- 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.
- 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.
- Editing your HTML
you will need to again change the title, description and terms within
the template.
- 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.
- 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.
- 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.
- 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"> </td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td width="184"> </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> </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> </td>
</tr>
</table>
<table width="100%" border="0" cellspacing="2"
cellpadding="2">
<tr>
<td align="center" valign="top" bgcolor="689B88"
class="0008content">Terms
& 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> </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
|