Ditch the Rotating Banner; Here’s a Better Idea! – Coach’s Tip of the Week

Tip of the week badgeSomewhere in the deep recesses of my skull my mother's voice was echoing, "If Johnny jumped off a bridge, would you jump, too?"

I seldom listened to her when I was a kid, stubbornly going my own way. After all, not only had Johnny never jumped off a bridge, no kid I knew ever had. I had no clue where you could even find a bridge in the Baltimore suburb that I grew up in!

And, of course, the answer to that question would depend a lot on what happened to the mythical Johnny after he jumped off of that mythical bridge.

It was there; though, that voice nagging at me when I decided to join the rest of the sheep and go with the new trend - rotating banners on the home page. As cool as they may look, I kept asking myself, "Who ever sits through to watch all of these slides?" I know I don't!

I didn't listen to myself and reject walk-on videos when they were all the rage a few years back, either. Those sure turned out to be right up there with auto play music when it comes to being a traffic trampoline. One of these days, I'm going to go with my gut. If something doesn't make sense to me, why do it? If I find something annoying, surely there are others who will, too. When I'm annoyed by something on a website, I leave!

In last week's Tip of the Week about heatmaps and conversions rates, Shane Jones advocated ditching animated banners at the top of your pages that featured products because nobody sits through the whole "movie." If you want to feature a product, feature it; don't hope that people will be looking at the page at just the right time and have fast enough reflexes to click on it before it disappears.

I decided after reading that tip to do a little check of my Google Analytics - something I admittedly do far less than I should. Sure enough, since the start of the year, my beautiful home page rotating banner had referred zilch, nada, nothing, ZERO people to the product pages featured in that rotating banner. That did it; it was time to make some changes. I was going "old school" - static banners only. I also made a solemn oath that I would from that time forward listen to that nagging voice in my head.

It would have been pretty easy to grab one of the banner images and simply replace the rotating banner with a single product banner. The problem, though, is that I had two brand new products that I knew would be bought if I could get people to notice them. The "New Products" panel underneath the banner wasn't doing it and neither was the rotating banner.

I needed a static banner that would feature both of the products, yet still have each product clickable and take people to the proper product page when they clicked on it. Yes, I could have done this with image mapping but that would have made for a pretty complicated Tip of the Week and I wanted a solution that was simple enough that anybody could do it.

So here goes. Here's how you can do what I did and create a static banner with multiple products that, when clicked, will take you to each individual product's page:

Edit Your Old Banners to Make Them Half the Width

I should state right off the bat that I create all of my own banners, so this part is a little easier for me than it might be for others. Although I can't even draw a stick figure properly, I've managed to teach myself enough image editing skills over the past 10+ years to at least do a half-decent job of designing a workable banner.

I won't get into how I actually edited the original banner images that I had made, but in case you are wondering, my go-to image editing software is Adobe Fireworks (about $129.99) and I also use the free Gimp image manipulation software. You may also want to take a look at a post Kristi Hines made this week on the Big Commerce blog about other great, free image editing tools - 6 Tools to Help Non-designers Create Great Images.

Assuming you can narrow things down to just two products, you're going to need to create banners that are half the width of what your old banners were so that you can fit two of them side by side. If you want to go with three products, you'll need to make them 1/3 the width.

I started with these two banners:

eleaf-banner

winder-t3s-banner

After cutting them in half, rearranging and resizing things as well as reversing the background image on the Winder-T3S ad, I had these two images, which were half the width of the old banners. To make sure that they merged perfectly, I placed them side by side in my image editing software and then saved them as individual images when I knew they would mesh perfectly:

combined-eleaf-winder

That's exactly how I wanted it to look on my home page - one banner that was really made up of two separate images. By doing it like this, I could attach a different link to each image. (In case you're wondering, I never really care if only the button is clickable. As long as when you click, anything on the image takes you to the right page, I'm good with it.)

I uploaded the two images to my shopping cart and made note of the URLs where those images would reside. Now, all I needed to do was set those two images side by side on the home page - something that is easily done with a table.

Create an Invisible Table Container for Your Images

Now, I know enough HTML to create a basic table and I could easily have created it, line by line. I have enough going on in my brain (with all those voices echoing, and all) so why think when I can just let something else create the table for me?

It took a whole lot less brain power and less than a minute to set up my image banner table using my old standby - the free CK Editor software. For more information on using CK Editor, see our Tip of the Week - Creating Tables the Easy Way.

I erased everything that was in the HTML editor by default, clicked the table creator icon and set up my new table. I wanted a table with no border and no cell spacing or padding so that the images would smash up against each other, side by side.

I set my rows at 1, my columns at 2 and the border at 0. I set both the cell padding and cell spacing at 0, too. It is very important that you set the table width to be exactly the combined width of your two images. Otherwise, the table will automatically resize to the maximum width of your page, which could leave a gap between the images. In my case, each image is 318 pixels wide, so their combined width is 636 pixels (318 + 318 = 636). There is no need to set the height. Then, I hit the OK button.

ck-editor-table-properties

Now, I click inside of the blank left column and then click the image icon in the editor. I enter the URL for the first image that I uploaded to my eCommerce store earlier, enter some ALT text for that image and hit the OK button. There's no need to monkey with the image size unless you added wrong in the previous step. My left image appears in the left column. I then click inside of the blank right column, click the image icon in the editor and repeat the process for the second image.

ck-editor-image-properties
Next, I just need to make each image a clickable link. I click the left image in the table and then click the link icon in the the editor. I copy the URL of the product page that I want people to be directed to for the left image, paste it into the URL box of the editor and hit OK. I repeat the process for the right image in the table.

ck-editor-url
Finally, I just need to grab the source code. Click the source code button at the top left of the CK Editor and copy the table code. My code looks like this:

<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:636px">
    <tbody>
        <tr>
            <td><a href="http://www.e-cigexpress.com/ismoka-eleaf-mini-ikit/"><img alt="Discount iSmoka eLeaf Mini E Cigarette" src="https://www.e-cigexpress.com/product_images/uploaded_images/eleaf-ad-small.png" style="height:295px; width:318px" /></a></td>
            <td><a href="http://www.e-cigexpress.com/winder-t3s-starter-kit/"><img alt="Discount Winder-T3S E Cigarette" src="https://www.e-cigexpress.com/product_images/uploaded_images/winder-ad-small.png" style="height:295px; width:318px" /></a></td>
        </tr>
    </tbody>
</table>

Please Note: For some reason, CK Editor always inserts a paragraph break under anything you create. Don't copy that paragraph break code unless you want a big gap between your image and the next thing below it on your home page. All you need to do now is paste that code where you want your banner to appear on your home page and you're done. You have a banner that links to two different products.

The Result

Since things on WordPress blogs, which is what this blog is on, never render the same as things on a real eCommerce website, you'll have to click here to see the finished product.

The day I changed the ad from a rotating banner to this static one, I received two orders for the product on the left side of the ad and one order for the product on the right. Although they are new products and have only been on the site for two weeks, these were the first orders EVER for those products. In this niche, people constantly want the newest thing, so two weeks is an awfully long time for new products on this website to not be purchased.

That's all the proof I need; it only makes sense. People are smacked in the face with these two products immediately when they hit the home page. They don't have to wait for them to appear. They don't have to realize a bit too late, "Hey, what was that? I might want that" and then have to wait for the "movie" to cycle through and start over again. (Yes, I realize that you can click the buttons on an image slider and go to any image you want. I assure you; the average consumer is not that smart!)

Before you leap at the next new thing everybody is doing, thinking, "wow, that's cool," stop yourself and ask whether or not it makes buying something easier on your site or not. If it doesn't, stick with the tried and true. Johnny may never jump off the mythical bridge but plenty of people will jump off of your website, never seeing the products that you really want them to buy!

Share The Knowledge!

FREE TRAINING:

Create a Profitable Store in 30 Days

If you want to make serious money online, you need to follow a proven game plan.
For a limited time I'm sharing the process I use to create 6-figure profit store after store, FREE.

Here's what you'll learn...

  • How to choose a killer niche with massive potential
  • How to source products in any market
  • How to drive unlimited amounts of free traffic

The first lesson will be sent immediately!

100% privacy, I will never spam you!
The following two tabs change content below.

Scott McKirahan

Contributor at StoreCoach.com
Scott McKirahan is a full time owner of several successful e-commerce websites and has been involved in SEO since the early 2000′s. He has been published on a variety of websites with articles ranging from politics to sports to SEO and is a member of several website related forums where he often goes by the name “Scotty Mack,” “Scooter” or some variant of those names.
  • Barbara

    Interesting stats. Apart from the two-ad split detailed in the post, what template do you suggest for BigCommerce users? It appears that many of their templates have a slider, and the same appears to be the case for Volusion and Shopify. Suggestions for a template switch?
    Thanks.

    • storecoach

      Honestly, it doesn't matter all that much which BigCommerce template you use. We have some stores on a customized Muchen theme and other stores on a customized Classic Hip theme. What's important is having the components in place that are important to you, not so much the theme you are using.

    • http://websitecash.net/ Scott McKirahan

      You can easily remove the sliders on any of the BigCommerce templates, so whether they have a slider by default or not is unimportant. I have set up a half dozen BigComerce sites and have used a half dozen templates. I go with whatever one seems to fit the mood I want to create for that site. I don't worry about colors because I can change those in the CSS. You can change three column templates and pages to two column or one column ones, too. More than anything, I look at the navigation menu at the top because that's the hardest thing to change.