Сайты сделанные e commerce

Время на прочтение

Дизайн интернет-магазинов – задача априори более комплексная в сравнении с обычными сайтами. E-commerce-сайты, как правило, заточены на оптимизацию процесса покупки и, как результат, повышение конверсии. Поэтому в e-commerce дизайне есть два типа трендов — практические, продиктованные юзабилити, и декоративные, пришедшие из веб-дизайна как такового. Что сегодня актуально в e-commerce дизайне, какие идеи воплощаются «для красоты», а какие реально помогают продавать лучше и больше?

Дизайн — это не поиск магической оранжевой кнопки в правом нижнем углу, повышающей конверсию на 300%. Гармония элементов, стиль, соответствующий духу бренда и бизнес-целям, вот что делает дизайн эффективным.

Один из примеров удачного применения 3D-эффектов в e-commerce — виртуальная примерочная. Например, приложение для примерки очков позволяет пользователю создать «модель» своего лица с помощью камеры компьютера или смартфона, и украсить ее понравившимися очками – понятное дело, что такая демонстрация гораздо эффектнее простой фотографии продукта. Грамотно подобрать модель очков без примерки практически нереально, и реально работающее 3d-приложение может радикально изменить динамику продаж такого особенного для электронных продаж товара.

Виртуальная примерочная часто создается с помощью приема дополненной реальности (augmented reality), о котором мы расскажем чуть ниже. Сегодня такие приложения особенно популярны для подбора косметики, одежды, мебели – предметов, которые всегда должны быть вписаны в некий контекст (лицо или фигуру покупателя, интерьер комнаты и т.д.).

Эффект трехмерности также создает параллакс (движение одних элементов на фоне статичного положения других при скроллинге, или их разнонаправленное движение, движение с разной скоростью). Хотя этот эффект используется в оформлении интерфейсов смартфонов с незапамятных времен, он по-прежнему остается в тренде, и выгодно смотрится на e-commerce сайтах при смене/листании товаров.

Дополненная реальность (Augmented reality)

Дополненная реальность все еще мощно рвет шаблоны и грани между реальным и виртуальным миром, и, по всей видимости, устареет еще не скоро. Работает это довольно просто: с помощью AR-приложения камера смартфона или планшета сканирует картинку-триггер в реальном мире, и на мобильном устройстве открывается акционная страница сайта воспроизводится интерактивный контент.

AR открывает широкие возможности для интернет-торговли и промоушена — создание виртуальных примерочных, демонстрация продукта (например видео с показа бренда), встраивание виртуальных объектов в реальный интерьер. И вообще, AR – это сравнительно простой способ создания запоминающейся, эмоциональной коммуникации, которая отлично транслирует ценности продукта и бренда, используя все возможности современных мобильных устройств.

Плоский дизайн. Биоморфизм. Минимализм.

Тренд к упрощению и уплощению дизайна очевиден – интерфейс новых версий iOS и обновленной Android, которая выйдет этой осенью, тому отличное подтверждение. Чем «меньше» дизайна, тем больше легкости в страницах, чистоты в коде, больше отзывчивости и функционала на базе той же производительности (часто ограниченной, если речь идет о мобильных устройствах). В минималистичной дизайнерской парадигме особенно заметен акцент на чистых цветах и выразительных шрифтах. Это особенно важно для e-commerce, где оригинальные шрифты вызывают ассоциации с брендом. С помощью шрифта мы можем управлять вниманием пользователя и направлять его хаотическое сканирование страницы взглядом в нужном направлении.

Вот пример того, как это делаем мы на сайте www.avenue.com

Иконки-гамбургеры. Фиксированное меню. Дроп-дауны.

Иконки-гамбургеры (или иконки с тремя горизонтальными полосами для вызова меню), сегодня в моде и применяются повсеместно. Однако, оказывается, для e-commerce сайтов это не лучшее решение. Как показывают результаты различных тестирований (A/B, Multivariate testing), “гамбургеры” привлекают в среднем на 20% меньше кликов пользователей, чем такая же кнопка со старым добрым словом “меню”.

Стоит отметить, что это решение вовсе не дизайнерское ноу-хау последних лет. Иконка-гамбургер использовалась еще в персональном компьютере Xerox 8010 Information System, известном как Xerox Star, выпущенным компанией Xerox в 1981 году.

Фиксированное меню, которое остается видимым на экране при прокрутке страницы, напротив, заставляет большее количество пользователей кликать и переходить вглубь сайта, чем традиционная панель меню, находящаяся в верхней или нижней части страницы. Очевидно, что отсутствие необходимости скроллить страницу каждый раз при обращении к меню положительно сказывается на настроении пользователя.

Дизайн дроп-даунов, или выпадающих меню, также немаловажен. В тренде сейчас минималистичные выпадающие меню на полупрозрачном фоне. Ключевые моменты здесь — меню должно быть читабельным, кликабельным с любого устройства (даже с маленьким экраном), и не должно сливаться с фоном. Пример хорошей реализации дроп-дауна можно увидеть на сайте Men’s Wearhouse, созданном нашей командой.

Даже не обсуждается. Кроссбраузерность, комфортный просмотр на любых устройствах, с любым размером экрана, touch-screen friendly-дизайн — абсолютно обязательны и непререкаемы. Сегодня адаптивность подразумевает не просто создание мобильной версии сайта, а использование алгоритма, чувствительного к ширине экрана мобильного устройства. Базируясь на платформе сайта, он отрисовывает сайт на небольших и нестандартных экранах, не полагаясь на браузеры планшетов и смартфонов, которые могут трактовать код и разные элементы дизайна сайта очень по-своему.

В веб-дизайне в целом этот тренд проявляется в бесконечной подгрузке контента, сайтах-инфографиках, ховер — эффектах при наведении.

Создание эффекта прикосновения

Преследуй клиента, а не конкурента

В общем, мы не откроем большого секрета, если посоветуем не следовать слепо своим конкурентам и не копировать их решения только потому, что они работают. Пусть вас вдохновляют ваши клиенты, их желания и цели.

Например, Versace одним из первых в сегменте luxury запустили интернет-магазин. Мы выполнили его в традиционном для Versace стиле – темный, графичный и очень стильный – то есть не похожий ни на кого из конкурентов, но при этом отвечающий духу и стилю бренда в глазах своих посетителей.

Не стоит делать свой интернет-магазин иллюстрацией всех трендов одновременно просто потому, что это модно. Главное в веб-дизайне — баланс и гармония. Но нужно помнить, что для e-commerce требования юзабилити всегда в приоритете над требованиями визуального дизайна.

Are you searching for the ultimate list of the best eCommerce website examples because you want to build an epic one yourself?

The eCommerce industry is growing year in and year out, and it’s valued well into trillions of dollars, with an expected annual growth rate of 14.7%.

Yes, this makes it competitive, but you can easily build a stand-out online shop with this collection of phenomenal web designs.

Learn from the best, takes notes, copy and improve with your creative touches that’ll make your eCommerce site EXTRA special.

While we listed some of the key features of each website, we also added six must-haves that make a great eCommerce website for your convenience.

Take your online selling to the next level!

Best 25 eCommerce Websites To Inspire You

Whether you want to create a minimalist eCommerce site or such with animations and effects, we have an example for you. Enjoy.

Brew Tea Co

Built with: Squarespace

Brew Tea Co is a modern website with a vibrant color scheme that captures your attention immediately upon loading. The site uses a top bar notification and an expandable menu with links and images.

Additionally, the footer has extra quick links, social media icons, a newsletter subscription widget and contact details.

Best Design Elements:

• Live chat: Integrate a messaging widget to offer better customer service.
• Product carousel: Showcase best sellers (latest drops, etc.) with a product carousel.
• Popup: Use a popup window to collect visitors’ emails by offering them a discount. (You can also use a sticky call-to-action button reminder (at the bottom of the screen) for everyone who doesn’t opt in.)

Let every part of your eCommerce website speak your branding, reminding the visitors/potential customers of your brand.

Finally, don’t miss checking other fantastic Squarespace website examples.

Farm To People

Built with: Node.js

Farm To People triggers everyone’s attention with an engaging hero video (with text animation and a CTA button). The site uses a floating header so everyone can continue searching, find products, and more without returning to the top.

• Sticky header: Create a better site navigation with a floating header/menu, so there’s no need to scroll back to the top.
• Video above the fold: Add more engagement to your website’s initial load with a hero video (and use a CTA button).
• Subscription form: Add a global search form in the footer to increase your potential of scoring more emails.

The first few seconds matter A LOT, so use an attention-grabbing element (like a video) above the fold.

Due Lune

However, the floating header is always present with quick menu links and extra hamburger navigation.

Moreover, the sliding text for different categories adds a level of engagement to the overall simplistic web design.

• Framed layout: A unique detail that makes the website pop more.
• Contrasting footer background: Due Lune uses a black background footer, which is a nice contrast to their main light website.
• Image banner above the fold: A hero image with larger text/title and CTA buttons ensures more eyeballs are on your (special) offering(s).

Simple details like the framed layout and contrasting background can make your eCommerce website stand out more.

Kettle & Fire

Built with: Shopify

Kettle & Fire is a clean and creative online store with lots of social proof elements, like star ratings, authority mentions and client reviews. It also uses a top bar notification for free shipping and a quiz that adds a layer of interactivity.

We also like the minimalist mega menu, so searching for bestsellers, finding categories, etc., is simplified.

• Top bar: It appears above the header that you can use for adding a notification, like free shipping.
• Modal window: Offer a special deal/discount with a modal window (with custom timing).
• Accessibility menu: Let your visitors customize their website experience with the accessibility adjustments.

Ensure everyone gets the most out of your website (even those with disabilities) by integrating the accessibility menu/configurator.

Wild

Instead of a static top bar notification, like most use, Wild has an animated one, which definitely grabs more attention. The header is fully transparent and disappears when you scroll but reappears immediately on a back/scroll.

Wild uses a sticky button in the bottom right corner for existing customers to get to the products (refills) without the need to search for them.

• Disappears/reappearing header: Improve scrolling with a menu that reacts to scrolling movement – disappears on the down scroll and reappears on the up scroll.
• Trustpilot reviews/ratings: Build social proof with 3rd-party review services like Trustpilot.
• How it works (GIF): Demonstrate how your product works in written and GIF form.

Besides using custom reviews and ratings, you can also display a 3rd-party “badge.”

Romagnoli

Romagnoli stands out from the masses because it almost doesn’t feel like you’re on an eCommerce website.

Their simplistic yet animated above-the-fold section sparks curiosity. At the same time, the transparent floating header with a hamburger menu icon ensures easy navigation (including access to the customer profile and shopping cart).

• Clean design: It’s always better to aim for simplicity and cleanliness in online shops.
• Animated text: Spice things up with animated text for catchy details.
• Transparent header: Make a transparent header to remove clutter.

Laird Superfood

Laird Superfood’s eCommerce website has a unique background that reflects the owner’s (Laird Hamilton) surfing passion. You’ll see a top notification bar with a text slider promoting free shipping, a discount, and more.

One of the more original features of this page is the chat widget in the bottom right corner that plays a video of Laird. This immediately gives it a more personal feel because Laird “talks” to you.

• Text slider in the top bar: The sliding text adds more engagement to the site and allows you to display extra information and details without taking up too much space.
• Chat box with video background: Make it more personal with a messaging widget with a video background.
• Custom background: Let your website shine with your custom branding across all parts of it, including the background.

Invest a little extra time by filming yourself addressing potential customers to ask any questions they have. (Show them you care.)

ManiLife

ManiLife has a massive full-screen slider above the fold with text and a CTA button that takes the visitors directly to the shop.

Below the fold is a featured product carousel for quick picks, and one section below is a “flavor picker” with a hover effect.

Additional sliders are used for client testimonials and authority logos, which both add a layer of trust.

• Hover effects: Make the initial appearance cleaner using hover effects for specific elements.
• Sliders for social proof: Create sliders for reviews, testimonials and PR logos.

Don’t forget to add trust elements to your online store because they can drastically boost conversion rates.

Ocelot Chocolate

Ocelot Chocolate sticks to simplicity with a large grid layout and a minimalist header and footer.

• Undisrupted background: Use the same background color for the header, footer and site’s base.
• Grid layout: A grid layout can break things down nicely to make the content more organized and easy to skim.

Give your eCommerce website an uncluttered appearance with the continual use of the same background color where all parts of it work in unison (don’t separate header and footer from the base).

Supernatural

Supernatural uses a vibrant hero image with a parallax effect and a transparent header (with a drop-down menu).

Moreover, the product category grid features a hover effect with an additional, life-like product image.

• White space: Make your website more “readable” by creating large chunks of white space (which works even better if you plan to add plenty of text.)
• Sectioned layout: Keep your website more organized by breaking it down into sections (and use different backgrounds for each to make it more dynamic).
• Parallax effect: You can make your website grippier by introducing the parallax effect to your background (images).

White space makes your website more appealing to the eye and can put an extra shine on your products and content (makes them pop more).

Sakara

What’s interesting about Sakara is that they use two popups, one on top of the other, once the website loads. However, one only appears if you visit their website outside the US, informing you about shipping.

Furthermore, the slider they use above the fold has a split design, with an image on one side and text and CTA (on a solid background) on the other. Also, the slider has a pause/play button if you want to swipe through them manually.

• Two-part slides: Make each slide pop more with an image on one side and text and CTA on the other.
• Search bar: Allow visitors to search for something more specific by adding a search bar in the menu section.
• Multi-column footer: Arrange quick links, social media, newsletter subscription form, etc., into multiple columns for a more organized structure.

Create a slider that stands out more by using images and solid color backgrounds for each slide. This can also make the text and the CTA buttons more visible.

UpNature

While UpNature’s header is transparent to blend with the background image more, it turns solid as soon as you start scrolling. The navigation bar is a mixture of a mega menu and a drop-down to improve exploring the page.

This eCommerce website loads some of its content on scroll to make it livelier and then uses a customer testimonial slider where each slide has a different background.

• Product page with a gallery: Instead of using only one product image, add more and group them in a gallery.
• Sticky bottom bar for “add to cart”: Elevate the potential of getting more visitors to click the “add to cart” button by creating a floating bar on product pages.
• Plain footer: You can create a simple footer when you use a floating header/menu with all the links and a search bar easily accessible – all the time.

Improve your product pages with great (and compelling) descriptions and galleries. Give potential customers as much content and as many reasons as possible to buy from you.

Feastables

Feastables is one of the COOLEST eCommerce website examples with an energetic and vibrant design that you must experience. It features lots of moving elements, catchy graphics, unique hover effects and an image slider with customers promoting Feastables products.

You need to be a little bit daring to create a web design like this, but it can be advantageous.

• Play button: If you have a theme song or a song you’d particularly like your visitors to listen to, add a play button in the navigation bar.
• Game: Take engagement to the next level by integrating a simple yet fun game – yes, into your website.
• One-of-a-kind design: There really is no right or wrong approach when designing an eCom site – feel free to go entirely against the grain.

You can easily stand out from the masses with a second-to-none online store that will create a strong and lasting first impression.

Huel

With customers from around the world, Huel lets you select your location with a selector at the top of the screen for a better online shopping experience.

Moreover, Huel has a banner above the fold with a title, text, a Trustpilot badge (for social proof) and a CTA button. Additionally, they also embedded Trustpilot reviews into a slider with a link to all the ratings and reviews.

• Language selector: Allow visitors to enjoy a better experience by selecting their region for smoother shopping.
• IG feed featuring customers: Instead of creating your official IG feed, showcase your customers “modeling” your products.

Improve your eCommerce website’s shopping experience with a region selector that at least changes the currency and pre-fills shipping address, if not translating the entire website.

ETQ

ETQ is a minimalist shoe website with a full-screen above-the-fold section that features a large image on the left and text (with a link) on a solid background on the right.

The menu disappears and reappears depending on the scrolling movement, so quick links, search, account and shopping cart are always at your fingertips.

Product pages come with a clean design, a gallery with a lightbox, accordions for additional details, color swatches and a size selector. The checkout is a simple three-step process with an optional express checkout.

• Lightbox product gallery: Create a lightbox gallery so shoppers can view additional images without leaving the current page.
• Multi-column footer: This allows you to add more helpful widgets for menu links, contact details, a subscription form, social media, etc.
• Express checkout: Not everyone has time to fill out the information, so offering an express checkout can improve conversion rates.

A minimalist web design can bring your products front and center in a distraction-free environment.

Finisterre

Finisterre has a newsletter popup with an option to choose what kind of emails you’d like to receive. Once the popup closes, you’ll notice a secondary one for the location/currency selector.

Besides the header that disappears and reappears, Finisterre also uses a floating chat box widget for improved customer service.

What you don’t see very often is a footer menu with drop-down functionality, which works really well in its neat environment.

• Video background: Make your sections more exciting by mixing in video backgrounds.
• Images of models wearing your products: Don’t create product images only; let a model wear the product (+ add the model’s height/waist and the item’s size he or she wears).
• “Complete the look”: Help shoppers find the perfect look by recommending products that go well with the one they’re interested in.

Boost your product pages with models wearing the products and the convenient “complete the look” section with links to other items.

Fred Perry

Built with: Adobe Commerce

Fred Perry’s home page is pretty long, but thanks to the clean appearance, scrolling it and finding information and products doesn’t feel a burden. However, whenever you want to access the menu or search bar, you start scrolling back to the top and it’ll appear.

Instead of a popup, Fred Perry uses a floating bottom bar for newsletter opt-in (but only appears below the fold).

A great element we really liked when reviewing this eCommerce website is the typewriter effect on product pages for delivery, returns and payment notifications.

• Sticky newsletter bar: Keep reminding visitors to subscribe to your newsletter with a floating bottom screen bar.
• Typewriter effect: Add life to your website (product pages) with the catchy typewriter effect.
• Multi-column drop-down menu: It works great if you have many product categories and want to display them in an organized structure.

Byredo

Byredo has a hero banner and a grid layout without spacing where each element either links to the product page or a category. The floating header has a basic menu (but reveals a mega menu when you click the link), while the footer contains multiple links, clickable email, telephone number and live chat.

Product pages maintain an uncluttered look, thanks to accordions that reveal more information once you click them. The “goes well with” section below each item also helps shoppers pair products more easily.

• Accordions: Allow you to create a cleaner look while ensuring the additional information is available.
• Mega menu: Group links, images and other useful elements.
• Shopping cart icon: Make it always available by adding an icon in the navigation bar.

Improve your navigation with a floating mega menu that makes finding products a breeze.

Bliss

Built with: BigCommerce

Bliss has a slider with CTA buttons that react on hover and a more basic mega menu with all the necessary links at your fingertips. The header also has additional links/icons for search, “find us,” log in and shopping bag – always available to you because it floats.

• Product quick view: Helps customers find (and add to their shopping cart) the right products faster.
• Product videos: Instead of using images and text only, create a promotional (“in use”) video of your products.
• Floating “add to bag” banner: If your product pages are longer, remind shoppers to add the item to their cart with a sticky banner

You can save your potential customers plenty of time with excellent navigation and product “quick view.”

We also have an extensive list of the best BigCommerce websites if you need more ideas.

Etnies

Etnies has a three-part header section; a notification bar, a top bar and a mega menu navigation (but only the notification bar and menu stick to the screen).

Etnies’ product pages have a lightbox gallery with additional item views and integrated customer reviews.

• Currency switcher: Integrate a currency switcher, so your shoppers don’t have to calculate the prices.
• Product reviews/ratings: Improve conversions with customer reviews and ratings on product pages.
• Wishlist icon: Not everyone will buy from you on your first visit, but they may add items to their wishlist. And the wishlist can always be accessible with a floating icon.

Velasca

Velasca has a very non-salesy above-the-fold section with a full-screen background image.

This eCommerce website also has a transparent header and top bar notification for a neater presence. However, once you hover over the header, it turns solid, with menu links revealing a multi-column drop-down on click.

Moreover, in the bottom left corner is a messaging icon and in the right corner is a back-to-top button, so all the must-haves are always available (including navigation and top bar notification).

• Full-screen hero image: Create a pleasant atmosphere with a full-screen background image.
• Transparent header: Make the first-time experience lovelier with a transparent header (so the background image pops more).
• Back-to-top button: Improve UX with a back-to-top button, so visitors don’t need to scroll back to the top.

You can test creating an unfussy above-the-fold section with an image (or a slider, video), avoiding using sales elements, text and CTAs.

Shoepassion

What’s handy about Shoepassion is that they give you the option to choose either men’s or women’s category immediately. Of course, the mega menu navigation is available for a more refined search (including the search bar).

Regarding product pages, they use a sticky right part where you can pick the right size and add the product to the cart (or pre-order it), while the left side is scrollable, showcasing product images. You can also click on each image to open a lightbox with an option to zoom it in for a more detailed look.

• Zoom-in images: Use high-resolution product images with a zoom-in/zoom-out function.
• Light design: Using a light design for the header, the footer and the base can make the products and content pop more.

You can enjoy more (organic) traffic with a regularly updated blog that’ll positively impact your overall SEO strategy.

Sophie Ratner

Sophie Ratner has a minimalist style with large images that offer an excellent browsing experience. Plus, the larger text and extra white space make the page more appealing to the eye. Very likable!

The massive image slider above-the-fold creates a strong first impression with simple text and links for everyone who wants to take immediate action.

You can also change your region anytime by clicking on the floating flag icon in the bottom right corner.

• Massive/full-screen image slider: Grab visitors’ attention with a large slideshow.
• Large text: Make the content more readable with larger typography (and more white space).
• Recently viewed products: Add a “recently viewed” section to product pages and remind the potential shoppers of the items they already viewed. A simple reminder can score you more sales.

Product page sections like “recently viewed” and “you may also like” can help you sell more items.

Nalen Ayurveda

Like Sophie Ratner, Nalen Ayurveda also features a large image slider with text and CTA buttons. Below the slider (you can also click the scroll-down button to access it) is the “in the news section,” showcasing logos of various authorities for social proof.

This eCommerce website has a soothing color scheme, which goes well with their Ayurveda-based products.

The floating header consists of a mega menu and a practical search bar with live results that display products with direct links.

• Live search results: Help visitors find the products they’re after with live search results. (The results can showcase the items and link directly to product pages.)
• Color scheme: Brand your website’s color scheme for a more immersive experience.
• PR mentions: Besides customer reviews and ratings, PR mentions can promote social proof. (Go the extra step by linking to the articles and mentions.)

A search bar with live results and recommendations can save your potential shoppers time, which is a big plus.

Bremont

While many websites would start with a video (for added engagement) and then add an image banner below it, Bremont does the opposite.

The page has an elegant mega menu, a search bar (with popular search recommendations), a notification bar at the top with text animation and a product carousel.

Product pages have extensive presentations with text and images (and sometimes videos) to get to know you with their timepieces almost on a “personal” level.

Last but not least, their newsletter subscription form informs you about the type of emails they send beforehand.

• In-depth product presentations: Create knowledgeable and extensive product presentations, especially when it comes to higher-priced items.
• Search recommendations: Speed up the search process with recommendations.

Give visitors a reason to purchase your high-end product through comprehensive product presentations, which Bremont does a really good job at.

What Makes A Great eCommerce Website?

Smooth, quick and easy mobile shopping is a must these days. Why? Because nearly 80% of customers made an online purchase using their mobile device. Plus, over 67% of all eCommerce is mobile!

Additionally, Google is also a FAN of mobile-friendly websites.

You can easily create a website with terrific mobile performance either by using a mobile-friendly website builder or a mobile-friendly WordPress theme.

One of the simplest ways to test responsiveness is using Google’s Mobile-Friendly Test tool.

Note: Everything needs to be responsive, swipeable and touch-sensitive – from the smallest to the largest elements.

Easy Online Store Navigation & Searching

Your navigation must be clean and transparent, preferably always accessible with the sticky function.

Moreover, if you use a lot of categories, create a mega menu to organize them into columns, adding links, images, etc.

Besides the header part, you can also create a valuable footer with quick links, business details, contacts, and more.

In short, ensure it takes the least amount of time to find products and categories with the combination of an excellent menu and search bar.

Branded Color Scheme/Design

This applies to all your channels, including the website, social media, newsletters, blogs, and anywhere else you’re present.

In other words, keep reminding your visitors of your brand at every interaction with it.

Create a strong and memorable first impression and address the target audience with impactful messages, visuals, catchy elements and other unique characteristics that make you stand out from the masses.

Clean Shopping Cart & Checkout

These are the two crucial eCommerce elements if you want to enjoy more sales.

Unfortunately, many online business owners are still trying to figure out shopping carts and checkouts, failing at adopting a simple strategy: Keep it simple.

With a challenging, multi-step checkout, many potential customers may decide to leave the website without making a purchase. Thus, simplifying (test one-page checkout) the process and keeping the design minimalist will benefit you greatly.

What’s more, the shopping cart’s best location is the top right corner (just because we’re all used to it).

The icon can then showcase the number of items in the cart and open a drop-down on click with a link to the checkout page.

Simple Is Better

We’ve said it earlier, and we’ll say it again because it’s so important – aim for a simple and clean design.

Many eCommerce website owners start complicating things with wild color schemes, animations and special effects.

Sure, this can work well when done in moderation, but many webmasters overdo it, which ruins their site’s UX. Plus, their page may start loading slower due to all these extra elements, which is a big NO-NO.

Also, make your website more readable and your products easily scannable with white space and simple typography (which doesn’t necessarily need to be large, but it’s worth testing).

This means adding customer reviews and ratings is key to increasing your sales. You can collect feedback by sending an email with a form or even guide the buyer to a 3d-party platform, like Trustpilot or Google Reviews, and embed it into your website.

And if you can get them to film a video you’ll boost your potential even further.

Tip: You can offer a discount on their next order in exchange for a review.

Conclusion

Instead of relying on third-party platforms and marketplaces, which give you little control over your web presence, create your eCommerce website and take your business to the next level.

You have the freedom to create, brand and personalize the exact online store you want.

And what’s even more exciting – you can make it happen even if you have zero experience with eCommerce and building websites.

One of the easiest ways is to use an eCommerce website builder. But we recommend choosing an eCommerce WordPress theme if you want to control EVERYTHING.

Moreover, these 25 examples will fill you with new ideas and inspirations that broaden the possibilities. Be you!

FAQs About eCommerce Websites

• Amazon
• eBay
• AliExpress
• Target
• Walmart
• Alibaba
• Rakuten
• JD.com
• Newegg
• Mercado Libre

How to make an eCommerce website?

The easiest way to build an eCommerce website is by using Shopify. It is a dedicated website builder for online stores that doesn’t require any knowledge and experience. And even some of the biggest brands use it.

Is eCommerce profitable?

Yes, eCommerce can be extremely profitable. With billions of online shoppers, the eCommerce market is expected to reach 8.1 trillion US dollars by 2026.

What is an eCommerce business?

It is a business model where buying and selling products and services happen exclusively online (over the internet). There are three main types of eCommerce businesses: Business-to-business (Shopify selling their services to store owners), business-to-consumer (Huel selling products to consumers) and consumer-to-consumer (eBay, where consumers list their products and sell them to other consumers).

How much does it cost to build an eCommerce website?

It costs as little as $24 per month to get your website up un running using Shopify (but you can try it for free). However, custom design and functionality require a web designer and developer, which significantly increases the costs.

Was this article helpful?

Ни для кого уже давно не секрет, что мировой объем продаж в интернете неумолимо растет из года в год. На данный момент онлайн-торговля составляет уже немногим более 5% мирового объема торговли. Только представьте себе, каждый двадцатый доллар, потраченный на покупки — тратится онлайн. Такая ситуация просто вынуждает владельцев не только крупного, но и среднего, и малого бизнеса выходить со своими товарами во Всемирную сеть. А вот тут и встает вопрос: как правильно попасть на рынок электронной коммерции? Одной из главных составляющих этого вопроса является выбор платформы для будущего интернет-магазина. Ведь таких платформ довольно много, как же правильно определить какая из них больше подходит под конкретные нужды? Давайте вместе попробуем разобраться в этом на примере нескольких систем.

Начнем, пожалуй, с WordPress. Эта платформа на PHP сейчас является самой популярной CMS. WordPress идеально подходит для новичков сайтостроения, благодаря своей хорошей документации и оперативности установки. Стоит отметить, что WordPress имеет ну уж очень широкое распространение, начиная от блогов и заканчивая e-commerce сайтами. Доля рынка этой CMS составляет 60,3%, что является внушительным показателем. Такая популярность обусловлена широким набором плагинов, виджетов для галерей, мультиязычностью, простотой администрирования. Но в тоже время, функционал WordPress простоват, поэтому зачастую его используют для новостных сайтов, блогов, но не для интернет-магазинов.

Следующей по популярности системой является Drupal (c долей рынка в 2%). Невзирая на большое количество преимуществ, которые включают в себя огромное число модулей, способных расширить функционал до бесконечности, наличие “хуков” позволяющих избежать сбоев в системе. Однако Drupal уж очень сложна в использовании.

Теперь, давайте поговорим о некоторых платформах, которые используются в преимущественно для крупных e-commerce проектов. Начнем, пожалуй, с Magento, так как по данным аналитиков W3Techs.com, за апрель 2014 года, данная платформа используется 1% всех веб-сайтов мира. А из 20 самых популярных платформ для электронной коммерции, Magento занимает долю в 34%. Тем более, по данным официального сайта, Magento обслуживает 34 компании из списка ТОП-500. Если же рассмотреть общую статистику этой платформы, то количество интернет-магазинов на Magento — более 150 000, а расширений больше 6400.

Причин такой популярности данной CMS очень много. Первое — это то, что Magento довольно стабильна, обновления выходят достаточно часто, что покрывает баги, которые появляются в системе. Также Magento поддерживает мультиязычность. Еще одним огромным плюсом Magento является наличие бесплатной community версии, а это возможность попробовать систему в действии, не потратив при этом ни копейки. Еще одна причина выбрать именно Magento состоит в том, что эта система очень гибкая. Это позволяет интегрировать ее как с социальными сетями, так и с бухгалтерскими программами. Не забываем и о том, что в “коробке” Magento идет сразу огромное количество виджетов, таких необходимых для нормальной работы интернет — магазина. Но, как говорится, идеальных вещей не бывает, поэтому и у Magento есть свои недостатки. Первым, и, наверное, наиболее важным, из них есть тот факт, что данная система, “от народа для народа” и поэтому багов в ней не избежать. Второй проблемой является квалификация администратора сайта, ведь данная работа не является такой уж простой. Для ознакомления с сайтами, работающими на Magento, стоит посетить сайты магазина одежды Rebel8 и онлайн-маркет сети Comfy.

Следующая платформа, на которую мы обратим внимание, будет Demandware. По данным официального сайта, на этой платформе в мире работает приблизительно 800 сайтов, в том числе и онлайн — магазины Adidas, Puma, HugoBoss.

Demandware — это очень сложная система, которая направлена исключительно на обслуживание крупного e-commerce. Платформа очень гибкая, легко интегрируется в различные системы и при всем этом сохраняет свою надежность. Решения Demandware для e-commerce включают в себя самые современные инструменты для онлайн — коммерции, кросс — платформенность и возможность расширенной аналитики. Но огромным минусом при выборе Demandware для своего интернет-магазина, является высокий порог входа бизнеса на рынок. Так с клиентов взымается лицензионный сбор в размере от 0.75% до 1,25% от месячного объема продаж через интернет-сайт. Так что, Demandware подходит исключительно для крупного бизнеса.

Последняя платформа в нашем кратком обзоре это IBM WebSphere Commerce. Эта очень большая и мощная платформа, позволяющая работать напрямую как с потребителями, с предприятиями, а также косвенно через партнеров.

IBM WebSphere Commerce включает в себя всю инфраструктуру промежуточного программного обеспечения, которая позволяют создать, запустить и поддерживать сайт 24х7. Для того чтобы ускорить интеграцию WebSphere, можно использовать ускорители, как SaaS с уже готовых решений. Большинство продуктов, включенных в платформу IBM WebSphere, можно назвать образцовыми в своих классах, особенно сообщение брокера WSMB или сервер приложений WAS. К примеру, на платформе WebSphere Commerce работают онлайн — маркеты таких компаний как Speedo, Champion, Jack & Jones и многие другие.
Так что выбор оптимальной платформы полностью лежит на ваших плечах. Главное помните, важно не только выбрать платформу, которая вам наиболее подходит, но и исполнителей, которые качественно сделают ваш интернет-магазин и смогут его поддерживать 24х7, 365 дней в году.

Более детальный обзор e-commerce платформ читайте в нашем блоге в дальнейшем.

Донателла Версаче — не только креативный директор Versace, но, без преувеличения, душа и сердце марки. Обращаясь к наследию Дома, тонко его чувствуя, она постоянно модернизирует и обновляет бренд. В ее глазах, Versace — это беззаветная любовь к гламуру, чувственности, властной энергичности, бескомпромиссности, всегда свежая трактовка роскоши. Все эти качества надлежало придать новому онлайн-магазину, не забыв при этом про вполне материальные черты и стиль офлайновых бутиков.

Вот первые три варианта дизайна, которые мы предложили заказчику:

В дизайне для именитого бренда очень важно сохранять единообразие, поэтому первоначально над дизайном интернет-магазина работал один человек. Когда основные элементы были отрисованы и согласованы с заказчиком, мы составили Style Sheet — перечень основных цветовых и графических составляющих, ховеров, слотов, иконок и других элементов. Только после этого был привлечен дополнительный дизайнерский ресурс. Ключевые вещи (цвета, шрифты) мы взяли из брендбука Versace. Но была и обратная связь — наработки наших дизайнеров дополнили брендбук марки.

Но и этот вариант дизайна не оказался окончательным. Донателла хотела, чтобы в качестве фона использовался рисунок мозаики “Косматеско”. Как видно на картинке выше, мы использовали нечто подобное, но картинка была далека от идеала. Оказалось, что для нужного эффекта и мозаика требуется особая — из базилики IX века Santa Prassede в Риме. Рисунок пола этой церкви используется в оформлении офлайновых магазинов Versace, его же надлежало “постелить” в виртуальном бутике. Таким образом, клиент решил перенести дух бренда из реального мира в онлайн, подарить пользователю ощущение, будто он буквально находится на территории Versace. Долгое время нам не могли предоставить качественные фотографии этой мозаики — в базилике велась реконструкция. Наконец, мы их получили:

Перекроили и подложили:

Исходный вес фоновой картинки-мозаики, перекроенной дизайнером, составил катастрофические 26 Мб. В норме, для хорошей загрузки страницы, фоновая картинка должна весить около 200 Кб. Мы провели несколько хитрых манипуляций с разрешением и типами файлов, сохраняя по несколько раз в разных форматах, добиваясь нужного качества фона при небольшом размере файла.

Поэкспериментировали с фильтрами:

Изначально, в соответствии с советами итальянцев, для каждого раздела сайта было решено применить разные цветовые темы. Один из примеров — авторский раздел Донателлы Версаче Donatella’s Hot Picks, ее личное “Избранное” на сайте. Этот раздел со временем убрали, как и цветовые темы — теперь фон одинаковый на всех страницах. Цветовое кодирование разделов реализовано в футере, иконках, плашках, при этом в общем в оформлении сайта преобладает черно-белая гамма.

Раздел Donatella’s Hot Picks пропал, зато появился раздел SALE. Как правило, лакшери-бренды не делают распродаж в своих офлайновых магазинах. А многие марки вроде Chanel, Dior и Celine принципиально не продают одежду онлайн. Во-первых, они боятся оттока клиентов из офлайн-магазинов. Продажи в интернете, по их мнению, разрушают ауру эксклюзивности и лишают покупателя удовольствия от физического соприкосновения с вещами, убивают церемонию премиум-шоппинга. Во-вторых, они приводят снобистский аргумент о том, что “продажи для нас не главное”, и консервативно стремятся сохранить идентичность бренда, играя в “hard to get”.

Исходя из подобных соображений, раздел SALE изначально на сайте не планировался. Но американское подразделение компании настояло на скидках, и в итоге этот раздел был разработан специально для магазина в США. Сейчас он подключен на всех локальных версиях. E-commerce-платформа Demandware, на которой созданы сайты Versace, позволяет администратору легко убирать или добавлять стандартные разделы на сайт, поэтому SALE может появляться и исчезать в разных локальных версиях магазина Versace уже без нашего участия. Остается только догадываться, почему на фоне других лакшери-игроков наш клиент все же решил радовать своих онлайн-шопперов время от времени.

С локализацией тоже вышла интересная история. С разработкой payment/shipping-опций особых проблем не возникло, но вот с текстами были нюансы. При переводе оказалось, что слова не помещаются в стандартные круглые слоты. Мы сбалансировали размер и расположение текстовки, чтобы сохранить визуальное единообразие:

Versace не ставили перед собой особо амбициозных целей по продажам. Ни для кого не было секретом, что и haute couture, и pret-a-porter продаются в основном в оффлайне. Но аналитика по регионам за декабрь 2012 года (сразу после запуска проекта) показала, что повод для оптимизма все же есть, и не один. В Германии (versace.de) средний чек составил 439 евро, средняя продолжительность пребывания на сайте 5,25 мин. На сайте французского магазина (versace.fr) покупатели в среднем оставляли 546 евро, топовыми запросами были сезонные куртки и шапки. Как ни странно, итальянцы (versace.it) оказались самыми экономными — в среднем 265 евро, в лидерах продаж — туалетная вода Eros и солнцезащитные очки. Британцы оказались падкими на гламурные аксессуары — сумма среднего чека 391 фунт, решение о покупке в среднем принималось за 3.59 мин, а искали на сайте по большей части часы и очки. Самыми преданными и щедрыми оказались американцы — наибольшая посещаемость среди всех сайтов Versace, средний чек 739 долларов, и это всего за 3,04 минуты в среднем, в предпочтениях — топовые очки и пояса. Любопытно, что самыми активными покупателями американского интернет-магазина Versace стали пользователи русского происхождения.

Несколько слов о разработке

Сайт реализован на платформе Demandware и представляет собой стандартное e-commerce решение с глубокой визуальной кастомизацией. С точки зрения заказчика, интернет-магазин на Demandware достаточно удобен для содержания и администрирования. Это облачная система, заказчику не нужно платить за сервер, содержать дополнительный персонал. Платформа берет на себя все технические аспекты, взимая абонплату, которая рассчитывается как процент от оборота.

Но есть и другая сторона медали. Сложность разработки сайтов на Demandware в том, что его решение «из коробки» — не самое лучшее для старта работы над проектом вроде Versace. SiteGenesis — основное приложение платформы Demandware — было перенасыщено html-разметкой и css-стилями, лишними для нашего лакшери-клиента. Для Versaсe мы создали референсное приложение — оно базировалось на SiteGenesis, но включало в себя все, что было нужно заказчику (и не включало того, чего ему не требовалось). На базе этого референса мы создали все локальные сайты бренда.