How to: Insert a Logo into Your Bluepark Website Tuesday, 12 November 2013  |  Cate

Skill Level: Beginner

The Anatomy of a Bluepark Website infographic shows you how simple it is to make your online shop’s design and structure unique to your brand but, perhaps, you are wondering how to start putting it all together.  The easiest and most important area to begin with is your company's logo.  

The Importance of a Logo

Most established brands already have a logo and this should always be reflected on every media that promotes the company, whether it is flyers, email newsletters, billboards, company vans or shop fronts. It should always appear within the header of your website too. This will make sure those who are already familiar with your brand recognise it instantly but will also help to convince new customers that you are a professional, trustworthy company.

If you don’t already have a logo it is always advisable, if you don’t have the skills yourself, to have one professionally designed for you. If you are worried about the cost, remember this will be considerably cheaper than a website design and will become the one thing customers associate with your business for years to come.

See the blog post The Basics of Ecommerce Web Design - Part 1 for more detailed information about designing your logo.

Positioning Tips

It is generally expected that a logo will appear in the top left of the header and customers will instinctively look for it there. However, for certain designs, especially a header with very little content, a central logo is also acceptable. You will notice that the leading ecommerce websites all have theirs in the top left.

Make sure your logo image is resized to fit within the Header before uploading and try to keep it to a minimum size so that it doesn’t take up valuable selling space on the site. Generally a header should not be any bigger than 200px in height (remembering that this area also includes the navigation bar) so your logo should be resized to fit into this. Notice how little amount of space the Marks & Spencer logo takes up on their site.

Adding a logo to your website

In the template go to the Header tab and you can either add your logo in as the Header Background field or, better still, add it into the Header Content field where you can add a link on to it to take customers back to the home page.

1. In the admin console go to Site > Template Manager and click into your default template
   (this is one with the blue ball to the left of it)
2. Next to the Header Content field click on the WYSIWYG button
3. In the pop-up window right click anywhere within the main content and click Select All within the menu
4. Right click on the selected area and click Delete within the menu
   (Please note: this will remove all previous header content and code)
5. Click on the Insert Image icon

   

6. Click the Upload icon and select the resized logo file from your computer

   

7. Add in your company name to the Alternative Text field and click on Insert

   

8. Right click on the image and then click on the Insert Link within the menu

   

9. In the URL field type /index.html and click OK

   

10. Click on Send Changes at the bottom of the WYSIWYG
11. To adjust the positioning of your logo within the header select the required position within the Alignment field in the Header tab

    

12. Click on the Save icon in the top right and confirm the changes by clicking on the Green Tick

If you want to add in extra images, links or text into the header it is advisable to add a table into the header content first and then insert your logo as the above instructions to the far left cell. This will allow you to keep a controlled structure of the header and position each area more easily.