How to Design a Homepage For Your Shopify Store (Guidelines & Examples)

Source: Ariana Grande's beauty brand Shopify Plus Website: REM Beauty

What’s the fundamental purpose of a Shopify store's home page, and how can you rework yours to function well, inspire customers and generate sales? Within the first 3 seconds on landing, you should know what the store sells and who it's for. Remember that Shopify Plus home page primarily exists to get people to browse, understand what your store sells and view products. When approaching a new project, designing the Shopify homepage for our clients is one of our favorite aspects of the process, and the blueprint for the overall design of the website. We aim to seamlessly blend eye-catching editorial content with a compelling, commerce-forward approach. In order to build a successful brand in today’s landscape — it's important to foster empathy, know your audience, and listen to what their needs are. We feel that Shopify stores are the vehicles that drives those goals.

Navigation

To start off, the store navigation should be carefully considered. Primary navigation should focus on browsing the product catalog and link to collections, not on the store’s branding or content marketing. That means that primary nav links should go to category & product pages, not the blog or about pages. Navigation should be sticky on both mobile and desktop, meaning that the header remains stuck to the top of the screen as the customer scrolls. If you are offering multiple currencies then having a dropdown currency selector flag with the top 4 countries your shop sells to is key.

Banner Image:

Next, the banner (also called hero image). People use your home page’s banner to determine what you sell, what you might have on sale, and your overall brand values. Your masthead should include a full-bleed photograph, text should be text, not text superimposed over an image, and there should be a primary call to action in the form of a colored, opaque button with real text. Also, to ensure it's mobile friendly, ensure that the main banner image is not covering the full height of the browser allowing the user to see the content below the banner. Here's a great example of a banner image with announcement bar: 

Announcement Bar

Use the announcement bar to showcase discounts, campaigns, inventory updates, or maintenance-related information. Including this information helps build trust for the end user. We suggest you make sure the text is clear and legible - not too small, bolded, and stays on one line on mobile and desktop. You can also flex your creativity muscles and include fun brand colors or some kind of animation element - like repeat scrolling or a carousel effect. 

Highlight a Collection 

Depending on the needs of the brand, we like to include a collection or two on the homepage, so that a customer can click through to a product if they see something they like. Above, we designed a collection display section for our fine jewelry Shopify Plus client, At Present. They are in the jewelry industry and sell multiple categories, like rings, necklaces or bracelets, so it's important that the customer has options when perusing the homepage. If the store has multiple categories then showcase the different categories within the first 1-2 scrolls. Products be sorted by most popular first and should be front and center. It's also nice to include a button where customers can move to a collections page and shop the entire catalog.

Brand Story Section: 

If your store has a strong brand/founder story then include a dedicated section with a clear CTA to "Learn More".

A beautiful and creative example of a brand story section on the homepage from Mercado Famous. Here, you can include an editorial image that includes your products, but is also visually inspiring for your customer, along with a small blurb about what makes your brand special, with a link to your about page so that customers can read more.

Highlight Products and Include a Product Grid like New Arrivals or Best Sellers:  

A well-executed product grid from leading cycling brand, Rapha:

Including a specific section for your product highlights like best sellers or new releases. This can push your users to take the next step if they see something they like. 

Blog Posts / About Section  

Content is a great brand building tool for your Shopify Plus store. If your store has a strong regular blog/articles, a slider article section is a must with a clear CTA button to "See More" linking to the blog page. Tracksmith, the running apparel brand, does a superb job of transfusing their online store with informative, engaging blog posts and is now one of the most cohesive modern brands of the moment. You can also choose to include a blog post section on your product pages, and most Shopify themes, like Impulse, have a blog post section available to use.

Frequently Asked Questions Section 

Including an FAQ is a great informative section to include so that customers have a better understanding of your product, especially if it's technical.

As Seen In Section 

If the brand is featured on major media outlets like CNN or Business Insider then include an "As seen on" section below the main top banner.

The Takeaway

We believe in storytelling across all channels. We live in a time when a logo is no longer enough, brands need to tell stories across the ecosystem and the Shopify homepage is a great way to illustrate your brand story and sell your products. Please note that addressing your customers’ needs is a continuous practice, so we encourage Shopify store owners to constantly create new and engaging ways to delight their store visitors.

Get the help you need to launch your Shopify store. Learn about our Shopify web design services here. Do you have a Shopify Plus store? We would love to hear from you. Learn more about our Shopify Plus agency services here.

Need some inspiration? Check out our post about luxury brands using Shopify, where we feature examples of luxury brands and retailers that stand out and shine using Shopify and Shopify Plus.