Two smartphones next to a laptop mockup showing different pages of the FED by Alex website with white text next to them that reads "E-commerce website examples and how to make your own"

E-Commerce Website Examples and How to Build Your Own

In the world of online shopping, having an eye-catching and converting website is crucial to your businesses success. Not only is what you’re selling important to your buyers, but also how you’re selling it to them. 

A seamless user experience and a custom branded site can help you stand out among the hundreds of other websites that are offering similar products to you. As a brand and web designer, I specialize in creating these strategy backed websites that convert.  

So, before you jump into the world of online sales, let’s take a look at what you need for your site as well as some real e-commerce website examples. 

Where to Build Your E-Commerce Site 

Now, before you even think about what your website will look like , you want to make sure you know where you are going to build your site in the first place. When it comes to e-commerce, there are multiple options out there, however, Shopify is almost always going to be your best bet for e-commerce website platforms. 

Shopify has so many different options for setting up your store and is one of the easiest platforms to continue to sell products on. While it can take a little bit to get your site up and running, once it is created, maintaining it becomes a breeze! 

Two Ways You Can Use Shopify to Sell Online 

There are actually two different ways that you can utilize Shopify for your business.

  1. Create a fully functional shop and website on Shopify 

First, you can set up an entire store on Shopify. 

With this option, you have all of your products, shipping information, automations, etc stored in Shopify and your site is also built on Shopify itself. There are so many different templates that you can choose from to build your site that give you a great starting point. Or, you can work with us to build your brand and e-commerce website on Shopify. 

  1. Create products buttons for your main website 

The second option you have is Shopify lite. With this option, you still have all of your products, purchasing options, etc built out in Shopify, but instead of having an actual website on Shopify, you get ‘buy buttons’. 

These are embed codes that you can put on pretty much any other website platform that allows you to add embed codes (like ShowIt, WordPress etc). These buttons will direct people to a Shopify checkout page, while still on your main website. 

This option is really best for those who are service providers, but want to sell merch or a few specific products outside of their services. You’ll see this in action below with my client Amanda Barkley Design Co. who sells her floral arrangement tools and pieces after events she puts on as a floral and event designer. 

Other options for e-commerce websites

While Shopify is the most popular option for e-commerce websites (and the one I recommend), you can also use platforms like Squarespace or WordPress. Squarespace has a native shop option that you can use to build out an e-commerce site. It has limitations for design, but an ease of use for those into a DIY build. 

WordPress has options such as WooCommerce that can be added to your site to allow you to sell products as well. However, you will need to ensure you have a good host with quick servers (and enough server space), along with a secure site for this to be the best option. 

What You Want to Make Sure Your E-Commerce Website Has

Clear Navigation 

Just like any other site, clear navigation is vital when it comes to your online store. People need to be able to find their way through your site easily, and get to the important information in just a few clicks. 

This means that at the top of your site, you should have a clear navigation bar that leads people to your main shop page as well as other important pages (like your about page, FAQs, or your contact page). 

Your navigation also extends onto your shop pages. There should be some sort of way for people to filter through your shop to find the types of products that they are looking for. There are a few different ways that you can do this. 

One way to accomplish this is to have categories that people can click through. This way if they are looking for a specific product or type of product, they can click that category and navigate right to it. 

You could also add filters for different price points, different styles, different age groups, etc. Think about your own shopping habits and what you would want to see on another site if you were purchasing this product and make sure all of those options are available to your customers. Then you can work these into your navigation and on the shop page itself. 

Easy Access to Purchase 

While this may seem intuitive, it is still so important to point out. It should be extremely easy for people to actually purchase your products. This means that there should be plenty of buttons, calls to actions, and callouts to your products throughout your site. 

With an e-commerce site, your main goal is going to be getting people to purchase your products. The easiest way to do that is by making it quick, easy, and simple for people to find your products and add them to their cart. 

If people are scrolling two to three sections without the option to click to one of your products (either through a callout for that specific product or collection or just a link to your main shop page), you are most likely missing out.

The same can be said for ways to pay for your products. You should make it simple and integrate all of the payment methods you can, from ShopPay to ‘Buy Now’ instead of only ‘Add to Cart’ buttons. 

Key Information for Each Product 

You also want to make sure that all the vital information about each product is listed out on the individual product page. Shopify makes this easy as you can pick what information you want listed on the page and that will get automatically pulled in from the product listing you make on the backend! 

Now, what information you actually include here is dependent on the type of product that you offer. If you are selling jewelry, you may talk about what materials it is made out of, length of chains, measurements etc. If you’re selling clothes, you may include what they are made out of and how to take care of them. A size guide would be another essential to link out to for all clothing products.

Again, think about your own shopping habits. What information do you look for when you are purchasing something? If you don’t find that information, does it affect your purchasing decision? Are you more likely to purchase what seems like the same item from a different store just because they have that information listed out? 

You can hide this information in different elements like drop down lists to make your pages feel less cluttered while still having all of this important information. This way the page is still easy to navigate, but your customers have all of the information they need before clicking add to cart! 

FAQs 

An FAQ page is a very important part of an e-commerce site and is a great way to give your customers a lot of information in an easy to digest way. My top suggestion for FAQs is to split them up by categories or types of questions. 

For example, you may have a section that answers questions specifically about your products, another section that answers questions about shipping and returns, and another section that answers questions about your company itself. 

This, again, goes back to user experience – making it easy for customers to find the exact information they are looking for quickly and easily! 

Now, this is a great place to put general information about your products and company, however, if there are questions about specific products that you get asked frequently, it may be better to include those directly on the individual product page. 

E-Commerce Website Examples 

Revival Beauty Tools 

Revival Beauty Tools, founded by Noel Walker, is an e-commerce website that sells makeup brushes and sponges. Not only did we want to create a site that focused on her products, but we also wanted to highlight her expertise and knowledge (as a beauty pro for over 14 years)

Along with the product pages, we included an FAQ page going over how to take care of the products as well as other important information (broken down into different categories to make them easier to skim), an about page going over her expertise and experience in this industry, and a blog page where she can share helpful tips and tricks for her customers! 

*This is a full Shopify website build

View the Live Site Here 

Amanda Barkley 

As a floral design company, we created the Amanda Barkley Design Company site to not only highlight the products Amanda offers, but also her floral design services as well. This meant creating a site that had a services page, portfolio, and more in addition to the actual shop. 

For her site, we opted to build it out on Showit (as her services are the main offering she has) and utilized Shopify Lite’s buy buttons to connect her Shopify store. This allowed us to take advantage of Showit’s drag and drop editor to create a beautiful site, while also harnessing the power of Shopify for the backend of her store. 

View the Live Site Here

Basilla Rose 

Basilla Rose is a handcrafted jewelry shop selling everything from bracelets to earrings to necklaces and more, all infused with Reiki healing. For this site, we really wanted to make it easy for customers to find the exact products that they were looking for, so we created a navigation that was not only easy to use, but also laid out all of the different categories right off the bat. 

We used the main navigation to set up categories for customers to choose from directly to the exact product type (necklace, bracelet, rings, etc), collection, or material they were looking for. 

The individual product pages also included additional information like the materials used in each individual piece to keep customers informed and allow them to make a better decision for themselves! 

*This is a full Shopify website build

Fed by Alex 

Finally, Fed by Alex is a small-batch, homemade frozen food company that has new menus every other week that people can choose from. Because of the varying nature of their menu, we wanted to make it really easy for people to know one, what that week’s menu was, and two, how the process actually worked. 

On the home page, in addition to the many buttons leading you to the shop page to browse the meals, we have an entire section laying out that week’s menu. This allows customers to see the fresh new food as the many changes every two weeks. On top of this, customers have the option to purchase gifts for ‘Meals for Mamas’  and ‘Chef’s Choice’ for those in their lives in need of the extra nourishing support. Organizing the different options with Fed by Alex was a big part of our work on this project between branding and website design when she was getting her fabulous photos as well. 

We also have a section on the homepage dedicated to talking about how this process works and went a step further by creating an individual “How it Works” page to allow us to go into more detail about the process, pickup and delivery information, and why you should choose them in the first place. This is an essential page for a subscription based platform of any kind.

*This is a full Shopify website build

View the Live Site Here

Final Thoughts on E-Commerce Websites 

When you look at any successful e-commerce website examples, you’ll notice that they all have these things in common: they are easy to navigate, it is quick and easy to purchase a product, and all the information you need is right there. 

By having all of this information laid out for potential customers, you make their shopping experience better and are more likely to convert them into paying customers. 

So, if you are ready for just that, I’d love to help build you the website of your dreams. You can click here to learn more about my brand and web design services or head over here to get in touch with me!