Tips for Designing Effective E-Commerce Banners

Understanding how to use banners on your e-commerce store is important in promoting the right message to attract your customer, inform them and increase conversion. When content changes on a homepage, customers are excited to come back to your site to see what’s new.

Banners can be used in a variety of ways such as highlighting a specific product, service or sale.

When designing a banner, it is important to keep these three elements in mind.

  • One main Call to Action (CTA)
  • Captivating imagery
  • A short, engaging title with supporting copy

The purpose of a banner is to briefly inform the customer about what it is you’re trying to promote and encourage them take action. For this reason, it is recommended to only have one call to action that tells the customer what action you want them to take, such as: Shop Now, Learn More, View Details as examples. This is typically a button or a link and should be clearly visible. Also note, that most people are web-savvy these days, so saying “Click here” is often unnecessary.

More often than not, we see poorly designed banners that don’t convert well due to the fact that text is not legible. To avoid this, it is essential to selecting the right image. A good banner image highlights the product or service you’re promoting, but also has enough breathing room — sometimes to referred to as white space for text to rest on top of. If this is not possible, there are other ways you can make your text be legible such as placing a shape behind it, adding a drop shadow on the text or occasionally a stroke. Another way to counteract this to darken or lighten the image itself with a translucent overlay. Be sure to also select the right color for your text. Placing red text on a green background will be extremely hard to read as they are contrasting colors.

Lastly, it is important to focus on what it is you want to say. There should be a short, engaging title that is larger in size than your supporting copy. Supporting copy or benefits should also be included in the banner. This too, should be a quick, easy read. Try not to cram every single detail about the product or service you’re trying to promote, but focus on key features or highlights. Remember, the purpose of the banner is to get your customer to take action and click through to the next page. Use the landing page or product detail page to explain the details.

Below is an example of a poorly designed banner for a non-existent company offering a beauty product. We’ve highlighted the issues below.

Taking the same elements and applying the techniques above, we re-created the banner below.

As you can see, the second banner highlights the make up product, is easier to read and is less distracting than the first.

As always, if you ever need help designing your e-commerce banners, our dedicated design team at Swarming Technology is here to help.