I was just getting ready to make a video about the new version of WooCommerce 4.0 and I came across a very interesting article published on bigcommerce.com that presents some of the best eCommerce website designs of 2020. Hello WordPress enthusiasts. My name is Robert and in this video, I will show you 6 of them and in a new video, I will create a replica of the online store that gets the most votes from you guys, in the comments section below. Just let me know the name of your favorite one. Before moving on, make sure you hit the subscribe button and ring the bell to get notified when I publish a new video. This is the best eCommerce website design award winner that offers a smooth user experience, especially for mobile phone users. The navigation menu is simple and intuitive with sections that hide automatically when scrolling down, and this is something you can do with the theme I will use in the promised video. If I go to the products page you can see that everything is simple which seems to be preferred by users nowadays.
The sidebar contains only necessary filters and information that can help clients navigate seamlessly through categories, to easily find products based on their preferences. Below the products, you can see an email subscription form and some useful links which show up in the footer area of every page. If I shrink my browser, everything is resized to fit the screen and the header switch to a mobile version, which is something you can do with a free WordPress theme but I will talk about that in the new WooCoomerce tutorial which I hope I can finish in a week or so. On the homepage, people can navigate through eight sections that show top products, a slider with popular products, and useful information put in nicely designed elements. And if I go to a product page, we can understand why it is the winner of the best overall design. The page is filled with information and graphic elements that make it the best online shop page design I saw so far. Crossrope.com is the best overall design finalist, which has a video background in the hero section and again, a header with three sections.
The homepage has more than ten sections which is too much, I guess but it contains everything you may want to know about their products. As you can see, the header is a little bit different on the products page and it shows up the product categories on this menu, which is something I can show you how to do. If I click on ropes + handles it will scroll down automatically to that section on this page which you can implement with navigation anchors. Let’s see how the cart works when I click on add to cart. Oh, sorry, I need to pick the size first. The cart slides out from the right after adding a product or when you click on the chart icon above but I can show you a different way that will show the products in your cart just by hovering over it.
This is the third website in this video and it seems that headers with three sections are a must in eCommerce design. One major difference for The Mountain is that the header won’t stick to the top of the website when scrolling down. I don’t like that the search form shows up only when you click on this button. Personally, I prefer a search feature that looks like the one on amazon.com and I think this online store can be improved in terms of user experience. But this is just my humble opinion. I am not a professional webs designer. I am just a regular user.
Truelinkswear is one of the best new site finalists of 2020 which looks impressive and modern to me. In the header menu, I’ve noticed this transparent menu which becomes black on hover and it sticks to the top when I scroll down. Some headers behave differently when scrolling up but this one works the same when you scroll down or up. Here is a section with a nice hover effect and at the bottom of the page, you can see a section with images from their Instagram account. Subscribe to our newsletter, and this is the footer section. Simple yet powerful, I guess. The product page on these websites is almost similar, with small differences in terms of features and content. CutterBuck.com is the first eCommerce website in this video that has this cookie consent message at the bottom of the page, which is something I can show you how to activate on your website without coding in the promised video.
This online store is again, a fairly simple one, and its homepage start with a slider followed by a section with images that feature different categories. There is a discover our collections section too followed by a popular products slider as well as the well-known subscribe section. Navigation through pages is easy with this simple header menu that sticks to the top of the website and shows different categories with pictures, on hover, as a mega menu. And a product page looks like this. Cruisemaster.com.au is the last one in this video and it seems that the business is affected by the COVID-19 virus. Al kinds of businesses around the world are affected by this pandemic virus and I hope this video finds you well.
For online marketers and content creators like me is a little bit easier to work from home but I think that sooner or later, all type of activities will feel the effect of this crisis which is something I never thought it can happen. This website is very well designed and structured and it is my favorite one so far. We can see three sections in the header area with two menus that have a mobile version too. Let me check out the all shop page which features all of their products, I guess. It looks simple and it has nothing but the important things on it. I like this hover effect but it would be much better to have a quick view feature that opens only a popup window and not the entire product page. I hope you guys are inspired now that you saw some of the best eCommerce website designs of 2020. Tell me what is your favorite design in the comments section below and I will prepare a replica as close as possible to the original.
I will not copy the content just its functionalities and I will do my best to add some improvements here and there. Best of all, everything will be done without writing a single line of code or CSS. Just by using a user-friendly drag and drop interface. Did I manage to arouse your interest? If so, stay tuned. Keep up the good work and see you in the next video. Cheers!.
