/
/
Inspirations for webdesign
/
The best online stores - inspiration

The best online stores - inspiration

The best online stores - inspiration

The most popular trends, modern, functional and tailored. Ranking of ecommerce stores. Ecoomerce inspiration at its best.

Best online stores


In this post, we want to show you the best online stores (our ranking for 2022) that we came across while browsing various industry portals and websites, galleries of work by interactive agencies from around the world. There is a whole range of online stores detached from reality, trying to follow trends, overloaded with animations and graphics. In some cases this is a legitimate approach, sometimes you can get the impression of form over substance.

How should an online store be designed?

Below are the criteria we adopted for the selected online store inspirations. That is, in our opinion, what a good store should contain to sell :

  • High UX/UI of the online store,
  • Ease of navigation and getting to the product,
  • Optimization of the store for the user (loading time and sub-page loading speed),
  • modern, clear design not overloaded with effects typical minimal style or just building an impression with effect and color.

Nicer online and ecommerce stores

Online Store - Bouguessa

The https://bouguessa.com online store features smooth animation of elements while scrolling, which makes being on the store a pleasant experience.

In addition, the layout itself is clean and clear, despite the long second section in which we have only two photos, then another high section with a video in the background and only then the products the store evokes a very positive impression. In this section, it is also worth giving kudos for the use of video - it is a very good form of encouragement and product presentation, and so rare.

najlepsze sklepy internetowe i ecommerce na 2022. Poznaj listę sklepów internetowych
minimalist and the best example of ecommerce - bouguessa online store

Subpage : product list where in an original way the option to filter products in the form of a sentence with the option to select two fields / drop-down list select / fields was presented.

wyszukiwarka na sklepie internetowym
bougessa search engine

Subpage : collection - interesting solution for scrolling the product / placing the navigation in the middle, which, contrary to appearances, does not interfere with the perception of images /.

przykład nowoczesnej i interaktywnej karty produktu
view of the collection on the online store

Do you want an online store?

Let's make an effective online store that sells together. We'll build visibility and tailor solutions to your target audience. We will create remarketing lists and implement solutions to help you sell.

See the offer and how we design and create custom online stores.

Online store - Ports 1961

Another example of an online store that took second place on our list is Porst1961 - https://ports1961.com. The store is very clear with a two-column layout - where the juxtaposition of the home page section is interesting. Instead of the classic product list and banner, the Porst1961 store presents us with a video to start (available by clicking on the section), then only 4-four tiles with product categories and collection sections to encourage us to learn more about the products.

ports sklep w typie minimalistycznym
online store ports1961

The collection sub-page is equipped with typical left-right scrolling sliders, which fit the overall concept. Although the lack, according to us, of the possibility to zoom and scroll by dragging is a minus for this sub-page.

slidery w kategoriach w sklepie internetowym
store collection subpage

Product card - here an interesting and very useful solution is to stop the text column when scrolling the page, that is, actually scrolling the product card we scroll the section with photos. In addition, after hovering over the thumbnail we get a zoom of the photo without an additional lightbox window, bravo! - the user stays at the same level of the online store.

karta produktu z przewijanymi zdjeciami
View of the product card

Status after hovering over the thumbnail - light zoom.

intuicyjna karta produktu w sklepie
View of the product card after scrolling

The pop-up panel used after adding a product to the shopping cart with information on its status is also a very good idea, but it is a pity that such a solution was missing after clicking on the shopping cart button at the top of the page.

postaw na duze produkty w twoim sklepie internetowym
basket - pull-out panel with products

Pandora Garden - a website in the form of a store

Prepared by the Sorthvid agency, the Pandora Garden website https://us.pandora.net/en/campaigns/pandora-garden (presenting Pandora products), which is also an image website, is an interesting idea to show collections and products in the form of an animated page with the option to enter the store from appropriately prepared sections - slides of the page. It is a form of storytelling during which we get to know the company's products and collections (scrolling the page we are shown successive photos moving at different speeds, graphic sections and cleverly woven into them products building the atmosphere of the Pandora Garden collection).

animowany sklep internetowy typu portfolio
modern online stores presenting collections in the form of sliders

When you click on a product, you get in a lightbox window its presentation / reflection of the product card / with a photo on the model, price and a 'buy' button directing you to the store.

zadbaj o duze produkty w Twoim sklepie
Product card in the form of a lightbox with a presentation of the product application

It's a good idea to place a 'shop the collection' button at the very top of the page on the frame, which, when clicked, shortens the way of getting to know the products to a single section presenting all the products in one place.

prezentacja produktow w sklepie internetowym
a list of products in a category and a comparison with a photo is an interesting combination that gives the user an idea of the product's use

Another section of product presentation as you scroll through the Pandora Garden collection page.

slider animowany z produktami na sklepie
Animated product vertical slider

ETQ store - ecoomerce solutions with interesting functionality

ETQ - https://www.etq-amsterdam.com is a climate-building store showcasing the collection right from the homepage. ETQ has very good functionality and an easy way to get to the product. Despite the fact that on the home page we do not have a typical list of product categories right below the banner where it usually happens, the store defends itself and gives a new interesting look - interest in the product by presenting the collection already from the first sections of the home page.

dobry ux sklepu to czytelnosc i intuicyjnosc
ETQ store showcasing modern UX and UI design

Collection subpage.

After entering the selected collection, we get specific products preceded by a high banner section with a photo from the collection to show how the product looks. Although even here it is equally interesting as product photos are interspersed with 'live' photos of the product. As you can easily see, the products have neither captions nor prices in the state before hovering / state as we present below /. The entire product information panel such as price, size, buy button is hidden in the first view - when scrolling through the sub-page, it shows only after hovering over specific products.

ETQ has also made a very functional option which is the ability to view product images from this very product list level. The whole display of information, scrolling is very smooth and soft which makes the store attractive also in terms of use.

zadbaj o stan po najechaniu na produkt
The condition of the product after hovering - visible not the second shot, but the photo real

Product Card.

Elegant, simple and accessible in terms of clear arrangement and division of information. On the left, a large photo of the product, on the right, technical data, price, and the buy button. After scrolling, there is a simple but interesting presentation of the products - subsequent photos. The entire subpage ends with information that the customer may need in this place / on the product card / and a link between the product and similar products.

duze zdjecia zachecaja do zakupu
Clear and intuitive product card

Product magnification also works well on an online store. After clicking on the photo from the product card, we get exactly what we clicked for - a large photo, not covered by anything, not in the form of a lightbox, not on a small screen in the middle, but as needed - a large photo that we can additionally use the touchbar to slide up and down after the photo. zoom in and out. In the 'background' on the left side we get options to change the photo view.

warto zadbac o zoom dla produktu
Photo enlargement - smooth animations and the ability to view the product in detail

Technically, the store is at a very high level, from readability to animations (collapse-expand, moving, scrolling), which are worth watching. The layout seems simple, but it is not clichéd in design and execution, it even arouses the desire to learn more about it / the mentioned photos on the product card, or the idea of ​​product photos interspersed with 'live' photos.

Olivia Des Cressonnieres - clear presentation of the collection

The Olivia Des Cressonnieres online store did what Pandora wanted, presenting the collection, in a similar way to Pandora. In relation to Pandora, there are definitely fewer effects, fewer bells and whistles, but it is simpler and more readable, mainly because http://olivia-des-cressonnieres.com/ is an online store in itself, and not a product / website supporting sales / for the needs of collection, which does not change the fact that the store boldly focused on building positive user experiences from the very beginning.

nie przeladowuj swojego sklepu internetowego efektami
Positive user experience - UX for an online store

The solution used on the home page itself requires additional comment. The menu solution is a journey through the store according to: collection key not product category. When entering the collection, we are still in the zone of creating an impression with photos, graphics, animations, and only from there we get to the final place - the product. All the elements are well presented, nothing disturbs the reception of the message, we know where we are, we know how to change the collection. The only drawback is that the product entry buttons are too inconspicuous and accessible - the inscription shop the collection itself is not enough, ideally the store would also use active tiles directing people to the same place. Unfortunately, the button is poorly visible on mobile devices.

nowoczesny design poprawia pozytywne doswiadczenia uzytkownika
The minimalism of UI design for an online store attracts with its photos and arrangement of elements

After entering a specific collection (product list), we receive animations that are too invasive, but pleasantly building the subpage for the first time, and clearly visible filtering of products by tags: earrings, bracelets, new products, etc. The product list itself is easy to browse, the products are in the form of tiles on a uniform surface. background with hover effect - showing the name and price of the product. Importantly, entire tiles are active for the user, and unfortunately this is still rare, often the header or the 'add' button are the only transition to the product, which is a big minus, especially in the case of a mobile user.

jednolite tla dla produktow daja spojnosc wizualna
Presentation on uniform backgrounds gives a clear perception of the product

The product card of the online store could require a slight improvement by presenting a larger photo, and, as in the case of previous stores, there is no good way to present the product - animations, enlargements, thumbnails of subsequent product views.


Online store platform - which one to choose?


There are many platforms and solutions that allow you to create an online store tailored to your needs. We will leave the issue of choosing a store building platform in solutions: dedicated, in the cloud, OpenSource or ready-made stores for another post.

Which e-commerce should you choose?

When designing an online store that would meet all quality, technical and administrative requirements, we would certainly have to order a dedicated store written from scratch to meet our expectations, and this in turn involves high costs and proprietary code that binds us to the development company for years. .

Responsiveness of the online store

However, if, as in this ranking of online stores, we focus on design, modernity, high-quality refinement of details with particular attention to the responsive version of the store (for smaller screens of mobile devices), then we should definitely be interested in implementing a store on the WordPress CMS system with a WooCommerce store module, which has unlimited design possibilities - graphics are not limited by a pre-defined author's layout or store engine - we have full freedom of implementation, expansion with additional modules supporting online sales (e.g. newsletter, online invoice, online payments, setting shipping costs in weight ranges, calculation of transport costs relative to the distance from the warehouse, implementation with accounting programs, e.g. Optima). Additionally, if we find paid Woocommerce modules, they are relatively low cost compared to proprietary solutions.

SEO optimization of the online store

Technical SEO negligence: Unfortunately, the stores in our ranking fare very poorly in terms of SEO optimization. Mainly, they do not have optimized meta titles, descriptions, photos do not have alt tags, not to mention H1-H3 headings. It is certainly not the fault of the store itself or its engine, it is more likely that the authors did not focus on SEO in this case.

Store content and visibility: The second important aspect contributing to worse SEO in the case of the given stores is the very small amount of content due to the graphic and minimalist approach. This type of (minimalist) stores have a harder time achieving high positions because the substantive content and key phrases contained therein (naturally) build reach and visibility in the search engine, which is not present in the examples given.

There are ways to bypass and combine the process of creating a store in a minimal style with very good visibility, but it is a longer and more time-consuming process that includes SEO activities permanently in our monthly budget. In addition, there is the mandatory construction of 'Landing page' subpages and a blog focused on gaining search engine traffic. Traffic is obtained from entries for complex phrases (several phrases, so-called longtail phrases).