# Lookbook Zakupowy: Shop the Look > Moduł Lookbook Zakupowy — Shop the Look zamienia Twoje zdjęcia aranżacyjne w interaktywne witryny: umieszczasz klikalne punkty (hotspoty) na produktach widocznych na zdjęciu, a odwiedzający mogą poznać każdy artykuł i… - Strona: - Język: pl - Zaktualizowano: 2026-09-09 - Inne języki: [fr](https://www.datafirefly.com/documentation/dfshopthelook/index.md), [en](https://www.datafirefly.com/en/documentation/dfshopthelook/index.md), [es](https://www.datafirefly.com/es/documentation/dfshopthelook/index.md), [de](https://www.datafirefly.com/de/documentation/dfshopthelook/index.md), [it](https://www.datafirefly.com/it/documentation/dfshopthelook/index.md), [pt](https://www.datafirefly.com/pt/documentation/dfshopthelook/index.md), [nl](https://www.datafirefly.com/nl/documentation/dfshopthelook/index.md) - Indeks: Moduł **Lookbook Zakupowy — Shop the Look** zamienia Twoje zdjęcia aranżacyjne w interaktywne witryny: umieszczasz klikalne punkty (hotspoty) na produktach widocznych na zdjęciu, a odwiedzający mogą poznać każdy artykuł i dodać cały look do koszyka jednym kliknięciem. Ta dokumentacja obejmuje instalację, tworzenie looka, wybór wariantów, tryby wyświetlania i zachowanie po stronie sklepu. ## Zgodność - PrestaShop 8.0 do 8.2 - PrestaShop 9.0 - Pojedynczy sklep i wielosklepowość - Interfejs przetłumaczony na 8 języków (EN, FR, DE, ES, IT, PL, PT, NL) - Motywy oparte na Classic ## Instalacja 1. Przejdź do **Moduły > Menedżer modułów** w panelu administracyjnym. 2. Kliknij **Wgraj moduł** i wybierz plik `dfshopthelook.zip`. 3. Po instalacji w menu **Katalog** pojawia się nowa zakładka **Shop The Look**. Podczas instalacji moduł automatycznie rejestruje swoje hooki wyświetlania (strona główna i strona produktu) oraz tworzy tabele potrzebne do przechowywania looków i ich hotspotów. ## Tworzenie pierwszego looka Otwórz **Katalog > Shop The Look**, a następnie kliknij **Dodaj nowy look**. ### 1. Podaj tytuł i zdjęcie Wpisz **tytuł** (tłumaczalny w każdym języku) oraz opcjonalnie krótki **opis**. Następnie wgraj **zdjęcie looka**: JPG, PNG, GIF lub WEBP, maksymalnie 8 MB, najlepiej o szerokości co najmniej 1200 px. Zaraz po wybraniu pliku w edytorze pojawia się podgląd, jeszcze przed zapisaniem. ### 2. Umieść hotspoty Kliknij bezpośrednio na zdjęciu w miejscu, gdzie znajduje się produkt: otworzy się okno wyszukiwania. Wpisz **nazwę** lub **numer referencyjny** produktu i wybierz go z listy (miniatury ułatwiają identyfikację). Punkt możesz w każdej chwili przesunąć, **przeciągając** go myszką. Współrzędne zapisywane są procentowo, co gwarantuje wierne rozmieszczenie niezależnie od rozmiaru wyświetlanego zdjęcia w sklepie. ### 3. Wybierz wariant widoczny na zdjęciu Jeśli wybrany produkt ma warianty, pojawia się drugi krok: **„Który wariant jest widoczny na zdjęciu?”**. Wybierz dokładnie tę kombinację, którą widać na obrazie (na przykład „Kolor: Ecru, Rozmiar: M”), albo pozostaw **Wariant domyślny**, jeśli zdjęcie nie pokazuje konkretnej wersji. Ten wariant pozostaje **zmienialny w dowolnym momencie**: każdy punkt na liście pod zdjęciem ma własną listę rozwijaną. Możesz więc poprawić kolor lub rozmiar w looku zapisanym dawno temu, bez usuwania i ponownego umieszczania hotspotu. Jeśli przypisany wariant zostanie później usunięty z katalogu, lista automatycznie wraca do pozycji „Wariant domyślny”. ### 4. Zarządzaj listą punktów Pod zdjęciem każdy hotspot pojawia się ze swoim numerem, powiązanym produktem, wariantem i współrzędnymi. Użyj ikony kosza, aby usunąć punkt. Możesz umieścić dowolną liczbę hotspotów, a nawet powiązać kilka punktów z tym samym produktem. ### 5. Wyróżnienie i zapis Włącz **Wyróżniony na stronie głównej**, jeśli ten look ma zasilać karuzelę na stronie głównej. Ustaw **pozycję** (kolejność wyświetlania) oraz stan **Włączony**, a następnie kliknij **Zapisz**. Na liście looków kolumna **Wyróżniony** pozwala przełączyć ten stan jednym kliknięciem, bez otwierania formularza. ## Konfiguracja wyświetlania Na stronie konfiguracji modułu (**Menedżer modułów > Konfiguruj**) niezależnie sterujesz stroną główną i stroną produktu. ### Dwa tryby do wyboru - **Karuzela**: kilka looków prezentowanych obok siebie jako karty. Kliknięcie otwiera pełne okno. - **Pojedynczy rozwinięty look**: jeden look osadzony bezpośrednio na stronie, zdjęcie po lewej i lista produktów po prawej, **bez żadnego okna popup**. Oba miejsca konfiguruje się osobno: możesz na przykład pokazać duży rozwinięty look na stronie głównej i karuzelę na stronie produktu. ### Strona główna W trybie karuzeli wyświetlane są wyłącznie looki **wyróżnione**, do ustalonego przez Ciebie limitu. W trybie pojedynczego looka wybierz żądany look z listy **Look wyświetlany na stronie głównej** albo pozostaw „Pierwszy wyróżniony look”. Jeśli wybrany look zostanie później usunięty lub wyłączony, moduł automatycznie przechodzi na pierwszy wyróżniony look, aby uniknąć pustego bloku na stronie głównej. ### Strona produktu W trybie karuzeli wyświetlane są looki zawierające oglądany artykuł, do ustalonego limitu. W trybie pojedynczego looka rozwinięty zostaje najlepiej pasujący look zawierający ten artykuł. Nie trzeba niczego wybierać ręcznie. ### Wybór wariantu przez klienta Opcja **Pozwól klientom zmieniać wariant** wyświetla listę wyboru przy każdym produkcie po stronie sklepu. Po wyłączeniu obowiązują warianty wybrane w panelu administracyjnym. Włącz ją w modzie (klient wybiera rozmiar), wyłącz w wystroju wnętrz, jeśli look ma pozostać niezmienny. ## Po stronie sklepu ### Karuzela Pozioma karuzela prezentuje Twoje looki w formie kart. Każda karta pokazuje zdjęcie, plakietkę z liczbą produktów oraz dwa przyciski po najechaniu kursorem: **Zobacz look** i **Kup look**. ### Okno „Zobacz look” Kliknięcie **Zobacz look** (lub karty) otwiera pełne okno: powiększone zdjęcie z pulsującymi punktami po jednej stronie, lista produktów po drugiej. Najechanie na wiersz produktu podświetla odpowiadający mu punkt na zdjęciu i odwrotnie. ### Widok rozwinięty W trybie pojedynczego looka ta sama zawartość jest osadzona bezpośrednio na stronie, bez popupu. Kliknięcie punktu podświetla odpowiedni wiersz produktu. Na urządzeniach mobilnych obie kolumny układają się jedna pod drugą. ### Cena i dostępność dla wariantu Każdy produkt pokazuje cenę i zdjęcie swojego wariantu, sformatowane zgodnie z aktywną walutą i językiem. Jeśli lista wyboru jest włączona, zmiana wariantu aktualizuje cenę i stan magazynowy na żywo. Artykuły niedostępne są oznaczone. ### „Kup look” jednym kliknięciem Przycisk **Kup look** dodaje do koszyka, w jednym działaniu, wszystkie produkty powiązane ze zdjęciem. Moduł: - dodaje **wariant wybrany** przez klienta, w przeciwnym razie ten przypisany w panelu administracyjnym, a w ostateczności wariant domyślny; - respektuje **ilość minimalną** ustawioną na produkcie; - **automatycznie pomija** artykuły niedostępne bez zgody na zamówienie oczekujące; - **deduplikuje** produkty umieszczone w kilku punktach. Koszyk PrestaShop jest następnie odświeżany natywnie, a powiadomienie potwierdza dodanie. Jeśli niektórych produktów nie udało się dodać, komunikat o tym informuje. ## Wielojęzyczność Interfejs modułu jest przetłumaczony na osiem języków (EN, FR, DE, ES, IT, PL, PT, NL) i podąża za aktywnym językiem sklepu. Tytuł i opis każdego looka tłumaczy się natomiast język po języku bezpośrednio w formularzu looka. ## Aktualizacja z wcześniejszej wersji Aktualizacje przebiegają automatycznie: wgraj nową wersję z menedżera modułów, a PrestaShop uruchomi skrypty migracji. Twoje looki, hotspoty i zdjęcia zostają zachowane. Po aktualizacji do 1.2.0 wszystkie istniejące looki są oznaczone jako wyróżnione, a oba miejsca pozostają w trybie karuzeli: sklep zachowuje się dokładnie tak jak wcześniej, a nowości włączasz wtedy, kiedy chcesz. ## Rozwiązywanie problemów **Karuzela nie pojawia się na stronie głównej.** Sprawdź, czy co najmniej jeden look jest włączony _i_ wyróżniony: od wersji 1.2.0 karuzela na stronie głównej pokazuje wyłącznie looki wyróżnione. W konfiguracji pojawia się zresztą ostrzeżenie, gdy nie ma żadnego. **Blok nie pojawia się na stronie produktu.** Blok wyświetla się tylko wtedy, gdy co najmniej jeden aktywny look zawiera oglądany produkt i odpowiednia opcja jest włączona. **Nie pojawia się lista wyboru wariantu.** Jest wyświetlana tylko wtedy, gdy opcja „Pozwól klientom zmieniać wariant” jest włączona, a produkt ma co najmniej dwa warianty. **Produkt nie zostaje dodany przez „Kup look”.** To zachowanie oczekiwane, gdy produkt jest niedostępny bez zgody na zamówienie oczekujące, wyłączony, niedostępny do sprzedaży lub nieprzypisany do bieżącego sklepu. **Wgranie zdjęcia kończy się niepowodzeniem.** Folder `modules/dfshopthelook/views/img/looks/` musi mieć uprawnienia do zapisu. W przeciwnym razie w konfiguracji modułu pojawia się ostrzeżenie. ## Odinstalowanie Odinstalowanie z menedżera modułów usuwa tabele modułu, looki, ich hotspoty oraz wgrane zdjęcia looków. Pamiętaj, aby wcześniej zapisać kopię swoich materiałów, jeśli chcesz je zachować.