Placing your logo in the upper-left

Browse your favorite 10 websites and look for where they link to their homepage. I'll bet that 9 out of 10 have a link to their homepage in the upper-left-hand corner of every page. I'll also bet that at least half of the links are the company logo.

Placing your company logo in the top left of each page and linking it to your homepage is an extremely widespread convention on the web. Chances are, when a visitor is using your site and wants to return to your homepage, it's the first place they'll look. In your CafePress premium shop, unfortunately, that spot is already occupied by a text link to the CafePress homepage. The links to your shop homepage are in the upper-right-hand corner and in the "breadcrumbs" at the top of each page.

Links

While this is probably sufficient for most visitors to find their way around, some are guaranteed to miss these links and get frustrated. As a result, I felt it was worth the effort to customize my shop to display the logo in the sidebar directly below the link to the CafePress home page. CafePress does not provide this functionality out of the box so custom HTML and CSS are required. Here is how I did it on my shop.

  1. Create a suitable logo

    You probably want your logo to fit within the sidebar so use an image editor to create a version of your logo that is small enough to fit. Mine ended up being 127 pixels wide and 79 pixels high but there is some wiggle room.

    logo

  2. Upload your logo

    The logo will initially display right in the middle of your page. That's OK. We're going to create custom HTML to display the logo but I want to let CafePress host it. Technically, you can skip this step if you want to host the image on your own site. However, if your site goes down for any reason then your CafePress site will display a broken image.

    Upload Logo

    Centered Logo

  3. Find the URL for your logo image

    View source and find the image tag that displays your logo. Grab the URL that hosts the image. In my case, it was http://logo.cafepress.com/nocache/8/2318378.jpg. After you know the URL, you can tell CafePress not to display the image.

    Page Source

  4. Edit your page header to display the logo

    Find the area marked "Header" on the CafePress Custom HTML tab. Add HTML to diplay your image inside of a link to your shop homepage. In my case, the HTML looks like this:

    <a href="http://www.cafepress.com/garagebandgear"> <img id="customlogo" class="custom" src="http://logo.cafepress.com/nocache/8/2318378.jpg" /> </a>

    Note id="customlogo" on the image. This must be there for the next step to work properly.

  5. Use CSS to move the logo

    We want to position the logo in the upper-left-hand corner of the page. If you don't already have a style block in your <head> section, then create one that looks like this:

    <style type="text/css"> </style>

    Once you have a style block, the only code needed to move your logo is this:

    img#customlogo { position:absolute; }
    Overlapping Links

    Your logo should now be positioned correctly but it's probably overlapping with the links in your sidebar. To correct this, we'll add some padding to the sidebar table cell. It needs to be at least the height of your image. I added an extra 11 pixels to the height of mine to provide some space between the logo and links.

    td.sidebarbg { padding-top:90px; }
    Centered Logo

That should be it. You should now have a logo on every page of your site that can be clicked to return to your shop homepage.