When it comes to eCommerce websites, design plays a crucial role, no matter what platform you use. The design of your website is supposed to make your site visually appealing, but it also has to lead potential customers through your site and help turn them into actual buyers.
While there are many e-commerce platforms available, BigCommerce certainly stands out thanks to their attention to detail and dedication to creating an eCommerce platform designed for conversions.
When customers can easily navigate your website, find the products they want, quickly add them to their cart, and see all the important information before getting to the checkout page, you have a much better chance of them converting.
That’s why it’s crucial to spend some time evaluating your store’s design and improving it before investing in paid advertising. Otherwise, no matter how much traffic you drive, all those visitors will abandon your site without making a purchase.
In the previous tutorial in this series, you learned how to set up a premium BigCommcerce theme and customize your online store setup:
In today's post, we’re sharing 15+ awesome design tips that will help you take your BigCommerce store to the next level. Make your BigCommerce web design not only stand out aesthetically, but convert great as well.
15+ BigCommerce Design Tips: To Make Your Online Store Great
Every element on your website, from product images to navigation menus; plays a role in a visitor’s decision whether or not to buy your product. Here are our best BigCommerce web design tips to help your store attract and convert more visitors.
1. Keep Your BigCommerce Design Clean and Organize
Just because your store is online, doesn’t mean you can arrange your products randomly. Think of the overall experience you want your customers to have when they visit your BigCommerce store. If you organize your products into proper categories, customers can easily see the different product types you offer and find out which products are currently on sale.
Keep your product descriptions and prices clearly labeled and use a grid layout to keep the overall page layout looking neat and tidy. Avoid putting too many products on your homepage or in one row and instead opt for large images with fewer products. That will add more breathing room around each item.
2. Make Your BigCommerce Site Easy to Navigate
Your menu is one of the most important parts of your website. It helps customers get from one page to the next, which emphasizes why an intuitively structure navigation menu is so vital.
Avoid adding too many links in the main menu and instead opt for a drop-down or a mega menu that will allow you to add more links that lead to various product categories. Another effective way to facilitate the navigation around your site is to use a fly-out menu that appears on hover.
Thankfully, there are plenty of BigCommerce themes such as Modez that come with a pre-built menu that will help you make the shopping experience better for your customers:
Discover more great BigCommerce themes on ThemeForest, or browse through our curated selection of the best for 2017:
3. Make It Easy to Get in Touch
There are times where your customers may have questions about a specific product or accepted payment methods. Make sure they can easily find your contact information and get in touch with you. That way you can answer their questions and help them come to a buying decision.
4. Add Customer Reviews
According to research, 61% of online shoppers read customer reviews before buying a product. Customer reviews can help you drive sales and increase conversion rates. That's because potential customers will be more inclined to buy if they see other people have been happy with the same product. In fact, adding customer reviews could boost your conversion rate by as much as 4.6%.
Josie Maran, another e-commerce site using BigCommerce, displays product reviews below their product descriptions, which adds more credibility both to the store and to the products themselves:
5. Use a Search Bar
Some of your customers or visitors may already have a product in mind when they come to your site. If that product isn’t immediately visible on your homepage, those visitors will more than likely want to search for it and if they can’t find a way to search, they will go somewhere else.
Don’t leave this one up to chance and hope they will use a navigation menu to look for it. They don’t want to wander from one category to the next, they want to find out if you have the product or not. Make sure you add a search bar to your site so that it’s always visible.
6. Add High-Quality Images
One of the biggest differences between a physical and an online store is the fact that online shoppers can’t touch the items nor try them on to get a feel for them. Instead you have to rely on your product images to convey how the product looks.
The images used on your site should be of high-quality, without any blurriness that would ruin the perception. Consider creating a gallery for each product so visitors can see the item from several angles and either display it as it’s being used or as it’s worn.
Also, make sure your images tell a story that fits your brand and helps drive sales. Learn how to set the scene and take great product photos:
7. Simplify the Checkout Process
One of the biggest reasons for a high cart abandonment rate is the long and complicated checkout process. Luckily, BigCommerce has a built-in one-page checkout that can do wonders for your conversion rates. You can further simplify the checkout experience by letting your visitors check out as guests.
Another way to simplify the checkout process is to ask only for necessary customer information and no more. If you’re selling digital goods, do away with fields that ask for the shipping address as it’s not necessary.
8. Optimize Your Store for Mobile
Another important tip to keep in mind is to make sure your store is optimized for mobile devices. This goes beyond having a responsive theme. It involves making sure your images scale nicely on smaller screens as well as your form fields. This makes it easier for your customers to click the correct field and fill it out.
Make use of BigCommerce’s built-in features for mobile shopping and add mobile payment solutions to your online store. This will make it easier to pay for your products using PayPal One Touch or Apple Pay and it can boost your conversions by up to 12%.
9. Choose a Responsive BigCommerce Theme
Directly in line with the tip above, it goes without saying that your theme should be responsive but it should also be designed with e-Commerce sites in mind. Luckily, there is no shortage of premium BigCommerce themes that have all the needed features: from mega-menus to product previews and filtering options.
10. Add Product Previews
A great way to improve the shopping experience for your customers is to enable the product previews or quick view. This allows them to simply click on any product and instantly see the description, price, images, and other product information in an image that pops up.
They don’t have to click through to the product page which saves them time, especially if they are in a hurry and want to quickly take a look at what you have to offer.
Carolina Panthers’ website does an excellent job of the quick view feature. Not only can you see the sizes and the price as well as an enlarged image, you can also add the product immediately to your cart.
11. Outline Your Online Store Policies
Once your visitors have spent some time browsing your store and are ready to buy, they want to know what your shipping and return policies are. If you don’t provide them with an easy way to find that information, they may give up on the purchase, especially if you make it hard to contact you on top of that.
Solve this problem by placing the links in your primary navigation menu that leads them to a page which clearly explains where you ship, which shipping methods are used, and how you process returns. Alternatively, consider creating a FAQ page that answers these questions.
12. Display Shipping Costs Upfront
Another study shows that shipping costs displayed too late are a huge factor that contributes to high cart abandonment rates. Instead of displaying them at the very end, ensure that your customers can see the shipping cost calculated into the final price of the product itself.
You can also add a shipping calculator below the product that gives customers the option to calculate the final cost before going to the checkout page. This will prepare them for what they can expect once they do check out and avoid unpleasant surprises.
13. Incorporate Your Branding Consistently
If you want to make sure your store stands out from your competitors, make sure to incorporate your branding elements into your website. Start by adding your store’s logo and a favicon so your customers can instantly recognize your site in their bookmark section or on social media.
Add your primary brand color to elements like the navigation menu, buttons, and links to keep the look and feel consistent. Seeing your brand elements all over your store will help build trust in your customers.
Envato Market's lineup of eCommerce marketplaces offers a consistent branding experience across our multiple online stores:
14. Keep “Add to Cart” Visible
The most important element on your site is the Add to Cart or Buy Now button. It should be visible and easy to distinguished from other elements. It’s worth it to pay extra attention to the button design, as a better design will convert more sales.
Use a contrasting color that will help the button stand out. Also, make sure it’s large enough on all display sizes so your mobile shoppers can click the button—without any zooming or pinching needed.
15. Let Customers Filter Products Quickly
Another time-saving tip that will improve the shopping experience is to allow customers to filter through your products, especially when it comes to sizes or colors. Even filtering through product type is a great way to help them save time and effortlessly find the desired product they need.
This will help you eliminate the frustration of finding out the product is not available in their desired size or color after they decided to buy it and are ready to checkout.
Nearly all BigCommerce themes come with product filtering options so all you have to do is choose the one that fits your store’s aesthetic.
Learn more about selling products successfully online:
eCommerceHow to Start Selling Products Online Successfully (In 2017)
eCommerceHow to Choose the Best Products to Sell Online in 2017
16. Add Trust Seals to Your BigCommerce Store
People can be hesitant when it comes to shopping online. One of their biggest concerns is whether or not they can trust your site with sensitive information. You can instantly improve your customer’s trust by adding trust seals to your site.
This will help ensure them that all the transactions are processed securely and their credit card and personal information will not wind up in the hands of hackers or scammers. Logos from well-known security oriented brands like VeriSign, McAfee Secure, TrustE or Better Business Bureau are often used on eCommerce websites to increase trust.
17. Keep Your Copy Short and to the Point
When it comes to your site’s copy, it’s important to share information about your it, but keep in mind that your customers won’t read an entire page of text. Instead, focus on using short paragraphs and bullet points to highlight the product’s most important features.
This will make your individual product pages look more attractive and allow customers to quickly find pricing information.
Improve Your BigCommerce Store Design With These Tips
A great BigCommerce web design is crucial for converting visitors into buyers. It helps you establish your brand and build trust. It also helps customers have a smooth shopping experience the entire time they’re on your site. Use the BigCommerce design tips above to improve your eCommerce store and be sure to check out our BigCommerce theme selection if you’re just getting started with online store setup. Best of luck!
Editorial Note: This content was originally published in 2017. We're sharing it again because our editors have determined that this information is still accurate and relevant.
No comments:
Post a Comment