Tips for designing a strong above-the-fold section
1. Showcase the advantages of your brand and product
The use of inspiring lifestyle images, colors, videos, and other design elements above the fold will convey overall brand identity.
For a product-focused above-the-fold section, the hero should display the product and the tile just below the navigation bar should include copy explaining the utility of the product along with a call to action (CTA). A good option is to include a shoppable image, since it will reduce the number of clicks to purchase while displaying the product in a realistic environment.
2. Define a simple navigation
Dividing products into categories is a useful way to establish pages and sub-pages of the Store to create organization and reduce friction for customers. With category pages, customers have a greater motivation to browse the Store. For this reason, we recommend having at least three such pages.
When creating categories for the navigation bar, keep the titles as short as possible to avoid overwhelming customers. Lengthy category titles can also reduce the number of categories that appear.
Please keep in mind the navigation bar has a different experience on mobile. While on desktop, the navigation bar is rendered horizontally. On mobile, it appears as a vertical drop-down menu displaying all the pages and sub-pages of the Store.
3. Avoid clutter
Avoid adding too many design or text elements to the hero and the tile sections. The cleaner the Store looks, the more effective it will be. Remove elements that could steal attention away from the message and shopping experience, such as unnecessary text in the hero or tiles below the navigation bar.
4. Make sure all text is legible
To maintain a good customer experience, consider the legibility of the logo and the text in the hero and tiles.
If the logo contains small text, it may be difficult to read, particularly on mobile devices. Text that is challenging to read on desktop will almost certainly be illegible on mobile. In this case, consider placing the logo only in the hero and hide it in the navigation bar.