Ebay Templates Coding Guide

Ebay templates coding has some pitfalls, and some research had been made recently to circumvent them. Here’s how to avoid problems with ebay product template coding.

1. Ebay will cut html, body and head tags, so don’t include them into template.
2. Page anchors will not work, javascript must be used.
3. Some JavaScript is ok to have on Ebay template, but it must reside inside the code, no external links allowed.
4. Don’t add // comments in javascript, they are supposed to comment out a line, but ebay will put all of your javascript into 1 line, so your js will not function.
5. It’s a good idea to have your template wrap class name before every next class or ID, this way you’ll be sure not to touch ebay page classes.
6. On first load of template ebay will use mixed styles which will come partly from ebay page – so every CSS style you don’t assign specifically, will get a style declaration from eBay CSS. Some elements can look different because of that. Assign CSS style to every element. Example: If you don’t have a special style for Paragraph it will get CSS from ebay, like line-height:1, no margins, etc. After page reload your template will be put in iframe, and your styles will be back, but you must achieve same look. Styles must have unique names, I add something before every name I assign to a class or ID, i.e. .idb_about
7. Default background of ebay is gray, so if you don’t add i.e. white background to your wrapper, on some screens you’ll get a gray background.
8. Make your template responsive, users have different screen sizes.
9. When adding font-family declarations, don’t use double quotes, they won’t work in Internet Explorer, use single quotes for font names: font-family: 'Helvetica neue', Helvetica, Verdana, Sans-serif;
10. Prepare template to look the same in “quirks mode”.
11. Add box-sizing: border-box; to input fields. otherwise you’ll have different field size on first load and after reloading.
12. Inline style is a good solution for elements. But sometimes it’s enough to add line-height, font and color to a wrapper of your template.