Ecommerce Design / Ecommerce Expertise

The Anatomy of a Top Selling Ecommerce Theme

/ 4 min read

SHARE

Most Popular Reads

The theme you choose for your ecommerce store is incredibly important. It is the customer’s first brand experience and exposure. It helps to determine the funnel your customer goes through in order to reach particular product pages and eventually check out. In all, it is the face of your brand –– aesthetically, at least.

When it comes to what works and what doesn’t for ecommerce themes, though, A/B testing is the general go-to. Change a color here, swap out a photo there, you get the picture. But, to get down to more of the nuts and bolts of what makes a good ecommerce theme, we took a deep dive into at what makes one of Bigcommerce’s top selling themes so successful.

Meet Athletic, one of the best selling ecommerce themes for Bigcommerce. As developers of the theme, the team over at Weizen Young made several conscious decisions based on our 10 years of ecommerce experience to create a design we thought deserved to be the base for thousands of ecommerce sites.

Already, the theme itself is increasing conversions and revenue for brands including SwingSetMall, Distinctive Guitar, WLAN Mall, Ellen Hutson and the examples used throughout this article.

Below, we break down our reasoning behind particular design decisions and why they work well for selling more online.

A Responsive, Mobile-Friendly Theme

With Google placing considerable ranking authority on a site’s mobile-friendliness, Athletic was built to be responsive –– meaning it adapts to any screen size. Athletic passes the Google test with flying colors, and it should. After all, it was built on one of the most battle-tested responsive CSS frameworks that exists: Zurb’s Foundation.

Not only does Google approve of responsive site design, but consumers do as well. comScore’s 2015 digital future in focus report found that when it comes to digital media, consumers are spending roughly the same amount of time on a site’s desktop version as they are on that same site’s mobile version. And these consumers expect consistency. A responsive design builds brand consistency into the CSS framework, meaning that no matter the screen size on which a customer is browsing your site, your messaging, look and feel are all still intact.

Screen Shot 2015-04-08 at 1.19.02 PM
Think those numbers apply only for digital media consumption? Maybe so –– but the best e-tailers out there position themselves as not just retailers, but lifestyle brands that make a statement both via what they sell and in how they sell it. Just look at The Honest Company or Tucker Blair, for instance. In fact, Tucker Blair’s entire site was built using the Athletic theme as the foundation.

Screen Shot 2015-04-08 at 1.19.55 PM
Want to see responsive design at work? Use either Responsinator or Responsive.is to see how your site, or any site, looks on desktop, tablets and smartphones.

Refined Header for Desktop & Mobile

Space is key for ecommerce sites, especially the site space living “above the fold,” a term taken from the print-newspaper industry. Yes, “the fold” occurs at different places on different screen sizes, but that doesn’t mean it doesn’t matter.

According to Nielsen, “What appears at the top of the page versus what’s hidden will always influence the user experience — regardless of screen size. The average difference in how users treat info above versus below the fold is 84%.”

Athletic’s design takes the importance of space into consideration. The header is designed to take up the least amount of vertical space possible on both desktop and mobile without sacrificing usability. It contains all of the key components of navigation (two navigation bars, search, logo, mini-cart, social icons, etc.) within 190px of vertical space. Even more impressive is that at small screen sizes, like for mobile, the header only takes up 150px.

Screen Shot 2015-04-08 at 1.21.25 PM
With such a thin header, you have lots of vertical space remaining for other key content, even on smartphones. Want proof? Check out C&T Publishing’s mobile site built off of the Athletic base. It contains a full search bar, navigation and still leaves ample room for content and gift guides.

Rock Solid Navigation for Desktop & Mobile

Yes, you need space “above the fold” on your site to fill with content that will keep a customer moving through your conversion funnel. Of course, once you have them hooked, navigation becomes the heart of any ecommerce site –– which is why maintaining a full navigation bar with dedicated categories is so critical.

Even with a refined header, the Athletic design keeps a full width navigation bar dedicated to categories. Because of that, merchants are able to place more product categories within the top navigation bar, helping site visitors locate their desired items as quickly and conveniently as possible.

Product Grid that Adapts to Your Images

Screen Shot 2015-04-08 at 1.22.22 PM
For ecommerce brands, it’s difficult to have a consistent looking product grid. Most of the time, product images are differing sizes and proportions. This makes product grid layouts typically designed to offer a nice, clean look begin to feel scattered and messy. Worse, so many ecommerce templates demo with perfectly sized images. This is just not a reality for most stores.

With Athletic, we’ve put a lot of time into creating a product grid that looks consistent no matter the length your product names or the size and proportion of your images. The product grid will always line up. This is done by calculating the height of the largest element in each row and then resizing the other elements in that row to match. Overall, you get a clean and professional looking product grid without all the work of creating identically sized photos.

Clean Product Page Template

Screen Shot 2015-04-08 at 1.23.13 PM
The product page template is the most important page on any ecommerce site. It can easily represent over 90% of your pages, so it was essential to get it right for the Athletic theme.

With Athletic, we gave 50% of the site width to the product image on the product page, allowing the image to dominate the majority of the space. Directly to it’s right is the buy area. This includes all the key information a visitor needs to buy the product, and nothing more: product name, price, SKU, options, quantity and add to cart. The result is that a visitor sees everything they need to buy all above that important “fold” –– i.e. without having to scroll.

Below the product image and buy area, Athletic displays the additional information customers often read along their purchasing path, including: product description, related products, customer reviews and product videos.

Additional Theme Considerations

Consistent Colors, Fonts and Spacing

Athletic is built from scratch utilizing CSS off of Zurb’s Foundation Framework. Why? Because it’s essential that CSS be controlled by SASS, a variable-based CSS. A variable-based CSS ensures consistent colors, fonts and spacing throughout all sections of a theme. It forces developers to standardize, and eliminates the possibility of implementing a quick hack to solve an issue. In all, a variable-based CSS means that your branding will remain consistent throughout the entire customer experience –– with no one off pages deviating from your brand’s pre-determined design features.

Integrated Style Editor

It’s important that a store owner who doesn’t know how to code can customize their own theme. To provide for this, the Athletic theme allows you to change colors, fonts and other settings all without ever having to touch the code itself.

A Foundation for Greatness

In all, the Athletic theme was built with the intention of providing ecommerce store owners with a site layout that takes all of their priorities into consideration. Your store design doesn’t have to win over customers with flashy graphics or cool features. Instead, your site design just needs to function in a way that provides for the most convenient browsing and checkout, no matter the customer’s screen size.

At the end of the day, your ecommerce site design is the first impression your brand makes. Make sure it is one worthy of a customer’s loyalty.

Leave a Comment
  • We liked the Athletic template because it is simply beautiful and easy to use. The Style Editor allows for some changes to the template without having to know code. The customer service is impeccable and emails never go unanswered. When we get ready to add customization to the template we will hire Sprout Commerce.

  • The Micro Data is included in the product page of the Athletic template. Here’s a link to see the results of a product page in the Athletic Demo Store in the Google Structured Data Testing Tool: https://developers.google.com/webmasters/structured-data/testing-tool?url=http%253A%252F%252Fathletic-demo.mybigcommerce.com%252Fmens%252Fnavy-single-speed-bike%252F

  • Paul Rice

    I have a megamenu I use often but it is a bootstrap menu and I don’t want to add the bootstrap framework to the website.

  • Paul Rice

    I was thinking more along the lines of other future updates, even the small things. There has to be a way for us to know what has changed.

  • Hi Paul,

    It’s a custom development job. What we do depends on how we want it to react at mobile and tablet, and also if it will be static or dynamic. We would provide the building of a mega menu through our hourly services at http://www.sproutcommerce.com

    Also, any other BigCommerce developer could do it, it’s not exclusive to us. We just probably could do it faster and better since we’ve done it before specifically for the Athletic theme.

  • At this point we can’t. We’ve talked to BigCommerce to see if there is away of making the changelog available when they merge the updates from our version of theme into the version they make available for customers, but at this point we haven’t heard back of a solution. It gets a little tricky with the permissions in GITHub.

    If you take a look at that article though, for Microdata, pretty much the only change will be using block of code near the bottom of the page. It’s a very quick thing to add in as defined. I’m not sure how well it works because we haven’t tested it, but based on the feedback in the forum post, it seems like it could use a little massaging.

  • Paul Rice

    Nice, a megamenu is also in my plans for the Athletic theme. May I ask if the MegaMenu on wlanmall.com was something that is readily available to download or purchase?

  • Paul Rice

    When you “update” the theme, can you provide a changelog or list of what was actually updated for stores that have it installed?

  • Athletic has a streamlined mini cart (just shows the # of products, no price) in that works in both desktop and smaller breakpoints like tablet and mobile. Some screenshots are attached.

    For the Mega Menu, we made the decision to use the fly-out menu system because it worked in a greater number of situations. It allowed a deeper level of categorization if you had a lot of categories, and if you had a few categories, it wouldn’t look strange. There are certainly situations where a mega menu is a better choice, but for majority of times, the system we’ve built adapts better. Having said that, we know of several sites that use Athletic as a base that have a mega menu. It’s just a question of doing some customization. Some of those sites are mentioned in this post:

    http://www.ionloop.com
    http://www.ctpub.com
    http://www.wlanmall.com

  • Hi Paul,

    The Microdata update looks like it was released about a week ago and only started working about a day ago based on what I’ve read in the forum post you linked. We appreciate that you’ve pointed out this upgrade because we hadn’t received any notification from BigCommerce and this is an important feature. We’ll be working at integrating it into a future update to Athletic.

    From what I can tell in that forum post it doesn’t look like any themes besides the ones who are built by BigCommerce have this feature integrated.

    I’ll reach out to BigCommerce to see if they have any integration notes to help accelerate the process.

  • Paul Rice

    I’ve been thinking of using the Athletic theme with a couple my BigCommerce clients. However, Athletic has not received a recent microdata update that BigCommerce implemented for other themes. Read more here: http://forum.bigcommerce.com/f5/microdata-now-included-in-bigcommerce-made-themes-23688/

Less Development. More Marketing.

Let us future-proof your backend. You focus on building your brand.