BannerPin - Przypnij produkt do baneru

Moduł zdjęć z punktami

Moduł zdjęć z punktami zamienia statyczne zdjęcia i banery w interaktywną prezentację produktów. Na zdjęciu umieszczasz punkty (kropki) wskazujące konkretne miejsca - po najechaniu kursorem rozwija się okienko z produktem lub dodatkowym tekstem. Klient widzi szczegóły produktu, może przejść na jego kartę albo dodać go do koszyka bez opuszczania strony.

To idealne rozwiązanie dla zdjęć aranżacyjnych, banerów lookbook i sesji stylizacji - pokazujesz produkt w realnym kontekście i jednym ruchem prowadzisz klienta do zakupu.

Jak to działa

1. Wskazujesz adres URL zdjęcia, które ma stać się interaktywne.
2. Dodajesz dowolną liczbę punktów i przypisujesz do nich produkty (po ID) lub treść tekstową.
3. Rozmieszczasz punkty na zdjęciu - przeciągając je myszką w edytorze z podglądem na żywo.
4. Kopiujesz wygenerowany kod i wklejasz go w dowolnym miejscu sklepu obsługującym HTML (np. strona CMS, opis kategorii, baner).

Najważniejsze funkcje

• Interaktywne punkty - kropki nad zdjęciem rozwijające okienko produktowe lub tekstowe.
• Okienko produktowe - prezentuje produkt pobrany ze sklepu, z możliwością przejścia na kartę produktu.
• Dodawanie do koszyka - opcjonalny przycisk „Dodaj do koszyka” bezpośrednio z poziomu punktu (niedostępny dla zestawów ze względu na wymogi API).
• Labele produktów - wyświetlanie standardowych oznaczeń IdoSell, np. Nowość czy Promocja.
• Opinie o produkcie - możliwość pokazania danych o ocenach produktu.
• Tryb RWD - osobne zdjęcia i osobne rozmieszczenie punktów dla widoku desktop, tablet i mobile.
• Ukrywanie punktów - wybrane punkty można wyłączyć dla konkretnego typu ekranu.
• Punkty tekstowe - zamiast produktu punkt może prezentować dowolną treść z edytora tekstu.
• Edytor wizualny z podglądem na żywo - punkty układasz, przeciągając je bezpośrednio na zdjęciu.
• Podgląd pełnoekranowy - sprawdzenie efektu w pełnej rozdzielczości.
• Generator kodu - gotowy kod HTML do skopiowania jednym kliknięciem.

Pełna personalizacja wyglądu

Dopasujesz moduł do identyfikacji wizualnej swojego sklepu:

• Kolory - osobno dla punktu, tła okienka oraz tekstu.
• Wielkość punktu - rozmiar kropki podawany w pikselach.
• Pierścień punktu - regulacja grubości oraz odległości pierścienia wokół punktu.
• Kierunek dymka - wybór strony, w którą rozwija się okienko produktowe lub tekstowe na desktopie.

Na urządzeniach mobilnych zamiast dymka wyświetla się wygodny modal na dole ekranu - punkty pozostają czytelne także na małych ekranach.

Konfiguracja punktu

Każdy punkt konfigurujesz niezależnie. Przełącznik na górze decyduje, czy punkt odnosi się do produktu, czy do tekstu. Dla produktu uzupełniasz jego ID - jeśli produkt nie zostanie odnaleziony na stronie, punkt po prostu się nie pojawi. Położenie punktu zapisywane jest procentowo względem lewego górnego rogu zdjęcia, dzięki czemu pozostaje spójne niezależnie od rozdzielczości. W trybie RWD położenie ustawiasz osobno dla każdego typu ekranu.

Dla kogo

Moduł sprawdzi się wszędzie tam, gdzie produkt warto pokazać w kontekście: zdjęcia aranżacji wnętrz, stylizacje odzieży, zestawy akcesoriów, banery promocyjne czy sekcje inspiracji na stronie głównej.

Dobre praktyki

• Podgląd w aplikacji ma charakter poglądowy i nie uwzględnia indywidualnych styli sklepu - gotowe zdjęcie najlepiej przetestować na testowej stronie CMS, która nie jest nigdzie podlinkowana.
• Moduł korzysta z kodu standardowego szablonu IdoSell m.in. do odświeżenia koszyka i obsługi modalu na mobile. Na mocno zmodyfikowanych lub starszych szablonach część funkcji może wymagać dodatkowej weryfikacji.