The Anatomy of a Fantastic Landing Page

Design fads come and go. Every year visual elements undergo iterations of change. Spin back to the good old days of 'web 2.0' and it was all about shiny buttons and gradients. Then it was all about vintage badges, filtered photography (thanks, Instagram) and washed out textures. Going full circle from ultra tech to retro took around eight years. Who knows what's around the corner? We would hazard a guess that as mobile devices become the standard user experience, utilitarian interfaces with elements of design without distraction will come to the fore.

Regardless of the popularity of single page brochure sites, sometimes with parallax scrolling (you know, when the images slide with the mouse scroll) one thing is for sure. E-Commerce has always been the crucial balance between design and function online.

Brochure sites and interactive sites can always get away with subjective design approaches. Print and graphic designers can still get away with a certain amount before marginalizing the functional user experience. Not the case with online shops because the singular focus is on the journey to purchase and as we all know, that has to be as slick as possible. Frictionless.

Unless your customers are coming from a campaign on a particular URL, most passing traffic will come from SEO, and you can bet that your primary destination is your home page.

Before carrying on, let's break down the primary sections of a basic shop.

1. Home Page

Pretty obvious. The section where you need to be as 'incredible' as possible. It's the window into your shop!

2. Collection UI

The 'grid' view of a collection. Sometimes three products in a row, sometimes four. Your product imagery needs to be very powerful because you can equate this with 'window shopping'. A poor product image lowers the production value of the whole shop, and you can bet that your competition has a better example.

3. Product UI

The product UI (User Interface) is the single product screen that your customer has chosen to take a closer look at. The 'Add To Basket' button should be prominent and supporting information that builds trust is going to aid conversion.

4. Basket UI

The Basket UI should be clear and concise. Make sure that the correct product images or thumbnails are present here because a product title isn't always going to cut it. It seems silly, but customers need visual prompts to remind them about the contents of their bag.

5. Checkout UI

Shopify has a brilliant standard checkout UI, so you don't need to worry about it. By default, Shopify uses Stripe right now, so the implementation is clean and straightforward on small devices too.

Testament's. Super Powerful Home Page

Going back to the anatomy of a landing page, Underground pay close attention to the fine line between design and the shopping experience.



Let's break it down from top to bottom.

1. Top Bar - Trust

Note the call out on the top navigation. Straight away you can build trust with information regarding your shipping and returns policy.

2. Branding

Your logo and strap line should be prominent but not massive. Many people suffer from the 'make the logo bigger' syndrome. Try to avoid it because every pixel matters.

3. Clear and Concise Navigation

Be aware that too many options create a barrier. Unless you are Amazon or a department store, you have the luxury of simplicity. Boutique VS Corporation.

4. Window Dressing

Your first banner or slider graphic needs to show lifestyle or practical use of your products. The visual quality of the image needs to inspire and create a picture in the mind of the customer that leaves them in no doubt that there is something in this store that they want to buy.

5. Catch-all Collections

Following on superb imagery, that defines your 'main' collections. Don't have too many of these. Keep it simple.

5. Best Sellers or New Products

Highlight individual products that act as a conduit to an impulse purchase. If these don't work, try swapping them around with products that don't often see the light of day.

6. Build Trust

Remind your customer that you offer an excellent service. Every nugget of trust is another 'tick' on the journey to purchase. Never under-estimate the power of faith.

7. More Collections

Now you can get down to specifics. These collections should follow a distinctive theme. These may be seasonal or of interest to a subset of customers. On a side note, you can never have too many collections as long as they are meaningful. The title that you give to your collection is great for SEO and should be a defined landing page.

Whatever you choose to drop in before point number seven and the footer is down to you. With Testament, you have tho option to take a feed from your Instagram account. The Instagram feed has proved to be hugely popular with our customers because they can tie in competitions with the store. Customers seeing real people wearing or using your product only enforces the trust element.

The footer section of your site is persistent. That means that it carries throughout the store and as such should always supply quick access to content that you feel your customer needs or is a lawful requirement. Make sure that there is a facility for customers to sign up for your newsletter.

With all of this in mind, you can be sure that our themes are prepared and ready to go, always enhanced to serve your customers in the best possible way. Check out the Testament theme here.



Richard Bairstow is the founder and CEO of We are Underground and is recognised as a leading authority in the Shopify Theme marketplace with 5 of the best selling published themes within the Shopify theme store and over 20,000 active Shopify customers.

Let's talk about this

Leave a comment

comments have to be approved before showing up