Jak dodać galerię obrazów w PrestaShop? Darmowy moduł DC Carousel

Prezentujemy darmowy moduł DC Carousel, który pozwala dodać responsywną galerię obrazów na stronie głównej PrestaShop. Moduł oferuje karuzelę zdjęć z lightboxem, wielojęzycznymi opisami oraz pełną konfiguracją wyglądu.

Dzięki prostemu panelowi administracyjnemu można łatwo dodawać obrazy, ustawiać ich kolejność i linki. Moduł udostępniamy za darmo jako rozwiązanie ułatwiające tworzenie nowoczesnych galerii w sklepach PrestaShop.

 

1. Dlaczego galeria obrazów jest ważna w sklepie 🖼️

W sprzedaży internetowej obrazy odgrywają kluczową rolę. To właśnie zdjęcia jako pierwsze przyciągają uwagę użytkownika i pomagają szybko zrozumieć, co oferuje sklep. Dobrze zaprezentowane grafiki budują zaufanie, pokazują jakość produktów i zachęcają klientów do dalszego przeglądania oferty. W e-commerce często mówi się nawet, że klient najpierw kupuje oczami 👀.

Galeria obrazów na stronie głównej to jedno z najprostszych narzędzi zwiększających zaangażowanie użytkowników. Dzięki niej można wyróżnić najważniejsze elementy oferty – nowe kolekcje, promocje, bestsellery czy inspiracje zakupowe. Dynamiczna karuzela zdjęć pozwala zaprezentować więcej treści w atrakcyjny sposób, nie zajmując przy tym zbyt dużo miejsca na stronie.

Właściciele sklepów często wykorzystują galerie do opowiadania historii marki, prezentowania stylu produktów lub kierowania użytkowników do konkretnych kategorii. Dobrze zaprojektowana sekcja z obrazami pomaga klientom szybciej odnaleźć interesujące ich produkty i zwiększa szansę na dokonanie zakupu 📈.

Problem polega jednak na tym, że w standardowej instalacji PrestaShop nie ma wygodnego narzędzia do tworzenia nowoczesnej galerii obrazów na stronie głównej. Dlatego w tym artykule prezentujemy darmowy moduł DC Carousel (Design Cart Carousel), który pozwala łatwo dodać responsywną karuzelę zdjęć z lightboxem oraz prostą konfiguracją w panelu administracyjnym ⚙️. 

Moduł niewątpliwie przyda się podczas tworzenia sklepu internetowego.

 

2. Czym jest moduł DC Carousel 🎠

DC Carousel (Design Cart Carousel) to darmowy moduł dla PrestaShop, który umożliwia wyświetlanie responsywnej galerii obrazów w formie karuzeli na stronie głównej sklepu. Został zaprojektowany tak, aby umożliwić łatwe zarządzanie zdjęciami oraz ich prezentacją bez potrzeby edycji kodu czy instalowania dodatkowych bibliotek.

Moduł pozwala dodawać slajdy zawierające obraz, tytuł, opis oraz opcjonalny link, który może prowadzić na przykład do strony produktu, kategorii lub promocji. Dzięki temu galeria może pełnić nie tylko funkcję wizualną, ale również pomagać użytkownikom szybciej przechodzić do najważniejszych części sklepu. Całość działa w pełni responsywnie, dlatego karuzela dobrze wygląda zarówno na komputerach, jak i na urządzeniach mobilnych 📱.

Dodatkowo po kliknięciu w obraz otwiera się lightbox, w którym można wyświetlić większą wersję zdjęcia wraz z opisem i linkiem. Pozwala to tworzyć estetyczne galerie inspiracji, prezentacje produktów lub sekcje promocyjne bez przeładowywania strony.

Najważniejsze funkcje modułu obejmują:

• responsywną karuzelę obrazów dopasowaną do różnych rozdzielczości

• lightbox galerii do wyświetlania dużych zdjęć

• wielojęzyczne tytuły i opisy slajdów

• możliwość dodawania linków do produktów lub kategorii

• pełną konfigurację wyglądu w panelu administracyjnym

• zmianę kolejności slajdów metodą drag & drop

• wbudowany filemanager do zarządzania obrazami

 

Najważniejsze możliwości modułu 🚀

DC Carousel pozwala w prosty sposób stworzyć nowoczesną galerię obrazów na stronie głównej sklepu. Najczęściej wykorzystywane funkcje modułu to:

• galeria obrazów na stronie głównej sklepu

• linkowanie slajdów bezpośrednio do produktów lub kategorii

• wyświetlanie tytułów i opisów w lightboxie

• automatyczne przewijanie slajdów (autoplay) oraz nawigacja strzałkami

• możliwość dostosowania wyglądu galerii bez konieczności pisania kodu 🎨

Poniżej zamieszczam wideo prezentujące moduł DC Carousel dla Prestashop w pełnej okazałości 😎:

 

3. Jak działa galeria obrazów w DC Carousel ⚙️

Projektując DC Carousel, zależało mi na tym, aby galeria była jednocześnie prosta w obsłudze i technicznie solidna. Dlatego moduł opiera się na sprawdzonych bibliotekach frontendowych oraz standardowych mechanizmach PrestaShop. Dzięki temu działa stabilnie, jest responsywny i łatwo integruje się z motywem sklepu.

Do obsługi przewijania slajdów wykorzystuję bibliotekę Owl Carousel, która odpowiada za płynne przesuwanie obrazów, responsywność oraz funkcje takie jak autoplay czy nawigacja. Z kolei do wyświetlania dużych zdjęć po kliknięciu wykorzystuję GLightbox, który otwiera obraz w eleganckim oknie galerii z tytułem, opisem oraz opcjonalnym linkiem. Sam moduł wyświetlam na stronie głównej PrestaShop przy pomocy hooka displayHome.

Mechanizm działania jest bardzo prosty. Najpierw moduł pobiera z bazy danych wszystkie aktywne slajdy wraz z ich tłumaczeniami dla aktualnego języka sklepu. Następnie renderuję strukturę HTML karuzeli i inicjalizuję Owl Carousel, który odpowiada za działanie galerii na froncie.

Gdy użytkownik kliknie w obraz, uruchamia się GLightbox, który wyświetla powiększone zdjęcie wraz z jego tytułem, opisem oraz opcjonalnym linkiem prowadzącym np. do produktu lub kategorii.

Schemat działania wygląda więc następująco:

baza danych → renderowanie karuzeli → interakcja użytkownika → lightbox z obrazem 🖼️

 

4. Instalacja modułu DC Carousel 🧩

Instalację modułu DC Carousel przygotowałem tak, aby była szybka i nie wymagała żadnej konfiguracji technicznej. W praktyce cały proces sprowadza się do kilku prostych kroków w panelu administracyjnym PrestaShop.

Krok 1 – pobierz moduł 📦

Moduł DC Carousel można pobrać bezpłatnie z naszej strony internetowej lub bezpośrednio z repozytorium GitHub. Po pobraniu otrzymasz plik w formacie .zip, który jest gotowy do instalacji w PrestaShop.

9

 

Krok 2 – instalacja w PrestaShop ⚙️

Aby zainstalować moduł, przechodzę w panelu administracyjnym do:

Panel administracyjny → Modules → Module Manager

Następnie wybieram opcję Upload module i przeciągam lub wskazuję pobrany wcześniej plik .zip z modułem.

PrestaShop automatycznie rozpakowuje pliki i instaluje moduł w systemie.

Krok 3 – aktywacja modułu 🚀

Po zakończeniu instalacji moduł jest od razu gotowy do użycia. DC Carousel automatycznie podłącza się do odpowiednich hooków PrestaShop, dzięki czemu galeria może być wyświetlana na stronie głównej sklepu bez dodatkowej konfiguracji.

Po instalacji wystarczy przejść do ustawień modułu, aby dodać pierwsze obrazy i skonfigurować wygląd galerii.

 

5. Dodawanie obrazów do galerii 🖼️

Aby dodać zdjęcia do galerii, przechodzę w konfiguracji modułu do zakładki Obrazy. To właśnie tutaj zarządzam wszystkimi slajdami, które pojawiają się w karuzeli na stronie głównej sklepu. Panel jest bardzo prosty – mogę dodawać nowe obrazy, edytować istniejące lub usuwać te, które nie są już potrzebne.

Podczas dodawania slajdu mogę ustawić kilka podstawowych elementów:

• obraz – zdjęcie, które będzie wyświetlane w galerii

• link – opcjonalny adres prowadzący np. do produktu lub kategorii

• tytuł – nagłówek slajdu (wielojęzyczny)

• opis – tekst wyświetlany w lightboxie galerii

• aktywność – możliwość włączenia lub wyłączenia slajdu

Obrazy wybieram przy pomocy wbudowanego filemanagera, który umożliwia przeglądanie katalogów oraz przesyłanie nowych plików bezpośrednio z poziomu panelu modułu. Dzięki temu nie muszę ręcznie wgrywać zdjęć na serwer ani korzystać z FTP.

Kolejność wyświetlania slajdów mogę zmieniać bardzo łatwo metodą drag & drop. Wystarczy przeciągnąć wybrany element w tabeli, aby ustawić go w odpowiednim miejscu karuzeli. Dzięki temu szybko decyduję, które obrazy mają być widoczne jako pierwsze dla użytkowników sklepu. 🎠

 

 

6. Filemanager – zarządzanie obrazami 📁

W module DC Carousel wykorzystuję autorski filemanager, który stworzyłem jako rozwiązanie jednej z największych niedogodności PrestaShop – niewygodnego systemu wybierania obrazów w modułach. Domyślny mechanizm platformy często utrudnia szybkie zarządzanie plikami, dlatego zdecydowałem się przygotować własne narzędzie, które upraszcza cały proces pracy z grafikami.

Dzięki temu rozwiązaniu mogę wygodnie zarządzać obrazami bezpośrednio z poziomu konfiguracji modułu. Podczas dodawania lub edycji slajdu otwieram okno filemanagera, w którym mogę przeglądać katalogi z obrazami, wybierać istniejące pliki lub przesyłać nowe zdjęcia na serwer.

Filemanager umożliwia między innymi:

• przeglądanie katalogów z obrazami

• przesyłanie nowych plików graficznych na serwer

• szybkie wybieranie zdjęcia do slajdu

Projektując to narzędzie zadbałem również o bezpieczeństwo jego działania. Dostęp do plików jest ograniczony wyłącznie do wyznaczonego katalogu modułu, co zapobiega przeglądaniu innych części systemu. Dodatkowo kontroluję dozwolone rozszerzenia plików oraz maksymalny rozmiar przesyłanych obrazów.

Dzięki temu filemanager jest jednocześnie wygodny, szybki i bezpieczny, a dodawanie obrazów do galerii w DC Carousel zajmuje dosłownie kilka sekund. 🖼️

 

7. Konfiguracja wyglądu galerii 🎨

Podczas projektowania DC Carousel zależało mi na tym, aby właściciel sklepu mógł dopasować wygląd galerii do swojego motywu bez konieczności modyfikowania kodu. Dlatego w panelu modułu przygotowałem rozbudowaną sekcję Wygląd, w której można skonfigurować zarówno elementy wizualne, jak i zachowanie samej karuzeli.

Dzięki tym ustawieniom galeria może pełnić różne funkcje – od prostego slidera promocyjnego po estetyczną sekcję inspiracji na stronie głównej sklepu.

Intro nad galerią ✨

Moduł umożliwia wyświetlenie krótkiego wprowadzenia nad karuzelą obrazów. Może to być tytuł sekcji, opis promocji lub krótkie zdanie wprowadzające użytkownika w prezentowane treści.

W ustawieniach mogę określić:

• tytuł sekcji (np. nagłówek H2)

• opis wprowadzający nad galerią

Oba pola są wielojęzyczne, więc mogę przygotować treść dopasowaną do języka sklepu.

 

Wygląd tekstów 📝

W panelu modułu mogę również kontrolować wygląd tekstów wyświetlanych w sekcji intro. Dzięki temu łatwo dopasowuję je do stylu motywu sklepu.

Dostępne opcje obejmują między innymi:

• rozmiar czcionki

• kolor tekstu

• możliwość wyświetlania tekstu wielkimi literami (uppercase)

 

Ustawienia karuzeli 🎠

Karuzela może być dostosowana do różnych rozdzielczości ekranów. Dzięki temu galeria wygląda dobrze zarówno na komputerach, jak i na urządzeniach mobilnych.

W ustawieniach mogę określić:

• liczbę slajdów na desktopie

• liczbę slajdów na tablecie

• liczbę slajdów na urządzeniach mobilnych

• włączenie lub wyłączenie autoplay

• prędkość przewijania slajdów

 

Nawigacja karuzeli ⬅️➡️

Użytkownicy mogą sterować galerią za pomocą przycisków nawigacyjnych. W ustawieniach modułu mogę dopasować ich wygląd do kolorystyki sklepu.

Możliwe jest ustawienie:

• koloru przycisków nawigacji

• koloru przycisków po najechaniu kursorem (hover)

 

Ustawienia obrazów 🖼️

Dodatkowo mogę kontrolować sposób wyświetlania samych zdjęć w karuzeli. Pozwala to zachować spójny wygląd galerii niezależnie od proporcji przesyłanych grafik.

W tej sekcji dostępne są między innymi opcje:

• ustawienia proporcji obrazów

• konfiguracji obramowania zdjęć

Dzięki tym ustawieniom DC Carousel można bardzo łatwo dopasować do niemal każdego motywu PrestaShop bez ingerencji w kod.

 

8. Lightbox – powiększanie zdjęć 🔍

W module DC Carousel dodałem również obsługę lightboxa, który pozwala wyświetlić większą wersję obrazu po kliknięciu w slajd. Dzięki temu galeria nie tylko prezentuje zdjęcia w karuzeli, ale umożliwia także dokładniejsze obejrzenie grafiki bez opuszczania strony.

Gdy użytkownik kliknie w wybrany obraz w karuzeli, otwiera się eleganckie okno galerii. W tym widoku wyświetlane jest duże zdjęcie, a poniżej mogą pojawić się dodatkowe informacje związane z danym slajdem.

W lightboxie mogą być wyświetlane:

• powiększony obraz

• tytuł slajdu

• opis zdjęcia

• opcjonalny link, który może prowadzić np. do produktu lub kategorii

Dzięki temu jedno zdjęcie może pełnić nie tylko funkcję wizualną, ale również informacyjną i nawigacyjną w sklepie.

Tego typu rozwiązanie świetnie sprawdza się w wielu scenariuszach, na przykład gdy chcę zaprezentować:

• aktualne promocje w sklepie

• nowe kolekcje produktów

• inspiracje zakupowe lub stylizacje

Lightbox sprawia, że galeria wygląda nowocześnie i jednocześnie pozostaje wygodna w obsłudze dla użytkownika. 🖼️✨

 

9. Responsywność galerii 📱

Podczas projektowania DC Carousel zadbałem o to, aby galeria była w pełni responsywna i dobrze wyglądała na każdym urządzeniu. Karuzela automatycznie dopasowuje się do szerokości ekranu, dzięki czemu użytkownicy mogą wygodnie przeglądać obrazy zarówno na komputerach, jak i na tabletach czy smartfonach.

W ustawieniach modułu mogę określić, ile slajdów ma być widocznych na różnych typach urządzeń. Dzięki temu łatwo dostosowuję wygląd galerii do projektu sklepu oraz ilości dostępnej przestrzeni na ekranie.

Przykładowa konfiguracja może wyglądać następująco:

• Desktop – 4 obrazy

• Tablet – 2 obrazy

• Mobile – 1 obraz

Dzięki takiemu podejściu galeria pozostaje czytelna i estetyczna niezależnie od rozdzielczości ekranu, a użytkownik może wygodnie przeglądać prezentowane treści. 📱🖥️

 

10. Wydajność modułu ⚡

Projektując moduł DC Carousel, zwróciłem dużą uwagę na jego wydajność. Zależało mi na tym, aby galeria działała płynnie i nie obciążała strony sklepu dodatkowymi skryptami.

Moduł wykorzystuje cache Smarty, dzięki czemu wygenerowany widok karuzeli może być przechowywany w pamięci podręcznej i szybciej wyświetlany użytkownikom.

Dodatkowo skrypt Owl Carousel ładowany jest tylko wtedy, gdy jest rzeczywiście potrzebny. Jeśli w sklepie działa już inny moduł korzystający z tej samej biblioteki, PrestaShop wykorzystuje istniejący skrypt zamiast ładować go ponownie.

Dzięki temu unikam dublowania bibliotek JavaScript, co poprawia wydajność strony i skraca czas ładowania galerii. 🚀

 

11. Przykłady zastosowania galerii w sklepie 🖼️

Tworząc DC Carousel, miałem bardzo konkretny cel. Osobiście wykorzystuję ten moduł głównie do prezentowania w sklepach internetowych zdjęć przesłanych przez klientów. Takie galerie świetnie pokazują, jak produkty wyglądają w rzeczywistym użyciu i budują zaufanie do sklepu. Klienci często chętniej kupują produkty, gdy widzą je na prawdziwych zdjęciach innych użytkowników.

Galeria tego typu może pełnić rolę sekcji inspiracyjnej lub społecznościowej, gdzie prezentowane są zdjęcia produktów używanych przez klientów. Dzięki temu sklep zyskuje autentyczność, a jednocześnie powstaje atrakcyjna wizualnie część strony głównej.

Oczywiście DC Carousel sprawdza się również w wielu innych scenariuszach. Galeria może służyć między innymi do prezentowania:

• bestsellerowych produktów

• aktualnych promocji

• kolekcji sezonowych

• inspiracji zakupowych

• zdjęć przesłanych przez klientów

Dzięki swojej elastyczności moduł może być wykorzystywany zarówno jako klasyczny slider promocyjny, jak i estetyczna galeria inspiracji na stronie głównej sklepu.

 

12. Podsumowanie 🚀

DC Carousel stworzyłem jako prosty i funkcjonalny moduł, który pozwala w łatwy sposób dodać nowoczesną galerię obrazów do PrestaShop. Dzięki intuicyjnemu panelowi administracyjnemu można szybko zarządzać slajdami i dopasować wygląd galerii do stylu sklepu.

Najważniejsze zalety modułu to:

• prostota obsługi w panelu administracyjnym

• responsywny wygląd dopasowany do wszystkich urządzeń

• darmowa dostępność modułu

• pełna kontrola nad wyglądem galerii

• bezproblemowa integracja z PrestaShop

Jeśli chcesz dodać do swojego sklepu nowoczesną galerię obrazów lub sekcję inspiracji dla klientów, DC Carousel będzie prostym i skutecznym rozwiązaniem. 🎠