Electra – sklep elektryczny na Shopify z BaseLinkerem i polską logistyką

Electra to koncepcyjny sklep internetowy z asortymentem elektrycznym zbudowany na Shopify. Projekt pokazuje klasyczne podejście do e-commerce: zamiast pisać od podstaw backend, checkout i panel administracyjny, wykorzystałem gotowy ekosystem Shopify i skupiłem własny development na storefrontcie, UX oraz integracjach potrzebnych w polskiej sprzedaży internetowej.

Bazą projektu jest darmowy motyw Horizon, który został dostosowany przez konfigurację Shopify oraz własne fragmenty Liquid i Custom Liquid.

Sklep został dodatkowo połączony z BaseLinkerem, dostawą do Paczkomatów InPost i punktów ORLEN Paczki, aplikacją Pickup Points PRO, systemem opinii Judge.me, narzędziem CWILL do pozyskiwania kontaktów oraz mechanizmem prezentowania promocji zgodnym z zasadami Omnibus.

Status projektu: projekt koncepcyjny / portfolio. Marka Electra, przedstawione dane firmy, liczba klientów, statystyki oraz część opinii mają charakter demonstracyjny i nie reprezentują rzeczywistych wyników sprzedażowych działającego przedsiębiorstwa.

Co chciałem pokazać

• budowę kompletnego sklepu w klasycznym Shopify,
• wykorzystanie darmowego motywu jako fundamentu zamiast przepisywania całego storefrontu,
• modyfikowanie Horizon za pomocą Liquid i Custom Liquid,
• projektowanie katalogu dla dużej liczby produktów technicznych,
• mocno wyeksponowaną wyszukiwarkę,
• wizualne mega menu kategorii,
• stronę produktu nastawioną na szybkie podjęcie decyzji,
• obsługę promocji zgodną z Omnibus,
• integrację opinii przez Judge.me,
• popup rabatowy i pozyskiwanie leadów przez CWILL,
• Paczkomaty InPost i ORLEN Paczkę,
• integrację Pickup Points PRO z BaseLinkerem,
• wykorzystanie BaseLinkera jako zaplecza do realizacji zamówień,
• świadome użycie gotowych aplikacji zamiast pisania każdej funkcji od zera.

Jak zbudowałem projekt

Najważniejszą decyzją było pozostawienie podstawowej logiki sprzedażowej po stronie Shopify.

Platforma odpowiada za:

• produkty,
• warianty,
• kolekcje,
• ceny,
• dostępność,
• koszyk,
• checkout,
• rabaty,
• klientów,
• zamówienia.

Nie tworzę więc obok Shopify drugiego systemu produktów ani własnego checkoutu.

Własny development można dzięki temu skoncentrować tam, gdzie daje realną wartość: w interfejsie sklepu, strukturze katalogu, doświadczeniu zakupowym i integracjach operacyjnych.

Etapy realizacji

1. Architektura katalogu: podział asortymentu na logiczne kolekcje i główne grupy produktów.
2. Dostosowanie Horizon: konfiguracja motywu oraz własne modyfikacje Liquid i Custom Liquid.
3. Storefront: hero, wyszukiwarka, mega menu, kolekcje, produkty, strona produktu i sekcje zaufania.
4. Social proof: wdrożenie Judge.me i prezentacji opinii.
5. Marketing: popup rabatowy i zapis do newslettera przez CWILL.
6. Logistyka: InPost, ORLEN Paczka i Pickup Points PRO.
7. Operacje: przekazywanie zamówień do BaseLinkera.

UX sklepu: produkt ma być łatwy do znalezienia

W sklepie z artykułami elektrycznymi głównym problemem nie jest brak efektownych animacji.

Problemem jest znalezienie właściwego produktu.

Klient może szukać konkretnego bezpiecznika, przewodu, gniazdka, lampy przemysłowej albo elementu instalacji i często chce dostać się do niego możliwie szybko.

Dlatego wyszukiwarka jest jednym z najbardziej widocznych elementów całego headera.

Na desktopie zajmuje dużą część szerokości nawigacji i pozostaje dostępna również po przejściu na kartę produktu.

Główna nawigacja została ograniczona do najważniejszych elementów:

• Strona główna,
• Katalog,
• Kontakt,
• konto,
• koszyk.

Kategorie zostały przeniesione do osobnego, rozbudowanego mega menu.

Mega menu dla technicznego katalogu

Katalog został podzielony między innymi na:

• bezpieczniki i ochronę,
• elektronikę i podzespoły,
• gniazdka i włączniki,
• kable i przewody,
• oświetlenie elektryczne,
• puszki i akcesoria,
• skrzynki i rozdzielnice,
• zasilacze i transformatory.

Zamiast klasycznej pionowej listy linków użytkownik otrzymuje wizualne mega menu z grafikami produktów.

Dzięki temu kategorię można rozpoznać nie tylko po nazwie.

Menu wykorzystuje dużą część szerokości ekranu, dzięki czemu nawet przy rozbudowanym katalogu nawigacja główna pozostaje prosta.

Hero z bezpośrednim wejściem do sprzedaży

Pierwszy ekran komunikuje kategorię działalności od razu.

Nagłówek:

„Napędzamy Twój dom elektrycznością”

jest połączony z krótkim opisem oferty i dwoma CTA:

• Zobacz ofertę,
• Dowiedz się więcej.

Pierwsze prowadzi bezpośrednio w stronę sprzedaży, drugie pozwala użytkownikowi poznać sklep.

Pod głównymi CTA znajdują się dodatkowe argumenty zaufania dotyczące między innymi certyfikacji, gwarancji i zwrotów.

Na samej górze storefrontu wykorzystany został również przewijany pasek z najważniejszymi komunikatami zakupowymi:

• bezpieczne płatności,
• 30 dni na zwrot,
• bezpłatne zwroty,
• próg darmowej dostawy.

Najważniejsze warunki zakupu są więc komunikowane jeszcze przed wejściem użytkownika do katalogu.

Budowanie zaufania przed katalogiem

Dalsza część strony przedstawia Electra jako specjalistyczny sklep elektryczny.

Sekcja „O nas” łączy:

• krótki opis działalności,
• wizualizację sklepu stacjonarnego,
• najważniejsze argumenty firmy,
• korzyści zakupowe,
• CTA do oferty,
• wejście do kontaktu.

W projekcie portfolio liczby przedstawiane w tej sekcji są danymi demonstracyjnymi.

W rzeczywistym wdrożeniu takie statystyki powinny oczywiście pochodzić z danych konkretnego przedsiębiorstwa.

Kolekcje jako alternatywa dla wyszukiwarki

Nie każdy użytkownik zna nazwę konkretnego produktu.

Dlatego homepage posiada również sekcję „Kupuj według kolekcji”.

Duże kafle prowadzą bezpośrednio do najważniejszych grup asortymentu.

Użytkownik otrzymuje więc trzy podstawowe drogi znalezienia produktu:

1. wyszukiwarkę,
2. mega menu,
3. wizualne kolekcje na stronie głównej.

To szczególnie ważne przy katalogu technicznym, gdzie jedni klienci znają konkretny model, a inni dopiero szukają właściwej kategorii rozwiązania.

Produkty bez zbędnego wizualnego hałasu

Lista produktów wykorzystuje prosty grid.

Każda karta pokazuje najważniejsze dane:

• fotografię,
• nazwę,
• ocenę,
• liczbę opinii,
• cenę.

Nie dokładam do gridu dużej liczby badge'y, przycisków i informacji, które konkurują ze sobą o uwagę.

Produkt pozostaje głównym elementem interfejsu.

W przypadku technicznego e-commerce przejrzystość często daje większą wartość niż bardzo rozbudowana warstwa marketingowa.

Judge.me i opinie klientów

Do obsługi ocen i recenzji wykorzystałem Judge.me.

Oceny są widoczne już na listach produktów, dzięki czemu użytkownik może uwzględnić social proof jeszcze przed wejściem na konkretną kartę.

Na stronie produktu znajduje się pełna sekcja opinii.

Obejmuje między innymi:

• średnią ocenę,
• liczbę recenzji,
• gwiazdki,
• autora,
• datę,
• treść opinii,
• możliwość dodania własnej recenzji,
• filtrowanie,
• sortowanie.

Judge.me odpowiada za właściwy system recenzji, natomiast jego elementy zostały osadzone w storefrontcie tak, aby wizualnie pozostawały spójne z resztą sklepu.

Nie było tutaj biznesowego uzasadnienia dla pisania osobnej bazy opinii i własnego panelu moderacyjnego.

Karta produktu nastawiona na decyzję

Strona produktu korzysta z klasycznego, prostego układu.

Po lewej stronie znajduje się duża fotografia produktu.

Prawa kolumna skupia wszystkie informacje potrzebne do zakupu:

• nazwę,
• ocenę,
• liczbę opinii,
• aktualną cenę,
• poprzednią cenę,
• najniższą cenę z ostatnich 30 dni,
• informację podatkową,
• wybór ilości,
• Dodaj do koszyka,
• Kup teraz,
• opis,
• podstawowe parametry techniczne.

Klient nie musi przechodzić przez kilka ekranów storytellingu, zanim pozna cenę produktu.

W tym segmencie ważniejsze są konkretne informacje i możliwość szybkiego zakupu.

Omnibus i najniższa cena z 30 dni

Sklep uwzględnia również prawidłową prezentację produktów objętych promocją.

Na przecenionej karcie klient może zobaczyć trzy różne wartości:

1. aktualną cenę,
2. wcześniejszą cenę przekreśloną,
3. najniższą cenę z ostatnich 30 dni.

Przykładowo:

• aktualna cena: 299,99 zł,
• cena wcześniejsza: 349,99 zł,
• najniższa cena z ostatnich 30 dni: 349,99 zł.

Najniższa cena znajduje się bezpośrednio przy cenie produktu.

Nie jest ukryta w regulaminie ani prezentowana dopiero podczas checkoutu.

Dzięki temu użytkownik może ocenić promocję na podstawie realnego punktu odniesienia zamiast samego przekreślenia wyższej wartości.

Mechanizm został wdrożony za pomocą rozwiązania obsługującego Omnibus dla Shopify, zamiast ręcznego wpisywania ceny jako zwykłego tekstu w opisie produktu.

Dwa poziomy CTA na produkcie

Użytkownik może wybrać pomiędzy:

Dodaj do koszyka

Dla osoby kompletującej większe zamówienie.

Kup teraz

Dla klienta, który znalazł konkretny element i chce przejść od razu do finalizacji.

W sklepie elektrycznym oba scenariusze są częste.

Jeden użytkownik kupuje pojedynczy bezpiecznik, inny kompletuje kilkanaście elementów instalacji.

Sticky add-to-cart

Po przejściu niżej na stronie produktu użytkownik nadal może szybko dokonać zakupu.

Na dole viewportu pojawia się kompaktowy sticky add-to-cart pokazujący:

• miniaturę produktu,
• jego nazwę,
• aktualną cenę,
• poprzednią cenę,
• przycisk dodania do koszyka.

Dzięki temu przeczytanie opinii albo dodatkowych informacji nie wymaga później przewijania całej strony z powrotem do głównej sekcji produktu.

CWILL i rabat newsletterowy

Do pozyskiwania kontaktów wykorzystany został CWILL.

Na lewej krawędzi storefrontu znajduje się dyskretna zakładka informująca o możliwości uzyskania 10% zniżki.

Po jej otwarciu użytkownik otrzymuje popup zawierający:

• ofertę rabatu,
• pole adresu e-mail,
• zgodę marketingową,
• link do polityki prywatności,
• główne CTA,
• możliwość zamknięcia oferty.

Rabatu nie traktuję wyłącznie jako dekoracyjnego popupu.

Jest częścią prostego procesu lead generation: użytkownik, który nie dokona zakupu podczas pierwszego wejścia, może zostać pozyskany do późniejszej komunikacji.

Newsletter również w footerze

Formularz zapisu znajduje się również w stopce.

To daje użytkownikowi drugi moment na decyzję.

Osoba, która zamknęła popup po wejściu na stronę, nadal może zapisać się po przejrzeniu produktów i poznaniu sklepu.

Popup i footer obsługują więc dwa inne momenty ścieżki użytkownika.

Polska logistyka: InPost i ORLEN Paczka

Sklep został przygotowany pod popularny w Polsce model dostawy do punktów odbioru.

Obsługiwane są:

• Paczkomaty InPost,
• ORLEN Paczka.

Do warstwy wyboru punktu wykorzystany został Pickup Points PRO.

Zamiast wpisywać ręcznie nazwę automatu czy adres punktu, klient może wybrać odpowiednią lokalizację w procesie zakupowym.

Informacja o punkcie zostaje następnie powiązana z zamówieniem.

Pickup Points PRO i BaseLinker

Ważnym elementem konfiguracji jest integracja Pickup Points PRO bezpośrednio z BaseLinkerem.

Dzięki temu punkt wybrany przez użytkownika może uczestniczyć również w późniejszym procesie realizacji zamówienia.

Przepływ jest prosty:

BaseLinker jako zaplecze operacyjne

Klient kupuje w Shopify, ale dalsza obsługa zamówienia może zostać przeniesiona do BaseLinkera.

Dzięki temu storefront i operacje są rozdzielone.

Shopify odpowiada przede wszystkim za:

• produkty,
• klienta,
• koszyk,
• checkout,
• powstanie zamówienia.

BaseLinker przejmuje późniejszą pracę operacyjną z zamówieniami.

Takie podejście jest szczególnie użyteczne, gdy sklep w przyszłości zaczyna sprzedawać przez więcej niż jeden kanał.

Nie ma potrzeby budowania dla tego projektu dedykowanego panelu administracyjnego od zera, skoro istnieje system przeznaczony właśnie do obsługi takich procesów.

Lokalizacja sklepu bez automatycznego ładowania mapy

Electra posiada również sekcję poświęconą fizycznej lokalizacji.

Użytkownik otrzymuje:

• nazwę sklepu,
• adres,
• numer telefonu,
• adres e-mail,
• godziny otwarcia,
• przycisk prowadzący do wyznaczenia trasy.

Mapa zewnętrzna nie jest ładowana automatycznie podczas wejścia na stronę.

Najpierw widoczny jest placeholder z przyciskiem:

„Kliknij, aby załadować mapę”

oraz informacją, że po uruchomieniu zewnętrznej usługi dane mogą zostać przekazane do Google.

Dopiero działanie użytkownika powoduje załadowanie właściwej mapy.

Pozwala to uniknąć natychmiastowego ładowania kolejnego ciężkiego zasobu zewnętrznego i jednocześnie jasno komunikuje moment uruchomienia usługi firmy trzeciej.

Footer jako centrum informacji

Stopka zbiera najważniejsze informacje, których klient może potrzebować po przejrzeniu strony.

Znajdują się tam między innymi:

• dane kontaktowe,
• adres,
• linki do sklepu,
• katalog,
• kontakt,
• polityka prywatności,
• polityka zwrotów,
• zasady użytkowania,
• formularz newslettera,
• informacje o płatnościach.

Storefront komunikuje również obsługę popularnych metod płatności takich jak:

• PayU,
• BLIK,
• Google Pay,
• Apple Pay.

Horizon jako baza, nie gotowy rezultat

Electra korzysta z darmowego motywu Horizon.

Nie przedstawiam więc tego projektu jako całkowicie autorskiego motywu Shopify napisanego od pustego repozytorium.

Horizon dostarczył techniczny fundament dla:

• struktury storefrontu,
• produktów,
• koszyka,
• sekcji,
• responsywności,
• integracji z Shopify.

Następnie motyw został dostosowany do projektu przez konfigurację oraz własny Liquid / Custom Liquid.

Własny kod pojawia się tam, gdzie faktycznie daje większą kontrolę.

Nie przepisywałem funkcji, które Shopify i Horizon realizują już poprawnie, tylko po to, aby zwiększyć liczbę linii kodu w projekcie.

Dlaczego nie headless

Electra jest również przykładem sklepu, w którym Shopify Headless nie byłby automatycznie lepszym rozwiązaniem.

Dedykowany frontend w Next.js dałby więcej kontroli, ale oznaczałby również utrzymywanie:

• osobnej aplikacji,
• Storefront API,
• własnej warstwy cache,
• integracji koszyka,
• routingu produktów,
• dodatkowego deploymentu,
• kolejnej warstwy potencjalnych błędów.

Zakres Electra nie wymaga takiej architektury.

Priorytetami są tutaj:

• dobry katalog,
• sprawna wyszukiwarka,
• wygodna karta produktu,
• opinie,
• polskie dostawy,
• BaseLinker,
• promocje,
• łatwe zarządzanie sklepem.

Klasyczny Shopify odpowiada na te potrzeby znacznie prościej.

Aplikacje tylko tam, gdzie mają konkretną rolę

Jednym z łatwych sposobów na zepsucie sklepu Shopify jest instalowanie aplikacji do każdej możliwej funkcji.

Każda dodatkowa aplikacja może oznaczać więcej:

• JavaScriptu,
• requestów,
• widgetów,
• zależności,
• potencjalnych problemów z wydajnością.

Dlatego narzędzia zastosowane w Electra mają jasno określone zadania:

• Judge.me — opinie,
• CWILL — popup i lead generation,
• Pickup Points PRO — punkty odbioru,
• BaseLinker — obsługa zamówień,
• Omnibus dla Shopify — historia najniższej ceny.

Nie próbowałem zamieniać prostego sklepu w ekosystem kilkudziesięciu pluginów.

Stack technologiczny

Co pokazuje ten projekt

Electra pokazuje inną stronę mojej pracy z e-commerce niż projekty oparte na dedykowanym Next.js czy Shopify Headless.

Tutaj sukcesem projektu nie jest liczba napisanych endpointów.

Celem było wykorzystanie istniejącego ekosystemu Shopify do zbudowania sklepu posiadającego:

• rozbudowany katalog,
• mocno wyeksponowaną wyszukiwarkę,
• wizualne mega menu,
• kolekcje,
• czytelne karty produktów,
• ceny promocyjne,
• najniższą cenę z ostatnich 30 dni zgodnie z Omnibus,
• szybkie dodawanie do koszyka,
• opcję „Kup teraz”,
• sticky add-to-cart,
• opinie Judge.me,
• popup rabatowy CWILL,
• newsletter,
• Paczkomaty InPost,
• ORLEN Paczkę,
• Pickup Points PRO,
• BaseLinker,
• lokalizację sklepu,
• kompletną warstwę informacyjną.

Projekt pokazuje również ważną rzecz: custom development nie oznacza automatycznie pisania wszystkiego od zera.

Jeżeli Shopify rozwiązuje 80% potrzeb danego biznesu, często znacznie rozsądniej jest wykorzystać tę bazę i dostosować pozostałe 20%, niż budować całą platformę sprzedażową samodzielnie.

W Electra technologia została dobrana do zakresu projektu, a nie odwrotnie.

Hasło dostępu do sklepu Shopify: netova

---

Potrzebujesz sklepu Shopify dopasowanego do swojej branży, z polskimi dostawami, Omnibusem i integracją z systemami do obsługi sprzedaży? Porozmawiajmy o wdrożeniu.