Kidson Talks | The E-commerce Chemist

Lesson 5: Using a custom shop header.

You need to make sure you on on the ‘custom header only’ theme within eBay.
Go Back to wear you entered your style sheet information and place:

<img src="http://www.mysite.com/header.jpg" alt="eBay Header" />

You can put any kind of HTML in here to expand the header

Use of CSS to control your eBay shop might convene this policy, so always use with care. 

Interference or attempted interference with eBay’s web site and/or operations using any software programme, routine or activity is a serious offence and is not permitted.

Members using the eBay web site may only modify or add content in those areas specifically designated for member use. All content must also abide by all other eBay policies. Designated member areas are:

• the description area of the View Item page.
• the reply box on the eBay discussion, chat and help boards.
• the members’ About Me page.
• the feedback comments area of the Feedback Forum.
• the bid box.
• the eBay email forwarding system text box (e.g. Ask Seller a Question, Contact eBay Member).

In no case may a member block, obscure, overwrite or modify any eBay-generated content or pages. All other site locations or components of eBay pages are strictly for eBay use.

Breaches of this policy may result in a range of actions, including:

• Listing cancellation
• Limits on account privileges
• Account suspension
• Forfeit of eBay fees on cancelled listings
• Loss of PowerSeller status

Lesson Four: Controlling page width

Slip into your CSS file this code:

.pagecontainer
{
width:900px;
margin:10px auto 10px auto;
}

The margin section makes sure the shop is centred.

So, bet you are wondering what the css file looks like now? I didn’t want a coloured background to my store so this is what I have so far:

/* How to style your eBay shop using CSS by http://www.kidsontalks.com. This code is
totally free, why not check out the guide on my blog. Steal away, you can even sell it on
as there are no graphics involved.*/

/* -------- Control Page Width -------- */
.pagecontainer
{
width:900px;
margin:10px auto 10px auto;
}
/* -------- End -------- */

/* -------- Control Border on Gallery List -------- */
td.gallery
{
border:1px #FF00FF solid;
}
/* -------- End -------- */

/* -------- Control Background on Gallery List -------- */
td.gallery table td
{
background:#FFCCFF;
}
/* -------- End -------- */

Now your eBay store is starting to take shape. The next element to look at are controlling the header. Everyone loves a nice header for their eBay shop!

Lesson Three: Changing the backgrounds for the nested tables 

Right now, let experiment to how many times we need to mention table, to get a coloured background in different sections! Try adding these snippets of code to your css file.


table
{
background:#C0C0C0;
}

Using table once just colours the entire background within your eBay shop, including outside your shop front. All the normal white background, all grey.


table table
{
background:#C0C0C0;
}

Using table twice, only fills the background of your eBay shop with colour, as well as the eBay header


table table table
{
background:#C0C0C0;
}

Ah! This now leaves out the eBay header, so just the shop elements are coloured. Nothing much happens for four ‘tables’ but with 5 mentions of table:


table table table table table
{
background:#C0C0C0;
}

the promotion boxes, shop page boxes and the background to the gallery is coloured.

Add a sixth table and only the promotion boxes are coloured.


table table table table table table
{
background:#C0C0C0;
}

Seven tables and only the top promotions boxes are coloured.


table table table table table table table
{
background:#C0C0C0;
}

That is as far as you can go!

The next post will be about centring your eBay shop and fixing the width to 800px.

Lesson Two: Changing the background colour of your gallery view.

eBay is designed using a series of nested tables, so in order to colour various bits of the design you need to make sure you have to mention the table or td definition the correct number of times to get the desired result. This is the snipet of CSS you can add to the previous file:

td.gallery table td
{
background:#FFCCFF;
}


This will generate the effect below:

Lesson three will look at more places to change the background colour in your ebay shop!

I am a beginner too, with basic CSS and HTML knowledge sorted I am going to provide you with eBay CSS manipulation nuggets to build up a more custom eBay shop.

Lesson one - Creating a border around your gallery display in your eBay shop.

Taking a look at how the ebay shop gallery display is controlled by looking at the source you an see that you have various CSS elements to play with.

To place a border around your gallery items you will need to manipulate the table gallery class td.gallery.

So, create a css file in notepad like this:

td.gallery
{
border:1px #FF00FF solid;
}

I have chosen hot pink for the hairfreax ebay shop.

Navigate to ‘Manage my shop’ > ‘Shop Design’ > ‘Display settings’ and change your shop header display.

Link to your css file like this:


<link href="http://www.kidsontalks.com/ebay.css" rel="stylesheet" type="text/css" />

and include the additional information in your shop header.

Save the settings then see what has happened!

Lesson two will be changing the background of the gallery view, using CSS.

At channeladvisor catalyst we spoke to many great sponsors with a unique business offering. Now that the Euro is closing in on the Pound, selling to Europe will become a more attractive prospect for eBay sellers. Once you have sorted a deal with your shipipng provider, how do you effectivly communicate with ebayers that don’t speak your language?

In come InterCultural Elements:

Cultural subtleties and the technical nature of products and services demand cultural expertise and industry know-how to communicate accurately. You need quality translation from experts who combine:

* cultural expertise
* industry know-how
* knowledge of online selling

to ensure your online presence is both appealing and technically accurate.

No only will they work to translate your inventory, but advise on how you actually expand into different countries with an understanding of the differences in culture and infrastructure.

These guys also work with ChannelAdvisor, and will take your English language account, and translate it in the your desired language and set it up for you.

This is going to work very well with the Createyourtemplate multi-lingual eBay shop capabilities, as we don’t translate but provide the technology!

Mathias and I under the Createyourtemplate banner moseyed on down to ChannelAdvisor Cataylst at Vinopolis in London.One of the features of Catalyst was a ‘pimp my shop’ session for ChannelAdvisor Stores, taking an existing CA customer with no current design. So let me run through the features of our tender:

Running down the design we start with the logo, branding is very important to a customer. Its something they recognise and trust. A consistent branding is essential so even though this is a design for the ChannelAdvisor Store, this design will also translate to eBay. We pushed the fact that the seller sold socks and underwear in this logo design, making a clear distinction between the main product types.

The top navigation was designed to hone in on the popular categories of products and also provide extra navigation for the customer. This tender design was based on the socks category page to show the kind of detail and functionality you can have with a CYT (Createyourtemplate) design.

The seller was famous for his branded socks and underwear, especially in the children’s cartoon sector. This scrolling character sorter provides a very visual link between the products and the characters.

We also implemented a further shop by character, in the left hand side navigation. You find that when you are shopping for items you do place some recognition on a brand logo, in this case a cartoon character but you might also know exactly what you are looking for so using this further character search will refine your choice.

Being still a fan of the ‘above the fold’ concept, and customers need to be able to find the main product they are looking for on the page without scrolling. The socks by size and type product sorter is placed above the fold to enable the customer to effectively navigate to their desired product. You might notice also a test location path so the customer knows where they are in the grand scheme of the site. In the main content of the page you will also find sorters for children’s socks:

Teaser sections to promote key products are great for promotion of your best items, as with all CYT designs we like clients to be independent of us when we have finished the designs. The designs can be easily edited to change various sections and text within the design. This would be an example of an ever changing section within the design.

Your basic left hand side navigation is a standard. Our navigation sections are dynamic….

[Read more →]

I am nearly at the end of the first module, and with assessment scores of 88%, 95% and 100% I am hopeful I get a good grade in my project! Once it is all submitted and marked I shall publish my dealings as I am proud of my line by line code writing. Being a serial code masher, somethings do escape you and I am glad I am learning to code in XHTML and CSS properly. The next module is more about object orientated programming and client side scripting, as well as more advanced (X)HTML and CSS.

I’m loving it!

Sue from Tamebay had her eBay shop designed free, and has recently reported an increase in sales of approximately 33%. Not to attribute this to one design company, as I believe GOOD eBay design in general improves the customer experience. Sue noted that her traffic had not increased, but the items per customer had.

Sue Says

‘Prior to installing my shop front, the average buyer in my shop bought around three items. Now, they buy five.’

So it seems a thumbs up for eBay design! I have a few eBay designers for the UK listed on this page ‘eBay Design Services Available in the UK‘ (It does need updating as I have noticed a few more eBay Design companies, offering their services in the UK)

Choosing eBay design is a tricky one. The cheapest is not necessarily the best deal. You have to remember the hosting and structure of the eBay design is going to change the face of your eBay shop and listings which are your selling point.

In choosing an eBay design I would consider:

- The usability of the design, does it promote easy navigation?

- Does it work across international eBay platforms (eBay can change the rules for different countries, so make sure the countries you want to list to, you can see examples of the design working)

- Where is it hosted. This is a tricky one. As with e-commerce stores you can either pay the designers to host it for a maintenance fee which means you are subject to their downtimes, or host it yourself. There are advantages and disadvantages to both. If it is self hosted, you might need to acquire a bit of knowledge on web hosting. However, you won’t be held to ransom by your eBay design company, and have full access to the design you paid for. If you self host, the trouble of hosting is taken away. So check their uptime guarantee and what kind of compensation you are entitled to if you ‘go down’ and loose sales as a result.

- What d0 their previous customers say? Can you get in contact with a real user (as anyone can make up testimonials!)

- Do they integrate with eBay automation systems like Marketworks and Channeladvisor (AKA marketchannelworksadvisor, I don’t know the new name is so long I can’t remember it)

- Does it look consistently nice? If they leave a credit link on the eBay shop then you should be able to Google them to see what te bulk of the designs look like. Watch out for block like image splicing, and check if the design still looks the same in Firefox as well as Internet Explorer.

- Click around the example eBay shops and listings. Never take a design at face value. Check the category links, the about me page etc. You would be amazed how many eBay shops I see where the category links don’t work and you are stuck.

- Never invest in eBay design above your means or before you have tried eBay as a business. I also visit eBay design websites a lot and it pains me to see the ‘This shop no longer exists’ message from eBay when I try to view this amazing looking eBay Shop, that has increased buyer traffic 100 fold. (OK I exaggerate on the 100 fold, but some claims do tickle me)

- Never believe a design company is the number one, unless they have been verified by an independent watchdog, and the BBC said so. Debbie from As Was commented on the tendency for a ‘Mystery Guarantee‘ from the ‘The #1 Ranked eBay Store Design Service‘

- If they claim that no one else in the world can offer the same service, then see the post above. I bet Coca Cola thinks its sells the best brown, carbonated gut rot in the world, but hey I am going through a Pepsi phase. It is fine if they want to claim it or even believe it, but you don’t have to buy it.

- Beware of companies that copy the designs and code of an existing company. If you like it, go with the originals. It is just less risky, and you won’t be in fear of legalities.

- Be careful you are not being offered a ‘custom, tailored solution’ that really is just a template system. If you want that then Seller Source Book or something similar is what you need. You will be able to tell if they are using a template system by taking a look at all of their examples. Changing the colours and the header image is NOT a custom design. (not in my books anyway)

- Can you speak to a person? Do they have customer support? If not, do not spend more that you can afford to loose.

- Do they offer training on their template? Is it easy to use? You don’t want to be editing lines of code, as you will break your design!

I think that’s it for tonight. I have do a least an hour on my Web Applications Development project tonight as I have HTML validation ‘warnings’ on my site and they are driving me mad. Mad I say!