How to modify eBay Stores templates

Want to customize your eBay Store a bit, but aren't HTML & CSS savvy? This guide will assist you in creating custom store pages using eBay's stores templates. (Available at pages.ebay.com/storefronts/designtemplates.html)

Not even sure how to install a custom page to your store? Please see this tutorial - look for the section on custom pages.

You've downloaded a Stores Template...

The downloaded file is a zip file. Double-click to open it, then extract the HTML file within. Double-click that file to open in your browser. (Note, the instructions at the top of that file indicates use for Internet Explorer - it worked fine for me in Firefox.)

In this sample, I'm using the first stores template, by the way.

Choose your settings:

You will first choose your layout type. In this case, 2 Cols x 3 Rows. Choose your color scheme - if yours isn't available, choose teal as that is what I chose in this sample. Choose the pixel size of your images you will display.

Enter your info:

For each box, create the title for that box, add the URL of the image you want used, add the page URL to which you want that image to link and add any description text you want to include. HTML is allowed in the description. If you know HTML, use it as you wish. If not, here are a few codes you may want to know:

• For a simple line break, insert <br> where you want that break.
• For a paragraph (double-spaced) line break, insert <p> where you want that break.
• If you want a word or phrase in bold, insert <b> before that word or phrase and </b> after the phrase.
• If you want a word or phrase in italics, insert <i> before that word or phrase and </i> after the phrase.
• If you want to make a word or phrase in a color, insert <font color="color name"> before that word or phrase and </font> after the phrase. (See this page for color names which are recognized by all major browsers. Please notice the Hex Codes for each color on that page - those can be used. For example you could write <font color="BlueViolet"> or <font color="#8A2BE2">.)

Though in my sample I chose the 2x3 layout, I've not added anything in boxes 5 & 6 so I can show you how to remove a box.

Preview your layout:

Your custom page is displayed as in the above image. (Place holders for your store header and navigation are in gray just to demonstrate.)

Get the code:

Click your cursor in the code box. Click Ctrl+A to select all the code in that box. Click Ctrl+C or right-click>Copy to copy that code. If everything is just right, you can enter it directly into the custom page entry. BUT - chances are you want to tweak things, so for now, open Notepad, paste the code into that and save as storetemplate1.html** or another name which makes sense to you.

This is the design thus far - NOT ready for prime time!:

Customize your code...

The first thing we'll customize is the colors of your boxes. Open your Notepad file. It looks like a mess!:

It'll take a few minutes, but if you put a return after each > & }, things will be a bit easier to read:

At this point, I would save the Notepad file under another name (such as storetemplate1a.html) so you have the original if you need it. Work on the duplicated file.

At the top of this code is the CSS (style) which tells the page which colors to display. For example, these color references are in the code:

• background-color: #003333 - This is THIS COLOR, a dark gray.
• background-color: #ffffff - This is white .
• background-color: #003333 - This is THIS COLOR, a dark gray.
• color: #d8e1cc - This is THIS COLOR, a pale green.
• background-color: #d8e1cc - This is THIS COLOR, a pale green.
• color: #333 - This is THIS COLOR, nearly black.

Notice that 6 characters follow the pound sign (#) for the above colors, except for the last one. A triple-character color code can be used if the characters are doubled in each of the RGB sections, thus #11FFCC can be written as #1FC.

To choose the color codes you wish to use other than those above, you can google for hex color codes. This page links to several pages which have the codes you can use. Just replace the color code in the CSS with the color you want.

Remove extra boxes

Because I selected 3 rows of 2 boxes initially, I now have 2 extra boxes which are unneeded. Thus, those have to be removed from the code. Near the bottom of the code are two sections each with this code:

Remove those two blocks of code. You will then see this code remaining near the bottom:

The "tr" indicates a row. Save your file (which you should have been doing all along any way) and now open the file in your browser. You will only see the first 4 boxes, but there is a blank row at the bottom which may add space you don't want. If you remove the above code from <tr> thru </tr>, you will eliminate that extra blank row.

Make this your default custom store home page...

Save the above file and view it in your browser to make sure it looks correct. If all is right, you're ready to load it into your eBay store. At this eBay Stores tutorial, stores.shop.ebay.com/GOing1nceLLC/StoreTutorial.html_#custom, under CUSTOM PAGES, is info on creating & saving a custom store page.