eCommerce Website Design

Some awesome examples of eCommerce website design

With today’s shoppers staying in and browsing online, it’s essential that you have an eCommerce website design that really works. From your home page to your checkout process, you need to be sure that everything is both simple and stunning.

Not sure where to start? That’s where we come in.

We’ve gathered up some examples of excellent eCommerce website design, and we’re going to show you what we love about their website, and why it works so well.

Haus

Haus is an apéritif brand based in Sonoma County, California. They offer a variety of fun flavors like Citrus Flower, Ginger Yuzu, and Bitter Clove. Haus also offers customizable memberships so customers can receive a new bottle of their favorite apéritif each month.

Let’s take a look at their website

Home Page

Haus aperitif home page

Haus’ home page is modern and clean. With their simple slogan and clear call to action, there is very little to distract customers from the ultimate goal: buying a bottle (or bottles). In addition, having testimonials from very well-known publications helps establish a level of trust and quality for Haus.

Shop Page

Haus aperitif shop page

Haus’ shop page maintains the same modern design as the home page, with just a little bit more flair. The apéritif bottles appear almost 3D, popping out from the photo behind them. It’s clear that the bottles are the main attraction, and they draw your eye in right away. The shop page also has a clear call to action, just like the home page. The names and descriptions of the individual products do not cloud the CTA.

Product Page

haus aperitif product page

The Haus product pages are just as elegant as the rest of the website, but they also bring some personality. When you select a quantity, a fun quip appears next to it. For example, in the photo shown above, we selected two bottles, and a line of text reads “One for date night, one for poker night.” If we were to select one bottle, the quip would read “For when you don’t feel like sharing.” These small details make a big difference in the way that a potential customer sees your brand. It may even make the difference between someone buying one bottle or six.

Check Out

haus checkout section

Now, Haus does not have a dedicated shopping cart page. Instead, they have a small widget that appears on the right side of the page. When you click check out, you are then taken to a separate page to complete your purchase. Haus has also included the option to add more bottles right in the cart widget, or remove products altogether. The widget approach can be helpful because it gives customers the opportunity to stay and browse your website after adding a product to their cart. Or, alternatively, if they decide they don’t want to buy your product, they can remove the product from their cart without having to move to a different page. This can save customers from feeling frustrated or trapped.

Why Haus’ Website Design Works

Haus has done a fantastic job creating a website without distractions. They use simple colors, dark, easy to read text, and sharp photos and product shots. Their call to action is clear on every page. This makes it easy for potential customers to not only follow the flow of the website, but to make purchases easily and successfully.

Key takeaway: Keep it simple and focus on your goal.

AVRE

AVRE is a women-owned tennis shoe brand. AVRE’S goal is to empower women and to be authentic and sustainable. They use recycled water bottles to make their tennis shoes and work to remind others in the fashion industry that responsible practices are important for today, as well as the future.

Here is a look at their eCommerce website design.

Home Page

AVRE home page

AVRE’s home page is bright and clear. They showcase a product shot that isn’t hidden behind text or lots of flashy scenery. This helps potential customers get a feel for the product within their first seconds on the home page. The page flows naturally from the product photo to the CTA button. The call to action is bold and clear, presented in a black box on a light background. This is a great way to aid conversions.

Shop Page

AVRE shop page

AVRE’s shop page is even more simple than the home page. There are essentially no colors on the page, other than the colors of the individual shoes. The page has little text- only the name of the shoe style and the price. Website visitors can scroll through the page to see the color and price of each shoe with no distractions. This helps showcase the products individually and give potential customers a “real-life” glimpse of the shoes.

Product Page

AVRE individual product page

AVRE’s product pages are very similar to their shop page. The only real color comes from the color of the shoe. This is a really eye-catching design, and it helps give potential customers an idea of the real shoe color. It also shows off one of AVRE’s brand values: authenticity. They don’t need anything flashy to show off their product; it speaks for itself. The call to action is also very clear as a black box on a light background, just like the home page.

Check Out

AVRE shopping cart

The checkout “page” on AVRE’s website is actually a drop-down widget rather than a separate page. It is very simple, and the flow of the page works very well. After reviewing your order, your eye is drawn to the final step: check out. AVRE provides multiple checkout options, which is great for appealing to a wider variety of customers. It is important to note that if you do choose to have a drop-down or pop-up check out widget, you want to have a very clear exit, like the large “X” that AVRE placed in the top right. Without a clear way to get out of the cart, customers can be frustrated and may just leave your website altogether.

Why AVRE’s Website Design Works

AVRE works because they don’t rely on a lot of flash to sell their product, and that reflects what is important to them. They value authenticity, so they show off their shoes authentically. Their text is clear and easy-to-read. They don’t try to hide anything, because they don’t have to. This makes potential customers feel good about what they’re buying, because they know exactly what they’re getting, and what kind of brand they’re getting it from.

Key takeaway: Be true to you, and let your products speak for themselves.

Warby Parker

Warby Parker offers eyeglasses, sunglasses, and contact lenses. They are a unique brand, offering customizable frames and lenses (including blue light blocking glasses), online eye exams, and an at-home try on set.

Let’s take a look at their website.

Home Page

warby parker home page

Warby Parker’s home page is professional but welcoming. It’s not overloaded with products or text. Instead, the text is dark and strong, which portrays a reliable brand and sturdy product. The warm colors of the glasses paired with the coffee mug and stack of folders pair in such a natural way that it doesn’t feel like the glasses are being oversold right off the bat. The call to actions are small, but they are clear.

Shop Page

warby parker shop page

The shop page is very clean and crisp. The glasses are placed on a white background, which makes them appear very striking. Each frame style name is bold and easy to read. The small circles give website visitors a preview of available frame prints, which can be clicked through for a full preview without leaving the shop page. Website visitors can also filter the shop page for specific widths, colors, and shapes. This can be very helpful for visitors because they can find exactly what they want without the distraction of other products that they don’t want.

Product Page

warby parker product page

Warby Parker’s product pages are some of the most simple on the website. The plain white background allows the glasses to shine. The photo slider shows off different angles, as well as a photo of the frames on a model. This shows potential customers a real-life glimpse of the product. The call to action brings one of the only pops of color to the page, with its bright blue boxes and white text. The language of the call to action buttons is very clear, and shows Warby Parker’s unique at home try on offering.

Check Out

warby parker checkout page

Unlike some of the other eCommerce websites we’ve seen today, Warby Parker’s website takes you to a separate, dedicated check out page. Their checkout page lists the price of the product very clearly at the top, which is a really nice feature for clarity and transparency. They also list out the price of every additional option so that customers know exactly what they’re spending, and why. The call to action is bright and eye-catching, just like the product page, and makes it clear where website visitors should move next.

Why Warby Parker’s Website Design Works

Warby Parker uses strong fonts and warm tones to bring together a professionally curated yet approachable design. Their language and easy to read text make website visitors feel cared for, and provides them with a sense of trustworthiness. This draws in new customers and makes their user journey feel like more of a conversation, rather than another sale from a cold, lifeless brand.

Key takeaway: Your eCommerce web design shouldn’t feel like a one-way street. Figure out how you can bring your website visitors into a conversation, not a sales pitch.

El Rayo

El Rayo takes a modern approach to tequila and reposado. Their spirits are specially made with blue agave, which gives them a light, natural flavor. They pride themselves on providing a tequila that pairs perfectly with tonic.

Here’s a glimpse of their website design.

Home Page

el rayo home page

El Rayo’s home page is colorful and vibrant. They showcase their products in a unique way, through illustration rather than professional photos. This gives off a really playful feel that draws in potential customers. Their font is very strong and easy to read, and it brings the eyes to their call to action. The call to action itself is very straightforward: buy tequila. These elements all work together to immediately catch a website visitor’s attention and get them to the end goal.

Shop Page

el rayo shop section

Unlike some of our other examples, El Rayo does not have a dedicated shop page for all of their products. Instead, they have a product slider section on their home page. The slider allows customers to see each of El Rayo’s offerings, along with the price and a short description. The slides are bright and colorful, much like the top of the home page, and they have a modern sort of monochrome color scheme. The contrast between the background and text colors give the products a pop while ensuring that website visitors can easily read the product descriptions and call to action.

Product Page

el rayo product page

El Rayo’s product pages maintain the vibrant personality of the home page, but they are a little bit more modern and understated. The solid color background makes the glass tequila bottle pop, and the dark text provides an easy to read description. The call to action button is also dark and straightforward, which can help create a very clear website flow that leads to new purchases.

Check Out

el rayo checkout widget

El Rayo’s check out section is another example of the side bar cart. However, theirs adds a bit of flair with the way they offer extra products. As you can see in the photo above, the check out pop up has a slider on the left side with other El Rayo products as well as a tonic from a partner company. This works really well for El Rayo, because they have such a small number of products. Adding the side bar means that a customer could add all of the other products into their shopping cart without even leaving the check out section.

Why El Rayo’s Website Design Works

El Rayo’s eCommerce website design works because of its balance. The bright colors and illustrations present website visitors with a lively, friendly atmosphere within seconds of their first click. However, the muted tones and monochrome sections of color show off a more modern, elegant side of El Rayo. They’ve created a great balance between fun and professionalism, which builds up a trustworthy brand image.

Key takeaway: Don’t be afraid to show off a bit of your fun side! Customers appreciate a brand that’s professional, but that doesn’t take itself too seriously.

Jot

Jot is an “ultra” coffee, who believes that just one tablespoon can change everything. Their small but powerful bottles are reflected throughout their brand image, and their website design.

Let’s take a look.

Home Page

jot coffee home page

Jot’s home page presents a journey of its own. As you scroll down the home page, new elements appear that tell a story. It draws website visitors in below the fold, leading them to a short paragraph about Jot’s ultra coffee, and ending with a call to action: shop ultra coffee. This is a very clever way to keep visitors on your website for a greater amount of time, and help improve the flow towards the end goal.

Shop Page

Jot product shop section

Jot does not have a shop page with multiple products. Of course, they only have one product to sell! Instead of a page, Jot uses a side bar that website visitors can use to add multiple bottles to their cart. This is a unique feature, but it works well for their purposes, because it helps them achieve their goal to sell more bottles.

Product Page

jot product page

The product page is very simple, but, as we said above, they only have one product to showcase. Like many of our other examples, Jot’s product page uses a light colored background to make the product photo pop. This works especially well on this product page because the coffee bottle is so dark. The title of the product is very bold, much like the product itself. The smaller descriptive text is very clear and easy to read, and the short ingredient list is a big draw for customers who appreciate authenticity.

Check Out

jot shopping cart

Jot also employs a side bar check out, but theirs is the perfect example of minimalism. The call to action is very clear, shown as a black bar at the bottom of an off-white section. This makes a website visitor’s decisions very easy, whether they want to add more bottles, remove bottles, or complete their purchase.

Why Jot’s Website Design Works

Bottom line: Jot’s website design is simple, and it works. Obviously, if you have more than one or two products, this approach probably won’t work for you. But that doesn’t mean there’s nothing for you to learn! Take a look at the way their home page tells a story that draws people in. You can use your brand’s story to draw people in and show them your values.

Key takeaway: Everyone has a story, so don’t be afraid to use yours as a part of your website design! This shows off your authenticity and what drives you as a brand.

Cuts Clothing

Cuts Clothing is a minimalist t-shirt brand. Their t-shirts are meant to be able to be worn for work and for play. They are also made using a custom fabric called Pyca, which is breathable and durable.

Here is a look at their website.

Home Page

cuts home page

Cuts’ home page reflects their minimal brand values and product style. Their call to action is showcased in front of a beautiful product shot. It draws the eyes straight to the shop now button. This is a great example of a design that utilizes real-life examples to sell products. When potential customers see the product being used, it can help them visualize how they would use it in their own lives.

Shop Page

cuts clothing shop page

The shop page showcases the the Cuts Clothing t-shirts in a modern and minimalist design. Each shirt has a banner at the top to indicate whether it is a new arrival, recently restocked, sold out, or a best seller. These banners can help website visitors discover what’s popular, and what’s recently arrived to the website. This may help them decide which style of shirt they want to look at, and, ultimately, which shirt they want to purchase. The prices are also shown very clearly, in a dark bold font.

Product Page

cuts clothing product page

The product pages use a crisp white background to show off the muted tones details of the t-shirts. The different angles of the model photos give website visitors a good idea of the fit of each t-shirt. The call to action is dark and bold, making it clear what the next step in the user journey is.

Check Out

cuts clothing check out

The checkout page is very similar to Jot. It is a side bar section with a few simple options. Website visitors can remove or add more t-shirts to their cart, or they can checkout. This keeps visitors from getting distracted and makes it easier to complete a purchase.

Why Cuts Clothing’s Website Design Works

Cuts Clothing presents itself as a minimalist brand, so it makes sense that their website design would follow suit. This shows the importance of creating a consistent brand presence. When you’re consistent with your brand values and aesthetics across your website and other forms of media and marketing material, it helps new and existing customers identify your brand more easily.

Key takeaway: Be true to your brand, and keep it consistent. New customers won’t be able to find and identify your brand if you’re change who you are to fit in on different platforms.

Robin Golf

Robin Golf is a golf brand that was created to make premium golf clubs more accessible. They believe that golf is the greatest game, and that its discipline is very important.

Home Page

robin golf home page

Robin Golf’s home page design utilizes beautiful photography and storytelling. As you scroll down the home page, you learn more about the brand and their story. They include some fun moving elements that continue to draw the eyes down the page towards the product photos and the call to action. The product photos are interactive, and reveal the call to action once they are toggled over.

Shop Page

robin golf shop page

The shop page uses more stunning photography and interactive elements. These elements are visually striking, and help keep a website visitor’s interest in the page. It offers short descriptions of each golf set, including a blurb about how each set can help customers achieve their goals on the golf course. The call to action is made clear with a bright colored button and straightforward language.

Product Page

robin golf product page

The product page shows off the golf sets up close, and zooms out to reveal the entire bag as you scroll down the page. The extra strong font shows the reliability and high quality of the brand. Each product description is straight forward and easy to read. Additionally, it’s very easy to access reviews directly on the product page, which may help a website visitor make the decision to buy a set.

Check Out

robin golf check out

Robin Golf’s side bar check out is a great mix of minimalism and color. The dark, bold fonts are consistent with the high quality brand voice from the home and shop pages. The color adds a bit of fun, and showcases the product one last time. The call to action is bold and clear, taking up a large portion of the page and establishing importance.

Why Robin Golf’s Website Design Works

Robin Golf uses storytelling to their advantage. The photos and interactive elements come together to create a compelling website and exciting user journey. This helps potential customers feel like they’re a part of the brand’s story, rather than another customer that’s simply being sold a product.

Key takeaway: Use your story to your advantage. Storytelling is extremely powerful, and you can use your story to create a community and interact with new and existing customers.

Favor the Kind

Favor the Kind is a boutique that offers home decor, gifts, and apparel. Their goal is to spread joy by providing people with home decor and clothes that make people smile.

Let’s take a look at their website.

Home Page

favor the kind home page

Favor the Kind’s home page is full of bright colors and, and it builds an experience. The photos show off different products, and how you can enjoy them for yourself. The home page also exemplifies their brand spreads joy. The call to action is presented in a dark, bold font that contrasts the bright, fun colors on the rest of the page. This draws website visitors’ eyes and makes the website flow clear and easy to follow.

Shop Page

favor the kind shop page

The shop page is a bit different than the home page. Instead of adding pops of color with text and backgrounds, Favor the Kind’s shop page lets the products bring the interest. The wide variety of colors, styles, and offerings can draw in new customers from many different audiences. Each photo shows how the clothes or decor can be styled or used, which can help customers visualize them on their own body or in their own space. The names and prices of each product are also laid out in a very clear, easy to read font.

Product Page

favor the kind product page

The individual product pages marry the simplicity of the shop page with the joyful colors of the home page. In the photo above, you can see how the colors in the t-shirt blend with the color of the call to action button. This really unifies the product page while drawing attention to the most important elements. The product description is laid out in a dark, clear font, and even provides tips for styling. This is a smart move, because it might lead to an extra sale so that the customer can complete their outfit.

Check Out

favor the kind check out page

Favor the Kind is one of the only examples we’ve looked at today with a dedicated check out page. The page is very simple, which helps website visitors check out free from distractions. The call to action button is very vibrant, which helps improve the user flow. It’s also consistent with other call to action buttons on other pages of the website.

Why Favor the Kind’s Website Design Works

Favor the Kind’s website design works because it establishes a theme that is true to their brand, and carries it throughout the website. Even on the more minimalist product and check out pages, there are still pops of color that bring in the same kind of joyful feeling from fun and funky home page.

Key takeaway: Don’t be afraid of variety. It’s important to establish a consistent brand image and voice, but you can mix up the ways that you use colors and fonts.

Erno Laszlo

Erno Laszlo is a skin care company that’s nearly 100 years old. It’s their goal to achieve a high quality, highly effective skin care formula, without harmful chemicals. That’s what they call their “clean promise.”

Here’s what their website looks like.

Home Page

erno laszlo home page

Erno Laszlo’s home page is very bright and clean. The layout of the stunning product photo, light colored background, and dark, bold font is very visually striking. The dark font pops in contrast all of the bright colors, drawing your attention from the product photo to the call to action. This design is perfect for portraying the professional, high-quality care that Erno Laszlo promises.

Shop Page

erno laszlo shop page

The shop page brings the same bright, clean feeling of the home page, in a bit of a different way. The white background makes the colors of the products and packaging stand out very clearly. The mostly square shapes of the products make the shop page feel very consistent and visually appealing.

Product Page

erno laszlo product page

The individual product pages bring back the layout of the home page. The product photo is very detailed, which helps potential customers get a real life feel of the product. The product description is laid out really well, and the font is a little softer than the fonts from the home page and shop page. This softer font brings a feeling of warmth, which can make website visitors feel more in touch with the high quality product. The call to action box is a dark black box, which is a big contrast to the rest of the page. This makes the end goal of the product page clear.

Check Out

erno laszlo check out

Erno Laszlo has a check out side bar available, but website visitors can also choose to visit a dedicated shopping cart page, as shown above. This is a nice feature, because it gives potential customers the option to continue shopping after they’ve added a product to their cart, or to move to a different page with no distractions. The checkout page is very simple and clean. The product is shown very clearly, and website visitors can easily add more of the product to their bag, or remove the product from their bag altogether. These options are very clear on the page, which will help prevent frustration. The bright pink of the call to action section is eye-catching, and keeps the user journey flow very simple.

Why Erno Laszlo’s Website Design Works

Erno Laszlo promises clean, quality products, and that’s what their website design portrays. They chose bright, yet neutral colors that are reminiscent of skin tones. The dark, bold fonts and striking product photos provide a feeling of professionalism and transparency.

Key takeaway: Remember who you are as a brand. All of these elements work together to show Erno Laszlo as a high-quality, clean brand, and that’s exactly who they promise they will be.

Wool and the Gang

Wool and the Gang sells everything you need to become a successful knitter. They offer knitting needles, yarn, and even knitting kits complete with patterns and instructions. Their goal is to create a community, and they do so by focusing on you, the customer. That’s why they offer knitting kits for a wide variety of sizes, and use product photos that reflect real people.

Let’s take a look at their website.

Home Page

wool and the gang home page

Wool and the Gang’s home page uses a variety of elements to catch website visitors’ eyes and represent their brand values. Their photos showcase the way that knitting brings a community together. They also represent women of different body types, styles, and skin colors. The bright colors of the yarn are visually striking against the white and light gray backgrounds. The bright white of the call to action section along with the bright coral of the shop now button really draw your attention, and make you want to click.

Shop Page

wool and the gang shop page

The shop page is more minimal, but it still presents a friendly and colorful atmosphere. The photos that feature models are fun and natural, which can make potential customers feel more comfortable and more represented. The photos that don’t feature models are still fun and visually appealing because of the mix of colors and the dark, bold font. Each product title is bold as well, and the consistency of the lines of text keeps the shop page feeling very consistent.

Product Page

wool and the gang product page

The product pages are very detailed, and provide a variety of options for each product. Website visitors can choose from different colors, patterns, and sizes to create something special and unique. Products like the one above can also be purchased with knitting needles to ensure that customers have everything they need. This is very helpful, because it can save customers from having to search for knitting needles on another page. The product pages also use the same dark font from the shop page, making all of the details and options easy to read,

Check Out

wool and the gang check out page

Wool and the Gang has the same check out system as Erno Laszlo. They have a check out side bar that website visitors can use to see the products in their shopping cart without leaving the product or shop page. This way, they can check on their cart, but continue shopping. There is also a dedicated check out page, which is shown above. This page is the most minimal of them all, but this helps cut down on potential distractions and draws eyes to the bright green checkout button.

Why Wool and the Gang’s Website Works

Wool and the Gang wants to build a community, and their website design helps them get there. The fun colors, variety of models, and easily accessible product results create a warm, friendly feeling. Additionally, the different sizes, colors, and patterns allow potential customers to create something completely unique. Their design showcases everything that makes them special while showing how their customers can create something special too.

Key takeaway: Focus on your customer community. When you have a group of loyal customers, your products will start to sell themselves and generate interest through word of mouth.

Taking Your eCommerce Website Design to the next level

When creating your own eCommerce website design, there are a number of factors to take into account. Who are your target customers, and what speaks to them? How can you incorporate your brand’s colors, fonts, and logo assets into a website that will attract your target audience? What do you need to do to tell your story, showcase your values, and build a community?

All of these elements can make the difference between a new customer and a high bounce rate. If you’re not sure how to get started, we’re here for you. Just give us a shout! We’d love to help you create an eCommerce website design that turns your website visitors into loyal brand fans.

Thoughts or Questions?

Our blog does not accept comments, but we want to know what you think!  Tag us on Twitter to get the conversation started or contact us.