Darmowy szablon dla sklepu z zabawkami - Opencart 4

Darmowy szablon dla sklepu z zabawkami - Opencart 4

Prezentuję mój najnowszy szablon dla platformy Opencart 4 - DC Toys, niesamowicie kolorowy motyw który zamienia czystą instalację Opencart w sklep rangi premium. Szablon oczywiście w pełni darmowy.

 

🎯 Dlaczego powstał Design Cart Toys?

OpenCart 4 to solidna platforma e-commerce, ale domyślne motywy, które dostajesz „z pudełka”, są dość ogólne. Działają — tak. Wyglądają poprawnie — też tak. Tylko że sklep z zabawkami ma inne oczekiwania wizualne niż sklep z częściami samochodowymi albo sklep B2B z materiałami biurowymi. Rodzice i dzieci reagują na kolory, emocje, czytelne kategorie i poczucie, że wchodzisz do miejsca pełnego radości, a nie do szarego katalogu produktów.

Właśnie dlatego zacząłem pracę nad DC Toys. Potrzebowałem motywu, który od pierwszego wejścia na stronę mówi: „tu jest zabawa, tu jest bezpiecznie, tu znajdziesz coś fajnego”. Chciałem też, żeby każdy widoczny tekst dało się edytować z panelu administracyjnego — w wielu językach — bez dotykania kodu. To brzmi oczywiście, ale w praktyce wielu szablonów OpenCart nadal wymusza edycję plików językowych albo szablonów Twig, gdy chcesz zmienić nagłówek sekcji albo tekst przycisku na stronie głównej.

Drugim powodem była sama sytuacja ekosystemu OpenCart 4 na dzień dzisiejszy, czyli w 2026 roku. Darmowych motywów pod tę wersję jest wciąż niewiele — dokładnie sześć darmowych szablonów dostępnych publicznie. W tej grupie jest też mój wcześniejszy projekt DC Minimal 4, który idzie w stronę minimalistycznego, uniwersalnego sklepu. DC Toys to świadome odejście w drugą stronę: mniej „clean corporate”, więcej koloru, emoji, karuzeli i sekcji budowanych pod storytelling marki zabawkowej.

Nie tworzyłem DC Toys jako kolejnego „ładnego skinu”. Chciałem kompletnego pakietu: motyw katalogu + moduł konfiguracyjny + domyślne treści demo + panel w formie kafelków, gdzie każda sekcja strony głównej ma swoje ustawienia. Dzięki temu po instalacji sklep nie wygląda jak pusty szkielet — od razu widać kierunek, a potem można go dopasować do własnej marki.

Oddaję szablony OC za darmo z dwóch powodów:

pierwszy to taki ze uważam OC za na prawdę świetna platformę i w miarę możliwości od lat dorzucam swoja cegiełkę wkładu. Szablony dla OC tworzę w sumie od 2012 roku. Kawał czasu.

drugi powód to w szablonach umieszczam sporo swoich autorskich mechanizmów, oddając motyw społeczności za darmo zyskuję setki, tysiące testerów którzy zgłaszają mi błędy. Wiecie ile projektów dzięki temu doszlifowałem do najwyższego poziomu? Bardzo dużo 🥸

Szablon jest nieziemski - wiem. Jeśli podoba ci się i chciałbyś go wdrożyć dla innej platformy zobacz nasza ofertę tworzenia sklepów internetowych

Jeśli posiadasz sklep internetowy na Opencart w wersji innej niż 4 lub masz problemy z instalacją zajrzyj do tworzenie sklepu internetowego Opencart.

Zobacz wideo z szybkiej prezentacji szablonu. Instalujesz, włączasz i już...szablon ładuje przykładowe dane na podstawie twojej zawartości, możesz je łatwo zmienić lub zostawić tak jak są. 

 

🌍 Wielojęzyczność od początku

Wielojęzyczność OC to funkcja natywna mocno wspierana przez system. Szablon kontynuuje tę politykę. Polska i angielska wersja językowa to minimum, ale panel obsługuje wszystkie języki skonfigurowane w OpenCart. Przy każdym polu tekstowym w module DC Toys masz zakładki z flagami — przełączasz język i wpisujesz treść. To dotyczy nagłówków sekcji, opisów, przycisków CTA, tekstów RODO w newsletterze, a nawet recenzji klientów. Nie musisz instalować dodatkowych wtyczek tłumaczeniowych tylko po to, żeby zmienić badge na banerze hero.

 

🛠️ Jakie problemy rozwiązuje ten motyw?

Przed napisaniem linijki kodu zebrałem listę bolączek, które słyszałem od właścicieli sklepów i od osób wdrażających OpenCart. DC Toys powstał jako odpowiedź na te konkretne sytuacje — nie jako lista „fajerwerków” bez sensu biznesowego.

 

🎨 Brak gotowego wyglądu sklepu z zabawkami

Większość darmowych motywów OC4 jest neutralna. Neutralność jest zaletą, gdy sprzedajesz wszystko. Przy zabawkach neutralność często oznacza nudę. DC Toys daje gotową estetykę: kolorowe pigułki kategorii, banery z gradientami, emoji przy kafelkach kategorii, sekcje „O nas” ze statystykami, opinie klientów z awatarami-emoji, banner klubu lojalnościowego i czytelne karty produktów. Nie musisz zatrudniać grafika na start — choć oczywiście możesz podmienić wszystkie obrazy na własne.

 

✏️ Treści niedostępne bez kodowania

To był dla mnie priorytet numer jeden. Każda sekcja strony głównej ma dedykowany ekran w module DC Toys. Zmiana tytułu karuzeli „Bestsellery”, opisu sekcji newslettera czy tekstu na górnym pasku odbywa się w formularzu, a nie w pliku pl-PL/default.php. Dla właściciela sklepu, który nie jest programistą, to ogromna różnica w codziennym użytkowaniu.

 

🌐 Sklepy wielojęzyczne

Jak wspomniałem wyżej — pola wielojęzyczne są wbudowane. Nie chodzi tylko o interfejs OpenCart, ale o treści marketingowe widoczne na froncie. Możesz mieć polski sklep z angielskim nagłówkiem sezonowym albo odwrotnie, bez duplikowania całej struktury sklepu.

 

🏠 Strona główna z konfigurowalnych sekcji

Strona główna w DC Toys nie jest sztywnym układem „take it or leave it”. Każda większa sekcja (poza nagłówkiem i stopką) ma przełącznik widoczności: Pokaż tę sekcję na sklepie. Możesz wyłączyć bloga, jeśli jeszcze nie masz artykułów. Możesz ukryć sekcję marek, dopóki nie uzupełnisz producentów. Możesz tymczasowo wyłączyć slider, jeśli przygotowujesz nową kampanię graficzną. Elastyczność bez rozbijania motywu.

 

🛒 Koszyk wysuwany i UX dodawania do koszyka

Inspiracją było rozwiązanie, które sprawdziło się w moim motywie DC Minimal: dodanie produktu do koszyka otwiera panel boczny z podsumowaniem, a nie od razu przerzuca klienta na osobną stronę koszyka. Przy zabawkach — gdzie rodzic często dodaje kilka pozycji z rzędu — to skraca ścieżkę zakupową i zmniejsza liczbę kliknięć „wstecz” w przeglądarce.

 

📂 Mega menu pod kolorowymi pigułkami kategorii

Menu kategorii w formie kolorowych pigułek to wizualna sygnatura motywu. Po najechaniu (na desktopie) rozwija się mega menu z podkategoriami. Dzięki temu nawet głęboka struktura katalogu pozostaje czytelna. Na mobile menu dostosowuje się do mniejszego ekranu — szczegóły zależą od Twojej struktury kategorii w OpenCart, ale szablon jest pod to przygotowany.

 

🧩 Panel administracyjny z kafelkami (dashboard)

Zamiast jednego długiego formularza z setkami pól, moduł DC Toys otwiera się na dashboardzie z kafelkami. Każdy kafelek to osobna sekcja sklepu: Header, Banner, Categories, Product Carousels i tak dalej. Wchodzisz tam, gdzie potrzebujesz, zapisujesz, wracasz. Brzmi prosto, ale po latach pracy z rozbudowanymi modułami OpenCart wiem, że taka nawigacja realnie obniża próg wejścia dla osób nietechnicznych.

 

👀 Wygląd frontu — sekcja po sekcji

Poniżej opisuję, co dokładnie zobaczysz na sklepie po instalacji DC Toys i jak te elementy współpracują ze sobą wizualnie. Domyślne treści pochodzą z pliku defaults.xml — o tym jeszcze napiszę w części o instalacji.

 

1️⃣ Górny pasek i nagłówek (header)

Na samej górze strony znajduje się wąski top bar — idealne miejsce na komunikat promocyjny, np. informację o darmowej dostawie od określonej kwoty albo kod rabatowy. Tekst edytujesz w module DC Toys → Header, osobno dla każdego języka. Możesz użyć emoji — domyślnie robię to ja, bo pasuje do charakteru sklepu.

Poniżej jest właściwy header: logo (zarządzane z panelu, z menedżera obrazów), wyszukiwarka z placeholderem i tekstem przycisku szukania (też wielojęzyczne), oraz ikony/linki do konta, listy ulubionych (wishlist) i koszyka. Etykiety przy tych elementach nie są sztywno wpisane w kod — zmieniasz je w ustawieniach Header. Dzięki temu np. zamiast „Wishlist” możesz wyświetlić „Ulubione” albo „Lista marzeń”, jeśli taki ton pasuje do Twojej marki.

Koszyk po kliknięciu otwiera panel wysuwany (slide-out cart). Widać w nim dodane produkty, można przejść do pełnego koszyka lub kontynuować zakupy. To detal, ale przy testach użytkowników w sklepach „impulsowych” robi różnicę.

Screen: baner z header
Screen: baner z header

 

2️⃣ Kolorowe pigułki kategorii + mega menu

Pod nagłówkiem jest rząd kolorowych „pigułek” reprezentujących wybrane kategorie. Kolorystyka pigułek jest zróżnicowana, żeby nawigacja była żywa i łatwa do skanowania wzrokiem. Po najechaniu na kategorię rozwija się mega menu z podkategoriami — jeśli je masz w strukturze katalogu OpenCart.

Na stronie głównej poniżej (lub w sąsiedztwie nawigacji — zależnie od układu) jest też sekcja kafelków kategorii z emoji — o niej w punkcie 4. Pigułki w menu i kafelki na stronie głównej to dwa powiązane, ale osobno konfigurowane elementy: menu bierze strukturę z katalogu OC, a kafelki wybierasz ręcznie w module Categories.

 

3️⃣ Hero — slider banerów

Centralny element strony głównej to slider banerów hero. Każdy slajd może zawierać:

  • 🏷️ Badge — mały tekst nad tytułem, np. „NOWOŚCI” albo „PROMOCJA -40%”
  • 📝 Tytuł i akcent tytułu — np. „Odkryj świat” + „magicznej zabawy!” wyróżniony kolorem
  • 💬 Opis — krótki akapit zachęcający do działania
  • 🔘 Dwa przyciski CTA z własnymi linkami — np. „Zobacz nowości” i „Bestsellery”
  • 🖼️ Obraz bohatera slajdu + opcjonalny badge na obrazie (np. „Top quality!”)

Slajdy możesz dodawać, usuwać i zmieniać kolejność metodą drag-and-drop w panelu. Tło slajdów korzysta z gradientów w trzech wariantach, które cyklicznie się zmieniają — pierwszy slajd ma jeden charakter kolorystyczny, drugi drugi, trzeci trzeci, a potem cykl się powtarza. Dzięki temu nawet przy jednym slajdzie baner nie wygląda płasko, a przy trzech i więcej całość jest spójna wizualnie bez ręcznego ustawiania kolorów.

 

4️⃣ Kafelki kategorii z emoji

Sekcja kategorii to siatka kafelków. Każdy kafelek to wybrana kategoria z katalogu OpenCart, z przypisanym emoji jako ikoną — klikasz w emoji w panelu i wybierasz z listy. Kategorie zaznaczasz checkboxami, a kolejność ustalasz przeciągając kafelki. Nie ma pola „sort order” z numerkiem — bo z doświadczenia wiem, że numerki psują się przy każdej zmianie, a drag-and-drop jest intuicyjny.

Nad kafelkami są standardowe dla DC Toys pola sekcji: badge, tytuł, akcent tytułu, opis — wszystko wielojęzyczne. Możesz napisać np. „Przeglądaj kategorie” / „Zobacz, co mamy dla Ciebie” i dopasować ton do swojej marki.

Screen: prezentacja kategorii na stronie głównej
Screen: prezentacja kategorii na stronie głównej

 

5️⃣ Karuzele produktów: Nowości, Bestsellery, Promocje

Trzy poziome karuzele produktów to serce sprzedażowe strony głównej:

  • 🆕 Nowości (Latest / New Arrivals) — produkty oznaczone jako nowe w OpenCart
  • Bestsellery — produkty z największą liczbą sprzedaży
  • 🏷️ Promocje (Special / Sale) — produkty z ceną specjalną

Każda karuzela ma własny tytuł, akcent tytułu i etykietę (label) — np. badge „Hot” przy bestsellerach. Te teksty edytujesz w module Product Carousels, osobno dla każdej z trzech grup i każdego języka. Same produkty bierze OpenCart z katalogu — nie musisz ręcznie przypisywać produktów do karuzeli „nowości”, o ile poprawnie oznaczasz je w panelu produktów.

Screen: karuzela produktów
Screen: karuzela produktów

 

6️⃣ Sekcja „O nas” (About Us)

To blok storytellingu marki. Zawiera:

  • 🖼️ Duży obraz (np. zdjęcie sklepu, dzieci bawiących się, zespół)
  • 🏷️ Badge, tytuł, akcent, sufiks tytułu — np. „Poznaj nas” / „Twój sklep” / „z zabawkami!”
  • 📄 Treść — dłuższy opis firmy, misji, doświadczenia
  • 🔘 Przycisk CTA z linkiem — np. „Dowiedz się więcej” → strona informacyjna
  • ✅ Lista cech (features) — każda z emoji, tytułem i krótkim tekstem
  • 📊 Karty statystyk — wartość (np. „5000+”), etykieta (np. „Produktów”), emoji, kolor
  • 🏆 Blok featured on image — wyróżniony element na obrazie, np. „Od 2010 roku” z ikoną trofeum

Sekcja dobrze sprawdza się, gdy chcesz budować zaufanie: liczby, lata na rynku, gwarancja, szybka wysyłka — wszystko w jednym miejscu, bez tworzenia osobnej podstrony (choć link CTA może na taką podstronę prowadzić).

Screen: sekcja o nas
Screen: sekcja o nas

 

7️⃣ Opinie klientów (Reviews)

Sekcja social proof z ogólną oceną (np. 4.9) i etykietą „na podstawie X opinii” (pole based on, wielojęzyczne). Poniżej karty pojedynczych recenzji:

  • 👤 Autor
  • 😊 Awatar jako emoji (wybierany z pickera)
  • ⭐ Ocena w gwiazdkach (1–5)
  • 📦 Nazwa produktu, którego dotyczy opinia
  • 📅 Data
  • 💬 Treść recenzji — wielojęzyczna

To recenzje prezentacyjne — wpisujesz je ręcznie w module, nie są automatycznie pobierane z systemu recenzji OpenCart (choć na stronie produktu standardowe recenzje OC nadal działajia). Dzięki temu możesz wybrać najlepsze opinie na stronę główną, starannie je sformatować i przetłumaczyć.

Screen: sekcja opinii klientów
Screen: sekcja opinii klientów

 

8️⃣ Hity sezonu + banner klubu

Sekcja Season Hits (Hity sezonu) to wyróżnienie dwóch konkretnych produktów wybranych z listy rozwijanej w panelu. Każdy może mieć własny badge wielojęzyczny — np. „Hit lata” i „Nowość”. Obok lub poniżej (zależnie od układu responsywnego) jest banner klubu — blok promujący program lojalnościowy, newsletter klubowy albo zamkniętą społeczność klientów. Ma tytuł, opis, przycisk CTA i link.

Jeśli nie masz klubu — ustaw tam np. zapis na newsletter albo link do promocji sezonowej. Sekcję możesz też wyłączyć przełącznikiem widoczności.

Screen: hity sezonu
Screen: hity sezonu

 

9️⃣ Blog

Sekcja bloga na stronie głównej wyświetla artykuły z modułu DC Blog. To osobne rozszerzenie Design Cart — bez niego sekcja bloga nie ma skąd pobierać treści i w panelu zobaczysz stosowny komunikat. W ustawieniach DC Toys → Blog wybierasz kategorię artykułów do filtrowania (albo wszystkie), oraz teksty: badge sekcji, tytuł, akcent, przycisk „Czytaj więcej” i „Wszystkie artykuły”.

Blog to dla sklepów z zabawkami często narzędzie SEO i edukacji rodziców — recenzje gier, pomysły na prezenty, poradniki wiekowe. Sam motyw nie tworzy wpisów, ale daje ładną witrynę na stronie głównej.

 

🔟 Top Brands — czołowe marki

Sekcja producentów: wybierasz manufacturerów z katalogu OpenCart checkboxami i prezentujesz ich logotypy w karuzeli lub siatce (w zależności od stylu responsywnego). Teksty nagłówka sekcji — badge, tytuł, akcent — standardowo wielojęzyczne. To dobre miejsce, gdy sprzedajesz znane marki zabawkowe i chcesz to podkreślić od progu sklepu.

 

1️⃣1️⃣ Newsletter

Formularz zapisu na newsletter z pełną konfiguracją tekstów: badge, tytuł, opis, placeholder pola e-mail, tekst przycisku, tekst pod formularzem, klauzula RODO. Dodatkowo możesz definiować tagi z emoji — np. „Promocje”, „Nowości”, „Konkursy” — jako wizualne wyróżniki korzyści z zapisu.

W panelu jest też lista subskrybentów zebranych przez formularz motywu oraz możliwość eksportu CSV. To prosta baza — nie zastąpi pełnego systemu marketing automation, ale na start wystarczy, żeby zbierać adresy i przenieść je później do Mailchimpa, FreshMaila czy innego narzędzia.

Screen: sekcja newsletter
Screen: sekcja newsletter

 

1️⃣2️⃣ Stopka (Footer)

Stopka jest rozbudowana i w pełni konfigurowalna:

  • 🖼️ Logo i opis firmy (wielojęzyczny)
  • 🔗 Social media — lista z ikoną (obraz), tytułem i URL; dodawanie, usuwanie, sortowanie
  • 📋 Cztery kolumny WYSIWYG — np. „Pomoc”, „Informacje”, „Konto”, „Kontakt” — edytor HTML jak w standardowych opisach OpenCart
  • 📞 Bloki kontaktowe — adres, telefon, e-mail
  • 📜 Wybór stron informacyjnych dla Regulaminu, Polityki prywatności i Cookies

Na dole stopki jest delikatny kredyt autorski Design Cart — soft credit, bez nachalnej reklamy. Szanuję, że to Twój sklep; chodzi o informację, kto przygotował motyw, w stylu „Powered by Design Cart”.

Screen: stopka sklepu
Screen: stopka sklepu

 

1️⃣3️⃣ Strona produktu — dodatkowe bloki

Oprócz standardowego układu OpenCart (galeria, cena, przycisk koszyka, opisy) DC Toys dodaje na stronie produktu bloki cech (feature blocks) — konfigurowane w module Product Card. Każdy blok ma emoji/ikonę, tytuł i krótki tekst, np. „🚚 Darmowa dostawa od 200 zł”, „↩️ 30 dni na zwrot”, „🛡️ Bezpieczne płatności”. To powtarzalne argumenty sprzedażowe widoczne przy każdym produkcie, bez kopiowania ich do opisu każdej pozycji ręcznie.

Screen: strona produktu
Screen: strona produktu

 

1️⃣4️⃣ Dedykowany panel klienta

Wiele sklepów nawet tych premium zaniedbuje sprawę panelu klienta. Od długiego czasu tworząc szablony temu miejscu poświęcam sporo uwagi tam by panel klienta był atrakcyjny wizualnie, czytelny, prosty w obsłudze. 

Screen: panel klienta
Screen: panel klienta

 

📦 Instalacja — krok po kroku

Instalacja DC Toys w OpenCart 4 jest prosta, jeśli trzymasz się kolejności kroków. Poniżej opisuję cały proces tak, jak sam bym go przeprowadził na świeżej instalacji sklepu. Czytam to często klientom na głos podczas wdrożeń — stąd tyle szczegółów.

Gdzie pobrać to cudo 😎? 

Jak zawsze takie genialne stuff'y pobieramy na naszej stronie lub Github.

Pobierz z Design Cart1

 

Pobierz z GitHub

 

DC Toys znajdziecie również na oficjalnym Opencart Marketplace za jedyne $400.

...żartuję, tam też jest za darmo ☺️

 

Plik instalacyjny musi nazywać się dokładnie dc_toys.ocmod.zip — z podkreślnikiem, nie myślnikiem. W OpenCart 4 nazwa pliku ZIP odpowiada kodowi rozszerzenia i trafia do katalogu extension/dc_toys/. Gdybyś użył np. dc-toys.ocmod.zip, system utworzyłby inny folder i ścieżki w kodzie by się nie zgadzały.

Poprawna struktura archiwum (uproszczona):

  • install.json
  • defaults.xml
  • admin/ — kontrolery, szablony, języki panelu
  • catalog/ — szablony frontu, assety
  • system/ — helpery, startup

Ważne: w paczce nie ma katalogu upload/ na wierzchu. Stare paczki OC3 miały strukturę upload/admin/... — w OpenCart 4 installer kopiuje ścieżki 1:1 do extension/{nazwa}/. Jeśli widzisz po instalacji ścieżki typu extension/dc_toys/upload/admin/..., masz złą paczkę. Odinstaluj ją w Installerze i wgraj poprawny plik.

 

1. Extensions → Installer

  1. Zaloguj się do panelu administracyjnego OpenCart 4.
  2. Wejdź w Extensions → Installer (bezpośredni URL często wygląda jak index.php?route=marketplace/installer).
  3. Wybierz plik dc_toys.ocmod.zip i prześlij go na serwer.
  4. Krytyczny krok: po uploadzie, w tym samym oknie Installera, kliknij przycisk Install / Instaluj przy wgranej paczce.

Sam upload nie kończy instalacji. To najczęstszy błąd, jaki obserwuję: pliki leżą na serwerze, ale theme i moduł nie pojawiają się na listach rozszerzeń, bo nikt nie kliknął Instaluj. OpenCart 4 wymaga tego jawnego kroku.

 

2. Weryfikacja ścieżek po instalacji

Po poprawnym Install na serwerze powinny istnieć m.in.:

  • extension/dc_toys/admin/controller/theme/dc_toys.php
  • extension/dc_toys/admin/controller/module/dc_toys.php

Jeśli zamiast tego widzisz extension/dc_toys/upload/admin/... — struktura ZIP była błędna. Napraw to przed dalszymi krokami.

 

3. Themes — instalacja i włączenie

  1. Idź do Extensions → Extensions.
  2. W filtrze typu wybierz Themes.
  3. Znajdź Design Cart Toys / DC Toys.
  4. Kliknij Install (instalacja theme).
  5. Po instalacji kliknij Edit i ustaw Status → Enabled, zapisz.

Instalacja theme automatycznie:

  • rejestruje startup katalogu,
  • instaluje wpis modułu ustawień DC Toys,
  • dodaje uprawnienia do modułu,
  • kopiuje domyślne obrazy do image/catalog/dc_toys/,
  • wczytuje domyślne dane z defaults.xml, jeśli moduł nie ma jeszcze zapisanych ustawień.

 

4. System → Settings — przypisanie theme

  1. Otwórz System → Settings.
  2. Edytuj swój sklep.
  3. Na zakładce sklepu/theme wybierz motyw Design Cart Toys (dc_toys).
  4. Zapisz.

Bez tego kroku front nadal będzie używał poprzedniego motywu, nawet jeśli DC Toys jest zainstalowany i włączony na liście theme.

 

5. Modules → DC Toys — konfiguracja

  1. Wejdź w Extensions → Extensions → Modules.
  2. Znajdź DC Toys — powinien być już zainstalowany.
  3. Otwórz moduł — zobaczysz dashboard z kafelkami sekcji.
  4. Przejdź przez sekcje, dostosuj treści i obrazy, zapisuj formularze.

Jeśli sekcje są puste mimo instalacji, sprawdź czy kliknąłeś Install w Installerze i Install przy theme. Seed z defaults.xml uruchamia się tylko raz, gdy brak zapisanych danych modułu. Możesz też ponownie zapisać moduł albo sprawdzić obecność pliku extension/dc_toys/defaults.xml.

 

6. Weryfikacja frontu

Otwórz sklep w oknie incognito (żeby uniknąć starego cache przeglądarki). Sprawdź:

  • ✅ kolorowe menu kategorii i header,
  • ✅ sekcje strony głównej z domyślnymi treściami,
  • ✅ stopkę z kredytem Design Cart,
  • ✅ dodawanie produktu do koszyka i wysuwany panel koszyka.

Jeśli coś wygląda „po staremu”, wyczyść cache szablonów Twig w storage/cache/template/ i odśwież stronę.

 

🗑️ Odinstalowanie

Gdy chcesz usunąć motyw:

  1. W System → Settings przełącz sklep na inny theme (np. domyślny).
  2. W Extensions → Themes wykonaj Uninstall na Design Cart Toys.
  3. Opcjonalnie: Extensions → Modules → Uninstall DC Toys.
  4. Opcjonalnie: Extensions → Installer → usuń paczkę z listy (kasuje pliki z extension/dc_toys/).

Dane modułu (subskrybenci newslettera, zapisane ustawienia) znikną po odinstalowaniu modułu — zrób eksport CSV subskrybentów wcześniej, jeśli go potrzebujesz.

 

 

⚙️ Dokumentacja modułu DC Toys — każdy kafelek i opcja

Moduł ustawień otwiera się na dashboardzie z kafelkami. Poniżej opisuję każdą sekcję i każdą opcję, którą tam znajdziesz. To praktyczny przewodnik — możesz go traktować jak skróconą instrukcję obsługi.

Screen: kokpit panelu konfiguracyjnego
Screen: kokpit panelu konfiguracyjnego

 

🧭 Wspólne elementy panelu

Zanim przejdę do sekcji, kilka rzeczy powtarza się wszędzie:

  • 🚩 Zakładki językowe z flagami — przy polach wielojęzycznych przełączasz język i wpisujesz treść osobno dla PL, EN itd.
  • 🖼️ Menedżer obrazów — przy polach graficznych masz podgląd, przycisk Edit (otwiera standardowy file manager OpenCart) i Clear (czyści wybór).
  • 👁️ Przełącznik widoczności — „Pokaż tę sekcję na sklepie” — dostępny we wszystkich sekcjach frontu oprócz Header i Footer (nagłówek i stopka są zawsze aktywne).
  • 💾 Przycisk Zapisz w nagłówku formularza — zapis dotyczy tylko bieżącej sekcji (np. sam Banner), nie musisz przewijać całego modułu.
  • 📋 Domyślne wartości po instalacji pochodzą z pliku defaults.xml — możesz je nadpisać, ale dobrze jest zacząć od podglądu demo i stopniowo podmieniać na własne.

Warto dodać że styl panelu admina również możesz pobrać z mojego bloga, używam dokładnie tej paczki: DC Interface — UI system

 

🧭 Header (Nagłówek)

Kafelek 🧭 Header — ustawienia górnej części sklepu. Brak przełącznika widoczności (header jest zawsze widoczny).

Screen: ustawienia header
Screen: ustawienia header

Opcje:

  • 🖼️ Logo — obraz logotypu (menedżer obrazów Edit/Clear)
  • 📢 Top bar message — tekst na górnym pasku promocyjnym, wielojęzyczny
  • 👤 Account label — etykieta linku do konta klienta
  • ❤️ Wishlist label — etykieta listy ulubionych
  • 🛒 Cart label — etykieta koszyka
  • 🔍 Search placeholder — podpowiedź w polu wyszukiwania
  • 🔎 Search button text — tekst przycisku szukaj

Typowy scenariusz: wgrywasz własne logo PNG/SVG, zmieniasz top bar na aktualną promocję („Darmowa dostawa w marcu!”), a etykiety dostosowujesz do języka sklepu.

 

🖼️ Banner (Slider hero)

Kafelek 🖼️ Banner — slider na stronie głównej.

Screen: kokpit ustawienia banera
Screen: kokpit ustawienia banera

Opcje globalne:

  • 👁️ Widoczność sekcji — włącz/wyłącz cały slider

Slajdy — lista rozwijana, sortowana drag-and-drop. Przycisk dodawania nowego slajdu. Każdy slajd zawiera:

  • 🏷️ Badge — wielojęzyczny
  • 📝 Title — tytuł główny, wielojęzyczny
  • Title accent — wyróżniona część tytułu, wielojęzyczna
  • 💬 Description — opis, wielojęzyczny
  • 🔘 CTA1 — tekst pierwszego przycisku, wielojęzyczny
  • 🔗 CTA1 link — URL pierwszego przycisku
  • 🔘 CTA2 — tekst drugiego przycisku, wielojęzyczny
  • 🔗 CTA2 link — URL drugiego przycisku
  • 🖼️ Image — obraz slajdu (menedżer obrazów)
  • 🏅 Image badge — tekst na obrazie, wielojęzyczny

Uwaga o gradientach: tła slajdów korzystają z trzech wariantów gradientu stosowanych cyklicznie (slajd 1 → wariant A, slajd 2 → B, slajd 3 → C, slajd 4 → znów A itd.). Nie musisz tego konfigurować — działa automatycznie i utrzymuje spójność wizualną.

 

🎠 Categories (Kategorie)

Kafelek 🎠 Categories — kafelki kategorii na stronie głównej.

Screen: kokpit ustawienia kategorii
Screen: kokpit ustawienia kategorii

Teksty sekcji (wielojęzyczne):

  • 🏷️ Badge
  • 📝 Title
  • ✨ Title accent
  • 💬 Description

Wybór kategorii:

  • ☑️ Lista wszystkich kategorii sklepu jako kafelki z checkboxem
  • 😀 Emoji icon — kliknięcie otwiera picker emoji; przypisanie per kategoria
  • ↕️ Drag-and-drop sort — kolejność ustalasz przeciąganiem; brak ręcznego pola numerycznego sort order

👁️ Przełącznik widoczności sekcji na sklepie.

 

🛍️ Product Carousels (Karuzele produktów)

Kafelek 🛍️ Product Carousels — trzy grupy karuzeli.

Grupa 1 — New Arrivals / Nowości (kod: latest):

  • 📝 Title — wielojęzyczny
  • ✨ Title accent — wielojęzyczny
  • 🏷️ Label — wielojęzyczny (np. badge „Nowe”)

Grupa 2 — Bestsellers / Bestsellery (kod: bestseller):

  • 📝 Title — wielojęzyczny
  • ✨ Title accent — wielojęzyczny
  • 🏷️ Label — wielojęzyczny

Grupa 3 — Sale / Promocje (kod: special):

  • 📝 Title — wielojęzyczny
  • ✨ Title accent — wielojęzyczny
  • 🏷️ Label — wielojęzyczny

👁️ Przełącznik widoczności sekcji. Produkty w karuzelach pochodzą automatycznie z logiki OpenCart — moduł steruje tylko tekstami i widocznością.

 

🏠 About Us (O nas)

Kafelek 🏠 About Us — sekcja storytellingu.

Screen: kokpit ustawienia sekcji "o nas"
Screen: kokpit ustawienia sekcji "o nas"

Opcje:

  • 🖼️ Image — główny obraz sekcji
  • 🏷️ Badge — wielojęzyczny
  • 📝 Title — wielojęzyczny
  • Title accent — wielojęzyczny
  • 📌 Title suffix — wielojęzyczny (trzecia część nagłówka)
  • 📄 Content — treść opisowa, wielojęzyczna (textarea)
  • 🔘 CTA — tekst przycisku, wielojęzyczny
  • 🔗 CTA link — adres URL przycisku

Featured on image — blok na obrazie:

  • 😀 Icon (emoji z pickera)
  • 📝 Title — wielojęzyczny
  • 💬 Text — wielojęzyczny

Features (cechy) — lista elementów, każdy z:

  • 😀 Icon (emoji)
  • 📝 Feature title — wielojęzyczny
  • 💬 Feature text — wielojęzyczny

Stats (statystyki) — karty liczb, każda z:

  • 🔢 Value — np. „5000+”
  • 🏷️ Label — wielojęzyczny
  • 😀 Icon (emoji)
  • 🎨 Color — kolor akcentu karty

👁️ Przełącznik widoczności sekcji.

 

💬 Reviews (Opinie klientów)

Kafelek 💬 Reviews.

Screen: kokpit ustawienia sekcji opinii
Screen: kokpit ustawienia sekcji opinii

Nagłówek sekcji:

  • 🏷️ Badge — wielojęzyczny
  • 📝 Title — wielojęzyczny
  • ✨ Title accent — wielojęzyczny
  • 📊 Overall rating — ogólna ocena wyświetlana w sekcji (np. 4.9)
  • 📋 Based on label — np. „na podstawie 847 opinii”, wielojęzyczny

Review items — lista opinii (dodawanie, usuwanie, sortowanie). Każda opinia:

  • 👤 Author — imię/nick autora
  • 😊 Avatar emoji — wybór z pickera (zestaw „people”)
  • Stars — ocena 1–5 (klikalne gwiazdki)
  • 📦 Product name — nazwa produktu w opinii
  • 📅 Date — data (pole typu date)
  • 💬 Review text — treść, wielojęzyczna

👁️ Przełącznik widoczności sekcji.

 

✨ Season Hits (Hity sezonu)

Kafelek ✨ Season Hits.

Screen: kokpit ustawienia sekcji "Hity sezonu"
Screen: kokpit ustawienia sekcji "Hity sezonu"

Teksty sekcji:

  • 🏷️ Badge — wielojęzyczny
  • 📝 Title — wielojęzyczny
  • ✨ Title accent — wielojęzyczny

Produkty wyróżnione:

  • 📦 Product 1 — wybór z listy produktów
  • 🏷️ Product 1 badge — wielojęzyczny
  • 📦 Product 2 — wybór z listy produktów
  • 🏷️ Product 2 badge — wielojęzyczny

Club banner (banner klubu):

  • 📝 Club title — wielojęzyczny
  • 💬 Club description — wielojęzyczny
  • 🔘 Club CTA — tekst przycisku, wielojęzyczny
  • 🔗 Club link — URL

👁️ Przełącznik widoczności sekcji.

 

📝 Blog

Kafelek 📝 Blog — wymaga zainstalowanego modułu DC Blog.

Screen: kokpit ustawienia sekcji bloga
Screen: kokpit ustawienia sekcji bloga

Opcje:

  • 📁 Category filter — wybór kategorii artykułów (lub „wszystkie”)
  • 🏷️ Badge — wielojęzyczny
  • 📝 Title — wielojęzyczny
  • ✨ Title accent — wielojęzyczny
  • 📖 Read more — tekst przycisku „Czytaj więcej”, wielojęzyczny
  • 📚 All articles — tekst linku do listy wszystkich artykułów, wielojęzyczny

Bez DC Blog sekcja nie ma skąd pobierać wpisów — w panelu zobaczysz ostrzeżenie. Sam motyw nie instaluje bloga automatycznie.

👁️ Przełącznik widoczności sekcji.

 

🏷️ Top Brands (Marki)

Kafelek 🏷️ Top Brands.

Screen: kokpit ustawienia sekcji karuzeli marek
Screen: kokpit ustawienia sekcji karuzeli marek

Teksty sekcji:

  • 🏷️ Badge — wielojęzyczny
  • 📝 Title — wielojęzyczny
  • ✨ Title accent — wielojęzyczny

Wybór producentów:

  • ☑️ Lista manufacturerów z katalogu OpenCart — zaznaczasz checkboxami, które marki pokazać

👁️ Przełącznik widoczności sekcji.

 

📧 Newsletter

Kafelek 📧 Newsletter.

Teksty formularza (wielojęzyczne):

  • 🏷️ Badge
  • 📝 Title
  • 💬 Description
  • ✉️ Placeholder — podpowiedź w polu e-mail
  • 🔘 Button — tekst przycisku zapisu
  • 📋 Footer text — tekst pod formularzem
  • ⚖️ RODO text — klauzula zgody / informacja o przetwarzaniu danych

Tags (tagi korzyści):

  • ➕ Dodawanie tagów z emoji i wielojęzycznym tekstem (label)
  • ↕️ Sortowanie drag-and-drop

Subskrybenci:

  • 👥 Lista adresów e-mail zapisanych przez formularz na froncie
  • 📥 Export CSV — pobranie listy subskrybentów

👁️ Przełącznik widoczności sekcji.

 

🦶 Footer (Stopka)

Kafelek 🦶 Footer — bez przełącznika widoczności (stopka zawsze jest).

Opcje:

  • 🖼️ Logo — logo w stopce (może być inne niż w headerze)
  • 💬 Description — krótki opis firmy, wielojęzyczny

Socials (media społecznościowe): lista z dodawaniem/usuwaniem/sortowaniem. Każdy wpis:

  • 🖼️ Icon image — obraz ikony (np. logo Facebooka)
  • 📝 Title — nazwa serwisu
  • 🔗 URL — link do profilu

Columns (kolumny WYSIWYG): cztery niezależne kolumny treści z edytorem HTML — np. linki pomocnicze, informacje o sklepie, mapa kategorii w HTML.

Contact blocks (bloki kontaktowe): dane kontaktowe (adres, telefon, e-mail — struktura zależy od pól w formularzu stopki).

Strony prawne:

  • 📜 Terms — wybór strony informacyjnej OpenCart jako regulamin
  • 🔒 Privacy — polityka prywatności
  • 🍪 Cookies — informacja o cookies

 

📦 Product Card (Karta produktu)

Kafelek 📦 Product Card — ustawienia dodatkowych bloków na stronie produktu (nie mylić z miniaturką produktu na liście).

Feature blocks — lista bloków, każdy z:

  • 😀 Icon — emoji z pickera
  • 📝 Title — wielojęzyczny
  • 💬 Text — wielojęzyczny

Typowe użycie: powtarzalne USP sklepu widoczne przy każdym produkcie — dostawa, zwroty, bezpieczeństwo, gwarancja.

 

💡 Praktyczne wskazówki po wdrożeniu

Kilka rzeczy, które pomagają po pierwszej instalacji — podpowiadam je klientom na końcu każdego wdrożenia.

 

🖼️ Obrazy i wydajność

Domyślne obrazy demo trafiają do image/catalog/dc_toys/. Podmień je na własne fotografie produktów i banerów — najlepiej w rozsądnej rozdzielczości (hero ~1200–1600 px szerokości wystarczy na większość ekranów). OpenCart i tak generuje miniatury, ale ciężkie pliki 5 MB od każdego banera nie są potrzebne.

 

📱 Mobile first

Testuj sklep na telefonie. Mega menu, karuzele i slide-out cart to elementy, które szczególnie warto sprawdzić na małym ekranie. DC Toys jest responsywny, ale treści — długie tytuły banerów czy zbyt długie badge — warto skrócić pod mobile ręcznie w ustawieniach.

 

🌐 Tłumaczenia

Jeśli masz tylko polski sklep dziś, a angielski planujesz za pół roku — i tak warto od razu uzupełnić oba języki w module. Puste pola w drugim języku mogą wyświetlać puste fragmenty UI, gdy klient przełączy język sklepu.

 

🔗 Linki CTA

Przy banerach i sekcji About podawaj pełne ścieżki wewnętrzne OpenCart, np. /index.php?route=product/category&path=20 albo skrócone URL-e, jeśli masz włączone SEO URL. Testuj każdy przycisk po zapisie — literówka w linku to najczęstszy „bug”, który nie jest bugiem kodu.

 

📊 Kolejność sekcji na stronie głównej

Kolejność sekcji na froncie jest ustalona w szablonie motywu (home_sections) — nie sortujesz jej drag-and-drop z dashboardu. Za to każdą sekcję możesz wyłączyć. Jeśli np. nie używasz bloga, wyłącz go w ustawieniach Blog zamiast zostawiać pusty placeholder.

 

🧸 DC Blog jako uzupełnienie

Jeśli zależy Ci na content marketingu, doinstaluj DC Blog z designcart.pl. Sekcja na stronie głównej jest już gotowa — brakuje tylko źródła artykułów. Bez bloga reszta motywu działa normalnie.

 

❓ Najczęstsze pytania

Czy DC Toys jest darmowy?

Szczegóły licencji i aktualna dostępność sprawdzisz na designcart.pl. Ten artykuł koncentruje się na tym, jak motyw działa i jak go skonfigurować — nie na cenniku, bo może się zmieniać w czasie.

 

Czy mogę użyć DC Toys w sklepie innym niż z zabawkami?

Technicznie tak — to nadal OpenCart. Estetyka jest jednak pod sklepy z produktami dla dzieci, grami i prezentami. W sklepie z częściami industrialnymi wyglądałby nie na miejscu, chyba że celowo budujesz bardzo playfulness markę.

 

Czy motyw nadpisuje core OpenCart?

Działa jako rozszerzenie theme w extension/dc_toys/ ze startup hookiem — nie modyfikuje plików rdzenia. Aktualizacja OpenCart 4.x nie powinna kasować motywu, o ile nie zmienią się drastycznie API theme (standardowe ryzyko każdego szablonu OC4).

 

Co jeśli mam już DC Minimal 4?

Możesz mieć oba zainstalowane — w Settings wybierasz aktywny theme. DC Minimal to minimalizm i uniwersalność; DC Toys to kolor i sekcje pod branżę zabawkową. To complementary produkty, nie konkurencja wewnątrz jednego sklepu naraz.

 

Czy subskrybenci newslettera są zgodni z RODO?

Formularz daje pole na tekst RODO — to Ty odpowiadasz za treść zgody i dalsze przetwarzanie danych. Moduł zbiera e-mail i datę zapisu; eksport CSV pomaga przenieść listę do profesjonalnego narzędzia mailingowego z double opt-in, jeśli tego wymagasz.

 

🧸 Dla kogo jest Design Cart Toys?

DC Toys powstał z myślą o:

  • 🛍️ sklepach internetowych z zabawkami, grami, puzzlami i produktami dla dzieci,
  • 👨‍💼 właścicielach sklepów, którzy chcą samodzielnie edytować treści bez programisty,
  • 🌍 sklepach wielojęzycznych na OpenCart 4,
  • 🚀 osobach startujących z OC4, które potrzebują gotowego wyglądu od day one — z demo treściami z defaults.xml,
  • 🔧 integratorach i freelancerach wdrażających OpenCart — bo instalacja jest opisana krok po kroku, a panel modułu jest podzielony na logiczne kafelki.

Nie obiecuję, że motyw sprzeda za Ciebie produkty — to nadal zależy od asortymentu, cen, logistyki i marketingu. Obiecuję natomiast, że dostajesz spójny, radosny szablon z sensownym panelem konfiguracyjnym, który szanuje Twój czas. Piszę to po wielu godzinach testów na OpenCart 4 i po rozmowach z ludźmi, którzy po prostu chcieli „sklep z zabawkami, który wygląda jak sklep z zabawkami”.