Most Popular Reads
- How To Write Product Descriptions To Grow Sales [Samples Below]
- 55 Ecommerce Metrics & KPIs You Need to Measure to Drive 10X Growth [Downloadable Tracker Included]
- 78 Best Ecommerce Website Design Examples & Award Winners
- How to Master Product Photography on a Tight Budget (We Did it With Less Than $50)
- 28 Ecommerce Conversion Rate Optimization Steps Guaranteed to Increase Sales
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.
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.
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.
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
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
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.
Less Development. More Marketing.
Let us future-proof your backend. You focus on building your brand.