As you may have learned while getting started, it is possible to customise certain aspects of the storefront. One of the options is to use your own logo image instead of a plain text name. When you upload a logo, the image will replace the default storefront title inside the top navigation bar.
Getting web pages to display correctly can be a tricky business. There are so many things to keep in mind. Below we have highlight a few things you can do to ensure your logo is optimally displayed for all visitors.
1. Wider is better
The storefront's navigation bar is very wide, but unfortunately not very high. This can make it a bit tricky to get the logo to display at its best.
As you can see from the above example horizontal logo's work the best. The exact dimension of our example logo is 360px x 40px. It may not always be possible, but by adapting your logo to be wider you will get a much better result.
2. Remember mobile
Although wider is better, you cannot go too wide as this will affect visitors using smaller devices such as mobile phones. In testing the above example, we found the logo too wide for iPhone 5 users.
3. Check the height
The maximum height that the logo can go is 40px. Size your logo to be within this constraint.
4. Background colour
For best results, the background colour of the image should be either transparent (PNG format support this) or match the navigation bar colour. This will ensure that the image does not clash with the navigation bar.
5. Primary colour
If you have a transparent background image, it important that the logo's primary colour is light in order to stand out in the typically dark colour of the navigation bar.
6. Image file size
Always try to keep image file sizes as low as possible, as this directly affects the time it takes for pages to load for visitors. The larger the image filesize the longer the page will take to load. Our logo, for instance, is 12.7kb.
That's it. We hope the above points provide some useful tips when navigation the weird and wonderful world of the world wide web.