Online store web design: homepage structure

Redesigning your online store is easier than you think. But before you select colors, fonts and images, you need a clear idea of what your homepage structure will look like. Ask yourself the following questions:

• What information is essential for my customers?
• Where and how can I position this information?

In this post, we outline the essential elements of any online store's homepage. Adapt them to your needs to design a homepage that increases sales and strengthens your brand image. Before we begin, keep in mind that: in most cases, the order of the information on the page depends on its importance and how it will be used. To understand what information your customers need, define your ideal customer.

Search bar

Make products easier to find with a highly visible search bar located in the center or top left-hand corner of your page. Many of your customers already know what they want so you just have to help them find it. On the mobile version of your website, try to position the search bar as close to the top of the page as possible: just after the logo and, ideally, next to the menu icon. Bonus: From the results page, let customers add the product directly into the shopping cart.

Shopping cart or basket

Adding products to a cart can be fun and even addictive! Use emotional design techniques to transform the shopping experience into something enjoyable and memorable. If your brand allows, adapt the tone of voice and word choice of your shopping cart buttons and calls to action to match the category of your products, seasons, campaigns, etc. Try using humor in your status bars and notifications -- but remember to avoid offending your target customer. If you apply humor to your text, don’t forget to keep the design of your buttons and links consistent so you don’t confuse customers. Bonus: Leverage gamification to encourage users to add more products to the cart. For example, indicate the amount remaining to obtain a free delivery in a progress bar or attract customer to unlock 'levels' based on the products (e.g., fan, handyman, expert).

Slider

Ideally a slider should include one fixed slide, and never more than three rotating slides. Use these slider to display seasonal promotions, new items and product selections or, even better, selections of discounted products adapted to a seasonal campaign (Father's Day, Mother's Day, Christmas, back to school, etc.). Customer should always be able to know what you sell directly from the slider. Display your products in a setting with an attractive background image that fills the space and an interesting text and call to action, adapted to the spirit of the promotion. Bonus: Discover some of the best examples of full-screen slider images in our article, 5 E-commerce design trends for 2015.

Menu

Most merchants think that the menu is the first thing that customers should see when they visit your website… but it doesn’t have to be. If the customers are browsing your site from a mobile device, it may be better to offer a search option and put the menu in an attractive drop-down. On larger screens, it is easier to browse and there is enough space to show all menu elements. But don’t get carried away and stuff the menu: it should contain at least 3 but no more than 7 elements. Focus on showing your product's main categories: e.g., MEN, WOMEN, CHILDREN. If you notice a specific product drawing a lot of traffic to your store, don’t hesitate to add it to your menu. SHOES, SCARVES and BAGS are examples of subcategories that you could use in your main menu. GIFTS, VACATION or NEW YEAR'S EVE can also appear in your menu depending on the time of year. The name of your campaign or current collection could also be used. Try to keep the menu items as short as possible: two words are fine, but one is better. If you have a blog, we suggest inserting it in the menu. In PrestaShop 1.6, you can configure rich drop-down submenus to display products included in the category as well as promotional banners. Bonus: 'About us', 'company', 'history' and similar pages should be kept out of the menu. We suggest placing them in the footer instead, because it’s where visitors expect to find them.

Filter options

Filters are normally used on the category and product pages, but they can also be used on the homepage. Let customers filter by size, color, season, occasion, use, or even cooking technique, among other things. Add all the filters that are helpful for customers shopping for your product. Sometimes it is better to refer to product uses than the object itself. For example: Frying pans -> for Frying Pots -> for Boiling Listen to your users to get the best filters for your product. With regards placement, it’s generally better to have drop-down filters. If the screen is large, you can display them permanently on the right side of the screen, in browse mode. Bonus: By default, place a filter on the homepage when the width of the shopper’s screen is greater than 1280 pixels.

Products on the homepage

Display the most interesting products on your homepage whenever there is a reason to do so. It is a good idea to have two points of entry (from the menu and homepage) to your product pages. It is important to tell customers - with a small title or label - why the product is on the homepage. Good examples of labels include: new items, best-selling items, discounts, last units in stock, etc. Always highlight the exclusive nature of the group of products or the limited amount of time that the products will be available. Bonus: Display a maximum of 10 products and activate the 'Product quick view' option to help customers browse products with few clicks. Users will add these products to their carts without realizing!

Categories

Continuing with the two points of entry or double entry strategy, include a block that shows off your categories with images or icons. Bonus: Select your most important categories or subcategories and, whenever possible, update them with promotions or product selections.

Social Media

Before the footer, include a section or several sections where customers can verify that you can be trusted; there is no better way than reading and seeing what customers say about you. Include images from social media, stories or any other content created by your customers. For example, a section can show photos with the hashtag of your last campaign combined with photos from the official brand book or photos of the recipes that you recommend in your blog and cooked by your users with your appliances. Make use of everything that you can think of to show that you have an audience and that others love you, and so they should too.

Footer

Here, insert your contact options and links to your social media. This section must visibly contain your website’s terms and conditions, particularly those related to shipping and returns. You can also include a newsletter field so users can receive news by Email and, if possible, specify how often the Newsletter is sent. Finally, use this space to discretely mention your security and trusted systems. If possible, include badges in black and white so you don’t distract customers from your page.

Conclusion

Customers form an initial impression of your brand and entire website just by looking at the design and organization of your homepage. Make sure that your website looks smart and professional because it is a great opportunity to gain visibility and trust and decrease your bounce rate. If you decide to redesign your online store yourself, follow this guide. In the next article, you will be able to learn more about designing an online store as we will look at the structure of the category pages and product pages. For more options for dressing, check out some of the templates available for PrestaShop. If you want a custom developed design, any of our associated web design agencies will be happy to help.