0

Your Cart is Empty

by Michael P. Hill March 08, 2016

A clean layout and design for your Shopify theme is essential to creating an effective and successful ecommerce website. However, finding a happy medium between a clean and simple layout and giving your users the information and content they need can be a fine line to walk — so here’s some tips on keeping your store clutter-free.

Start with a good base

Starting with a good, well designed Shopify theme that adds generous white space and clean typography is the key to building a solid foundation for an uncluttered store and shopping experience.

When evaluating Shopify themes to use for your storefront, be sure to pay special attention to spacing, especially in mobile views. By definition, mobile versions of Shopify stores often make use of tighter spacing, but a good, effective design will find a happy medium between too much and too little. Preview the collection, product and blog pages on mobile as well as the home page, and pay attention to any odd gaps or layout changes that could make the interface trickier to understand or navigate on smaller screens.

Remove backgrounds from photos

Removing the backgrounds from your product photos can be a great way to reduce visual clutter while also making your products stand out better.

White or transparent backgrounds are a familiar hallmark of a professional, clean Shopify site and you can put this approach to work for you to put users’ focus where it should be — on your products.

Isolating a product by removing the background does require some knowledge of image editing, but there are also numerous services that will take your raw photos and remove the backgrounds for you, typically for just a few dollars each.

As a plus, many of these services will also perform basic color corrections or even more advanced editing tricks, such as removing blemishes, and since photos are the best way to show off your products to online shoppers, the better the quality, and the more professional your store will look.

 

It’s not always necessary to remove a background, however; if you’ve shot your products on a consistent, clean background or color, that can keep things looking just as professional. Shopify offers some great tips on DIY product photography.

Pare down your navigation

Since your navigation bar appears on every page of your store, this is a great place to start reducing visual clutter that will carry through to every page on your Shopify site.

Reducing your navigation items to just the essentials can also make your site easier to use.

One good technique is to organize all of your products under a single “Shop” menu item using a dropdown menu. It’s also a good way to organize all of your store’s informational content such as your “about us” and contact page as well as terms and shipping policies, by grouping these related items in a submenu under a single main menu link.

If this proves to be a bit too restrictive to you, carefully consider each item you add to the top level navigation bar and the value it brings to helping customers locate the products they are looking for.

Add tabs to organize information

Another way to clean up your product pages is to organize product details using tabs. A common approach to this is to feature your most important product details in the first tab, since it’s visible by default. Then, you can use the other tabs for additional information such as product specifications, shipping information or guarantee and policy details.

Alternatively, you can keep your main product infodetails in the main description area and include more detailed information by using the tabs.

Tabs are especially effective if your products have highly technical product details or other information that most shoppers won’t find relevant but still needs to be included.

Select your typography carefully

Since text is typically the most common element of Shopify store pages, it’s important to select a font that’s clean, legible and well designed. Often sans serif typefaces such as Helvetica, Open Sans or Roboto have a bit of a cleaner look and can also be combined with other fonts, including free ones, for a professional feel.

There’s also research that shows that sans serif typefaces are a bit easier for shoppers to read on computer screens and mobile devices, so this can be a double advantage for your Shopify theme.

Also try to avoid using fonts that are overly intricate or extremely bold, both of which can add clutter to your store design. Using a condensed, ultra light or narrower, typeface may seem like a good way to make text fit better and reduce clutter, but the actual result is typically just the opposite and can make scanning and reading your page a bit of a strain for the shopper. Sticking to a basic sans serif for your body text especially will keep things neat, legible and clutter-free.

Consider every element

When setting up your store, it can be easy to go overboard and turn on every feature that’s included in your Shopify theme. However, be sure to consider what each part of a page adds to the overall experience of your store for your shoppers.

Think of it this way — every element you add should “earn” its place on the page by adding value by giving users access to helpful content, make shopping easier or convert browsers to customers. Enabling too many features can result in an overly busy page where elements are competing for the shopper’s attention, so try to streamline their shopping experience by including only those things that truly add value.

For example, there are many great options for blog excerpts in our themes, such as the ability to display date, author, tags, comments, continue reading links, etc. but if any of these are not particularly relevant for your own shop (maybe all your posts are written by the same person for example) then feel free to disable some of them for a cleaner look:

Michael P. Hill
Michael P. Hill

Michael P. Hill is a Shopify, Shopify theme, content marketing, digital marketing and product management expert based in Chicago. Follow him on Twitter at @michaelphill or connect on LinkedIn.

Need Support?

Please don't post support questions or issues as a comment on this thread, as we may not be able to process it in a timely manner. Instead, please visit our Support Center to browse frequently asked questions or submit a support request directly to our team.



Also in Shopify Theme Blog

Section by section: 12 ways to use the slideshow section in your Shopify theme
Section by section: 12 ways to use the slideshow section in your Shopify theme

by Michael P. Hill March 28, 2017 0 Comments

While you might think that the slideshow Shopify theme section is limited to, well, slideshows, it’s actually a versatile section that can be used for a variety of purposes on your store’s homepage. They are a great way to “tease” your shoppers with an intriguing image and bit of text and get them to engage more.

Read More
Turbo 2.0 is here — here's what's new and how to get it
Turbo 2.0 is here — here's what's new and how to get it

by Michael P. Hill March 22, 2017 0 Comments

It’s finally here — Turbo 2.0 with sections! This is the first major update to our latest and greatest Shopify theme, Turbo. So, what’s new in Turbo 2.0? How do you get the latest version? Learn about the new present theme style and all the great sections you can use now. Find that out and more in this post, plus learn how to save on this premium Shopify theme for a limited time.

Read More
Section by section: 20 ways to use the featured promotions section in your Shopify theme
Section by section: 20 ways to use the featured promotions section in your Shopify theme

by Michael P. Hill March 14, 2017 0 Comments

Featured promotions are simple and straightforward Shopify theme sections that rely on tried and true user interface design principles to pique shoppers’ curiosity into clicking and delving deeper into your site. Learn how to use the section over 20 ways.

Read More
News & Updates

Sign up to get the latest on sales, new releases and more …