PrestaShop provides a basic theme that any online retailer can use to launch their online shop for free and make it a success. This theme has barely evolved in terms of both graphics and features over the last 4 years.
With PrestaShop 1.4.5 version, users have been able to use a new theme which we call “default”. These are the main improvements…
In terms of the look and feel, the new theme is low-key, classic and professional. The use of neutral colours is important (black, grey and white) as they suit all areas of activity. We chose not to go for warm (red, yellow and orange) or cold colours (blue, green and purple) as most people have their favorites.
Another highlight is the block background colours (e.g. block titles) to replace the glossy, web2.0 and tired effects of the old design. The theme is therefore less heavy visually.
In terms of the general layout we have chosen a fixed design (980px) centred on the page.
PrestaShop recommends that online retailers avoid fluid Google-style designs, the design being in proportion to your screen’s resolution.
Remember, a fluid design fills 100% of the browser window, the size of your screen’s resolution.
Amazon is the exception
Our classic header layout does not disrupt our user’s visit: logo on the top left and drop down shopping basket on the top right. The essence of a clear and friendly e-commerce website.
Currency and languages are in the form of a drop down menu on the top right so as not to get in the way of the header.
Lastly, the search engine is in the centre of the page for maximum visibility.
We have added a browser menu just beneath the header to separate the header section from the page content. This drop down browser menu is here to clearly highlight the categories.
We have also worked on font legibility, an essential part of any website. We opted for the standard Arial font as used by all sorts of browsers (except Safari which uses Helvetica).
Please consider having an information hierarchy (title, subtitle, heading etc.) so each page is uniform and consistent. The spacing, link colours and rollover effect should be consistent on each page.
“Consistency is the key”, Jakob Nielsen
The “call to action” buttons have also been redesigned and are now yellow (warm colour). This colour has only been used on the most important buttons such as “Add to Basket” and “Order”. The others are in black (less important).
Prices and discounts are in red. Contrary to colour symbolism, red does not represent danger in this case. We should consider the visual effect of items rather than what the colour symbolises.
In terms of new items, there is now a “Confidence” block at the bottom of the page (footer). It is here to reassure visitors during the order process and instil a sense of joy and confidence. The message must be plain, short and simple with clear icons. This block is configurable so you can have between one and five blocks (one block equals one icon plus text).
The “Star Products” block on the homepage has had a makeover.
The visuals are highlighted followed by the product title, description and price.
We recommend that all retailers use good quality photos. The product title should also be unique. If you have a quick look at the Archiduchesse website you will see imaginative names are used (Aubergine, Bleu Canard, Gris cons de pigeons etc.) to reel the customers in.
The total number of products appears between the breadcrumb trail (e.g. “there are X products”). This is the first piece of information that the visitor should see when landing on this page.
The filter (page numbering, sorting etc.) is at both the top and bottom of the category page for easy access whether the user is at the bottom or top of the page and if there is a long product list (scroll bar).
In terms of product listing on the Categories page, the display has been redesigned for a more user-friendly solution e.g. when comparing products. Perhaps you remember that the old design’s checkbox (multiple choice boxes to tick) was, clumsily, on the bottom right. The new theme’s checkbox is more visible and better positioned to the left of the product image.
The thumbshot is therefore ranked in order of importance: checkbox, image, title + description and lastly a box detailing the discount, price and “Add to Basket” button.
The product page layout is fairly standard with the photo on the top left and title, product description and features (colours, size, numbers etc.) on the right.
The product page should end with the Call to Action button “Add to Basket”.
This is an example of Eye Tracking or following the journey of the visitor’s eyes upon sight of the page. We read from left to right. The Z principle or the image below.
There is now a “Share on Facebook” link next to the product page. It is now essential to communicate via social networks (social commerce, F-Commerce).
The page template is 2/3 and 1/3 unlike the rest of the website.
We needed a lot of space for this page.
The panel to the right of the checkout must be kept for customer confidence, payment security or even a recommended purchase.
There’s still lots to buy once you’re at the checkout It’s what we call cross-selling or up-selling and is a great way to add more to the average shopping basket!
Another important point: The payment procedure stages must be detailed at each stage right up to payment. The user must feel supported and that the process is quick.
This isn’t the time to put your customer off so treat them like royalty!
Calling all fans of web design, ergonomics and user experience, we would like to recommend an excellent article in Smashing Magazine on the topic: http://www.smashingmagazine.com/2010/01/15/progress-trackers-in-web-design-examples-and-best-design-practices/
The creative process is coming to life. The project is not complete at this stage. The designers, integrators and developers work together for the perfect result. Each participant’s limitations should be considered. Everybody works towards the theme’s success.
We hope that you get the most out of this new standard theme!
We look forward to hearing your feedback to improve the project.