Patricia Protopapadakis   November 22, 2018

Shopify Store Design – How To Design A Shopify Store That Actually Makes Sales!

The design of your Shopify store goes much further than aesthetically pleasing your visitors.

When done correctly, it can inconspicuously lead them down that conversion funnel bringing in sales for you and providing them with an experience they’ll continually come back for!

While considering the layout of your store, you want each element optimally placed on the pages while also providing a seamless and intuitive shopping experience.

There is nothing more frustrating and insulting than having to navigate a website littered with popups asking to subscribe to a mailing list or allowing multiple notifications. And where the heck did that item go that was just added to the cart, where is the cart? 

Having a layout that does not have a convenient flow will not only increase bounce rates, but those missed sales opportunities will also kill your search engine ranking.

I am going to go through the fundamental components of each page from the top down and provide recommendations for themes with built-in features with an optimal design that will fuel those sales!

It makes sense to tackle this in an organized and orderly fashion, so let’s begin with the initial page, the homepage.

You should have a shipping bar at the top of the page; even if you do not wish to offer free shipping, you can use it to display any promotions or storewide sales that are currently running on your store.

Utilize emoji’s to grab the attention of your customers.
The shipping bar should be complementary to your store’s color scheme.

Right below the shipping bar, in the header, you should have your points of contact such as your support email or phone number followed by the hours of operations.

Having these displayed for your customers to easily find not only shows that you take customer care seriously, but it will also confirm the validity of your store.

You want to have your points of contact clickable to make reaching out convenient for your mobile visitors, and you want to draw attention to them by preceding them with a call to action such as, “Have a Question? Call/Email Us!”.

It is unnecessary to keep the Sign into Your Account section in this area of your header.  It may not seem like it makes a difference on desktop, but once it is scaled down to mobile viewing, it takes up a lot of important real estate that could otherwise be given to more important elements.

Another feature you need to have in your header is an attractive logo.

Your logo will be the mascot for your brand, so you want to relay to your designer the identity and feel you are going for.

If you have a color scheme in mind, let your designer know that as well so you can have a logo that is compatible with the rest of the visuals.

Your logo should take up only about 30% of your header space, so make sure you design one that is simple and looks good scaled down into a little favicon, which is the icon you find in the address bar of your browser. 

I have included some examples below for a proper logo/header ratio!

Courtesy of Bombas
Courtesy of Oakland Surf Club

If you guys want more information on how to construct a creative logo for your store, check out our article on branding elements here!

Once the logo is designed, you can then create a cohesive color scheme for each specific design element.

You want to get the HEX number of the primary color of your logo from your designer and google it to find swatches of analogous and complementary colors to infuse into your site.

A third aspect of the header you should focus on is the navigation bar.

Your navigation bar should be displayed in a horizontal fashion below the logo.

The only items you need in your navigation bar are a home button, your stores’ catalog, an about us page, and a contact page.

In that order. 

You want to keep in mind that people read from left to right and top to bottom, so you want your pages arranged in a manner that displays the important tabs first.

The catalog should be arranged as an organized dropdown so that way your customers can easily search for what they need without having to travel through various pages and avoid unnecessary scrolling.

If you are debating on whether to invest the time in creating an About Us page, know that it is, on average, the second most viewed page on a site.

It gives you a chance to share your voice and explain why you started your business and what drives you to be the best at what you do. You can compel your visitors to buy from you instead of your competitors.

Although you have your customer support touchpoints located in the header, you should include a contact page in the navigation bar that consists of a contact form for your customers to submit support requests.

Shopify has a specific template for the form already generated for you to use when setting up the page on the back end, so make sure to take advantage of it!

Below I have included images to help get you guys familiar with the Contact Page set up.

Navigate to the Pages section of your Online Store and add a page.
In the bottom left hand corner you will see the option to select from a template, choose the page.contact option.

It’s as easy as those two steps shown above, you can basically do it with your eyes closed jumping on a trampoline.

Moving on…

Below your navigation bar, you should have a custom banner that promotes any sales or products you have.

They not only benefit your branding, but they also provide an attractive design element to your homepage and fill out any space. Make sure to have banners and images designed that complement your color scheme.

Your banners should include overlay text with a strong call to action leading your customers to a particular page to shop from!

Below I have included examples of attractively designed banners from multiple stores to use for reference.

Your homepage should also include a featured collection of best sellers or your lead items.

You should consider your homepage to be equivalent to a window display at the mall. You want to show off all of your new, attractive pieces that will hook the attention of your customers tempting them to come and shop.

The next design element does not necessarily appear concretely on the homepage, but it is advantageous when presented properly:

The exit intent pop-up!

Take note of the phrasing – exit intent.  You do not want to harass your visitors asking them to subscribe to an email list before they even have any idea of what you are offering on your store. 

It is annoying and they are just going to disregard it completely – making it a waste of time on both ends.

Phrase the pop up to say something along the lines of:

“WAIT! Enter Your Email Below To Receive X% Off Of Your First Order!”

You want to incentivize your customer to opt into your mailing list.  

The design of your pop up should be cohesive and congruent with the color scheme of your store.  Below I have included some images of perfectly crafted exit intent pop-ups.

Below your collection list, you should have some form of social proof on your store.

Adding some type of social proof to the homepage encourages people to continue to shop.

Whether it is including testimonials or integrating your Instagram, it makes your brand more authentic and can even cause to your visitors feeling the FOMO effect – they won’t want to miss out on a great opportunity that everyone else is in on!

The last aspect of the homepage is the footer.

Your footer should include your logo, a newsletter section, access to your social media pages, your legal pages such as your Terms of Service and Privacy Policy, support links and hours of operation as well as badges such as a 60 day refund policy or a security badge letting your customers know their private information is secure on your site.

Below is an example footer to reference, it includes every aspect I have mentioned and provides an extra outlet for navigating a store without the customer having to scroll all the way back up to the top of the page.

The next page to focus on is the catalog page!

It doesn’t matter how many collections lists you have; each catalog page should contain the same three essential elements.

First, you should be able to fit about 25 products per page.

That means you should have five products per row and five rows of products on a page. You want to be able to fit as many on a single page as you can, you don’t want to make your customers wait for various pages to load to see what you have to offer them.

Second, your product images should be uniform in size and composition.

It will make your store look sleek and polished and let your customers know that they can take you seriously.

Do not mix up the angles of the products; you should choose a perspective to use and stick to it for every image in that catalog.

Third, each of your product images should have a plain white background.

It gives each product a more refined look without them being littered with other logos or differently colored background.

There is nothing that dilutes the quality of your brands’ image than carelessly compiled product images.

I have compiled a list of product images below to reference! 

Next up, the product page!

Since we are on the topic of product images, I’ll start this section by saying that the image that populates first on your product page should be the same image that was displayed in your catalog.

Don’t use another image with a different angle or show a different color variety of the product; the photos should be congruent from one page to the next.

The image should also be aligned on the left side of the page with its various thumbnails arranged to the left of it.

On the right side of the page, you should have the product title, price, variant options, and add to cart button above the fold.

I am going to say that more slowly.

A.b.o.v.e T.h.e F.o.l.d

You want all of these critical factors to be displayed without your customers having to scroll down to find them, especially that add to cart button.

Below is an example of an optimally designed product page with all of the critical elements above the fold! 

All the important elements of your product page shown above the fold on desktop.
All the important elements above the fold on mobile.

Your add to cart button should stand out from any other element on the page.

You can use a color from your scheme to choose from, or you can go with green or black with white text. Those last two options are proven to convert, safe choices.

Your add to cart button should be the only actionable button on the page- that means, remove any wishlist buttons or social media sharing buttons. Do not give your customers an excuse to put off that purchase.

Below your add to cart button, you should have trust badges.

When people recognize well known, trustworthy brands such as American Express, Visa, or Mastercard, they will feel more secure about providing their credit card information.

Free Trust Badge by Hektor is an app that installs trust badges, like those shown above, right below the add to cart button. They are fully customizable so you can set the colors to match your stores color scheme.

Install free trust badges here!

Your tabbed product descriptions should lie underneath your add to cart button and the trust badges.

Having tabbed descriptions will make it easy to find pertinent information and give your product page a more structured appearance.

Tabs should include a general description, sizing chart (when applicable), shipping and delivery time and information, and a why buy from us section.

Below your tabbed descriptions you should have a section of recommended products or a frequently bought together section that will easily allow you to increase your average order value.

You want to recommend products that will be complementary instead of offering completely unrelated products; you will be wasting your time and the customers.

Your product reviews should be the last component on your product page. It is critical for each product to have reviews.

70% of shoppers base their buying decisions off of the reviews, and they trust the reviews of strangers to be as credible as someone who is close to them.

You can utilize SMAR7 Product Reviews to import reviews from Ali Express straight to your product pages! Save time and win a sale by installing SMAR7 Product Reviews here!

We have reached the last page in need of specific design tips, the checkout page!

Your check out page must be as straightforward as possible. There should be minimal whitespace and relatively no need for scrolling.

You should have the checkout button placed into locations:

above and below the items in the cart. Your checkout button should also have the same format as your add to cart button, as far as button and text color goes.

The product images of the items inside of your cart should be small.

Your customers were able to see the details on the product page, so you only need small thumbnails, you don’t want to take up space that can be allocated to other valuable features.

Your clickable phone number, email, or live chat should be accessible from your checkout page – in case your customers have any last minute questions they may need to be addressed before proceeding with the sale.

At the top of the page, you should include a progress bar to let your customers know how far along they are in the checkout process followed by a countdown timer to expedite the purchase.

Below the items in the cart, you should include customer testimonials or a mini why buy from us section to provide social proof and remind your customers about your excellent policies such as hassle free returns and money back guarantees.

Take note of the check out button located above the items in the cart along with a countdown timer.
Checkout button is also placed below the items in the cart with security badges to the left of it.

I know all of this information has overwhelmed you and you are probably at a loss of figuring out how to implement all of these features, that is why I have compiled a list of themes offering some, but not all of the features mentioned above.

The following two themes are free, and they do a dang good job for providing optimized layouts for no extra cost!

Debut

Pros:

  • Full-width banner display
  • Product call outs on the homepage
  • You can display customer testimonials on the homepage
  • The add to cart button lies above the fold on both mobile and desktop viewing

Con’s:

  • Low user ratings

Brooklyn

Pros:

  • Full-width banner display
  • Modern grid layout for collection lists on the homepage
  • Swatch layouts for variants
  • The checkout button falls above the fold

Con’s:

  • Differently sized product images
  • There is a lot of scrolling on the product page because each product image is the same size as the main image

If you don’t mind paying for a theme, you can work with the following that offers more features.

Prestige $180

Pros:

  • Includes a shipping bar
  • Has a subscription pop up
  • Full banner display
  • A product call out on the homepage
  • You can integrate your blog or Instagram
  • Offers tabbed product descriptions
  • Has a recommended product collection list on the product page
  • Checkout button falls above the fold

Cons:

  • The product page is dragged down by the images, which leads to unnecessary scrolling
  • The product description lies between the title and the add to cart button forcing it to fall below the fold

Pipeline $140

Pros:

  • Intuitive layout
  • Enables you to integrate your Instagram
  • Grid style layout of collection lists on the homepage
  • Minimal whitespace on the product page
  • The checkout button falls above the fold

Cons:

  • There is a cart pop up
  • The product description lies between the title and the add to cart button forcing it to fall below the fold

Are you still overwhelmed? 

Understandable. 

Building a successful Shopify store AND making it look beautiful is no easy task.

Not to mention, if you’re just starting out, you are bound to waste time with guesswork and rookie mistakes that burn energy you could have productively spent for other aspects of the business. 

If you want to skip the trial and error and have your store up and running correctly the first time around, check out our design service package!

This package includes a custom, high converting design and theme for a fraction of the cost of hiring your own designer and developer. 

You also get one on one time with our team of design experts who will personalize your site exactly as you envision.

Here are all of the features you get with our package: 

Custom Theme

A beautiful, high converting theme built to your specifications.

Brand Design

Including a logo, color scheme, fonts, and more!

CRO Strategy

An in depth conversion rate optimization strategy based on your niche.

Our package deal has helped hundreds of stores establish their brand and attract more customers, subsequently leading to jaw-dropping results like these:

Just one of the stores designed by our services doing nearly $2 Million Per Month

While our customers are making millions, it only cost them $2500 to get there.

All they did was invest a small amount of money upfront while the layout and design of the store did the rest.

If you are interested in getting the same results while skipping the trial and error phase, click the button below! 

Leave your Comment

Leave a Reply

Your email address will not be published. Required fields are marked *


This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Responses