As a cofounder of the Shogun Drag & Drop Page Builder for Shopify stores, I have fielded over 1,000 page design and development questions from our users. Recently, I decided to put this knowledge to good use, and started a thread on the Shopify Forums to offer free advice to all Shopify users looking for site feedback. Most of the questions I’ve encountered have to do with landing page layout, usually in light of poor page performance and conversion to sales:
What kind of landing page is best for my store? How can I make my landing page more user friendly? How can my landing page drive more sales?
There is no exact formula or template for what makes a landing page successful at engaging visitors, but I have noticed a few features that the more successful online stores have in common. In this article I will break down the individual features of a well designed Shopify store landing page as an example to consider.
From top to bottom, the header menu is the first thing on the page, and If a visitor doesn’t know how to navigate your site, you have a problem. In this example, you can see that the product offering (photographs) have been clearly broken into 5 categories: Landscapes, Cityscape, Seascapes, Travel, and Other. The drop-down menu allows the visitor to filter even further by photograph Feature and photograph Region. This shows a very clear path to navigation, and the categories that are presented all have matching filter options that make sense.
Visitors love images, especially images if the images product they are considering purchasing. The full width Hero Image Slider Section is a great way to start the content of your page, especially if you have beautiful product photography (no pun intended for the example site). The slider keeps the images fresh and will hold your viewer’s attention. The full width image format gives the opportunity for a hybrid between a product photo and a banner ad. Include some text on the image that explains the value of your site. The slider should have click through link that drives the visitor to a product page. The Hero Image Slider feature is offered as a standard drag and drop element in Shogun’s drag and drop page builder for Shopify.
Always guide the user. If the user doesn’t know where to go next, or where to click to start shopping or browsing more products or other areas of the site, that’s an issue. This site (see above image) includes a great CTA with some great copy “Start exploring beautiful prints and frames” and a CTA button with “Start Shopping” button copy. Simple and effective at guiding the UX of the landing page.
55% of visitors will leave your site within 15 seconds, so a proactive exit-intent popup can be extremely useful at keeping the user interested. This site pushes a pop up using email growth app Privy for a 10% discount in exchange for their email address. That email address can be used for newsletter and email marketing funnel campaigns, and re-engagement if they decide to leave. doubling conversion rates and almost no negative effect on bounce rates.
This section is optional in some instances, but it can be nice to clearly articulate the value proposition of your store. Especially if you can add a personal touch or create a feeling of personality, this section can really “humanize” your business. Notice that this particular shop (top half of screenshot below) has incorporated images and a CTA to keep this section interesting.
In the lower half of the screenshot above, is an image based category section. This is a repeat of our 5 categories from the header menu: Landscapes, Cityscape, Seascapes, Travel, and Other. Generally, I don’t recommend duplicate info or sections (i.e. two “featured products” sections). However, because the categories are so small in the header menu (which can sometimes be ignored), a visual representation of the categories further down the page can be great for making the site navigation clear to the user. These images should be click through to product collection pages.
A featured products section is a great way to show off your top products on the landing page. Let visitors get a taste for what’s to come on the product pages and start shopping on your landing page. The Slider keeps a nice rotation of products which can be used to show (or give the illusion of) the depth of the store. These products should click through to individual product pages.
A smaller, but important point, is to include a link to a Contact Page on your landing page. Contact pages instill trust with your visitors, and are a must for any good eCommerce site. You can include this link through text at the bottom of your page (as shown above) or at the very top. Or both.
Okay, this one is cheating a bit, since it’s a just a link to a much bigger part of the site, but definitely worth noting. Blogs on Shopify stores are super integral to their SEO, so it’s important to maintain a Blog. Blogs are also a great opportunity to build brand and engage your visitors in the culture of your store. You can create completely custom Shopify Blog pages using the Shogun Drag & Drop Page Builder for Shopify.
If you have a Shopify store and are having trouble with engaging and converting the traffic to your store, try adding some of the aforementioned features to your site. If you want to play around with making changes without writing code, you can import your existing Shopify pages into Shogun's Drag and Drop Page Builder, and start editing them. You can also build new pages for your store using drag and drop elements and page templates.
Nick Raushenbush is the co-founder of Shogun, a drag and drop page builder and editor for any website.
Before moving into tech, Nick co-found and ran creative agency Glass & Marker, and made online video content for tech companies like Google and Yahoo!, and startups launching out of Y-Combinator.