Dodatek Prestashop Product Designer/Customizer – Instrukcja obsługi

1.0 Wprowadzenie

Jako właściciel sklepu zawsze myślałeś o zwiększeniu liczby konwersji, ale nie o jakości doświadczeń zakupowych klientów. Zadowolony i zadowolony klient to ten, który wraca do sklepu w poszukiwaniu kolejnych produktów. Jeśli więc chcesz, aby klienci wracali do Twojego sklepu, zadbaj o to, aby doświadczenia klientów były trwałe, integrując dodatek PrestaShop Product Designer/Customizer ze swoim sklepem e-commerce. Z pomocą… Moduł Prestashop Custom Product DesignSprzedawcy w sklepach mogą oferować swoim klientom intuicyjne i kreatywne opcje personalizacji produktów online, dzięki czemu mogą oni przekształcić podstawową wersję produktu w nowoczesny, elegancki i niepowtarzalny design. Dodatek do personalizacji produktów PrestaShop pozwala administratorowi wyświetlić panel personalizacji produktu po kliknięciu przez użytkownika przycisku „Dostosuj” na stronie produktu. Klienci mogą z łatwością dodawać kolorowe teksty z efektami, przesyłać obrazy z filtrami oraz dodawać kod QR, aby dostosować produkt do swoich potrzeb.

1.1 Najważniejsze cechy dodatku do personalizacji produktów Prestashop

Konfiguracja lub modyfikacja ustawień modułu Prestashop Custom Product Design nie wymaga żadnych technicznych umiejętności kodowania. Z tym modułem wszystko jest proste. Sprawdźmy szybko różne funkcje oferowane przez ten dodatek do Prestashop.

• Dodatek Prestashop Product Designer/Customizer pomaga oferować szeroką gamę produktów z możliwością personalizacji w Twoim sklepie internetowym. Dzięki dodatkowi Prestashop Custom Product Designer klienci mogą łatwo kupować i korzystać z rozbudowanej oferty produktów online, które można personalizować według własnych potrzeb.
• Online Product Designer dodaje widok projektanta dla produktów, dzięki czemu potencjalni nabywcy mają możliwość personalizacji produktu w czasie rzeczywistym. Moduł konfiguratora produktów pozwala administratorowi PrestaShop dodawać różne zestawy opcji personalizacji dla każdego produktu w sklepie.
• Dzięki integracji modułu projektanta produktów Prestashop klienci zyskują dostęp do panelu personalizacji produktów, który umożliwia im zakup dowolnego produktu, np. koszulki, kubka, pierścionka lub dowolnego innego produktu, który można spersonalizować według ich potrzeb.
• Dodatek do personalizacji produktów Prestashop wyświetla przycisk „Dostosuj” dla każdego produktu, który można dostosować w sklepie. Administrator może włączyć opcje personalizacji tylko dla wybranych produktów.
• Pełną funkcjonalność dodatku Prestashop Product Designer/Customizer można włączyć lub wyłączyć. Po wyłączeniu tego modułu na stronie produktu wyświetlane są standardowe opcje personalizacji produktu.
• Zaawansowany moduł personalizacji produktów pokazuje na stronie produktu kalkulację ceny dostosowania w czasie rzeczywistym.
• Dzięki dodatkowi Prestashop do projektowania niestandardowych produktów administrator może ustawić strony projektu produktu, które będą dostępne dla użytkownika.
• Moduł konfiguratora produktów umożliwia administratorowi włączanie lub wyłączanie opcji pobierania plików PDF dla klientów w interfejsie użytkownika.
• Moduł Prestashop Extended Product Customization umożliwia dodawanie predefiniowanych obrazów do produktu. Predefiniowane obrazy są zazwyczaj podzielone na grupy. Klienci mogą przesłać i ustawić dowolne własne zdjęcie.
• Korzystając z modułu projektanta produktów Prestashop, klient może elastycznie używać wybranych czcionek, kolorów i filtrów dla danego produktu.
• Ten zaawansowany moduł dostosowywania produktów umożliwia administratorowi definiowanie cen dla różnych opcji dostosowywania.
• Moduł personalizacji produktów Prestashop oferuje również opcję personalizacji produktu za pomocą kodu QR, dla którego administrator może zdefiniować osobną cenę.
• Dodatek Prestashop do projektowania niestandardowych produktów automatycznie dodaje ustaloną cenę za kompletny projekt do ostatecznej, dostosowanej ceny produktu.
• Dodatek Prestashop Product Designer/Customizer obsługuje wiele sklepów i jest wielojęzyczny.
• Dodatek Prestashop do projektowania niestandardowych produktów jest responsywny i kompatybilny z różnymi motywami Prestashop.

1.2 Technologia dla rozwoju

• Język: PHP
• Praca ramowa: prestashop

2.0 Instrukcja instalacji modułu Advanced Product Customizer

Administrator sklepu może wykonać te proste kroki, aby zainstalować dodatek do personalizacji produktów Prestashop w swoim sklepie eCommerce: 1. Najpierw pobierz pakiet dodatku ze sklepu Knowband. 2. Otrzymasz spakowany plik z kodem źródłowym i instrukcją obsługi. Rozpakuj cały pakiet w katalogu głównym swojego sklepu Prestashop za pomocą menedżera FTP (np. Filezilla lub WinSCP – pobierz tutaj: https://filezilla-project.org/). Pliki i foldery znajdziesz tak, jak pokazano na poniższym obrazku:

Dodatek Prestashop Custom Product Designer jest już zainstalowany i gotowy do użycia. Administrator może teraz skonfigurować różne ustawienia zgodnie ze swoją witryną Prestashop.

3.0 Interfejs administracyjny modułu Prestashop Advanced Product Customizer

Zaraz po pomyślnej instalacji Dodatek do projektowania/dostosowywania produktów Prestashop Na swojej stronie internetowej możesz skonfigurować ustawienia panelu personalizacji produktu zgodnie ze swoimi potrzebami. W panelu administracyjnym lub na pulpicie nawigacyjnym kliknij „Moduły i usługi”, a następnie przycisk „Konfiguruj” obok aplikacji Knowband Product Designer/Customizer.

Tutaj, w kolejnym interfejsie, znajdziesz kompletne ustawienia modułu Projektanta produktu/Personalizatora wraz z jego podsekcjami wymienionymi poniżej.

Moduł Knowband Product Customization składa się z czterech podsekcji, które zostały omówione szerzej. 1. Konfiguracja 2. Czcionki 3. Kolory 4. Grupa obrazów Każda zakładka modułu Prestashop Extended Product Customization została omówiona poniżej:

Konfiguracja 3.1

W ustawieniach konfiguracji dodatku do personalizacji produktu Prestashop możesz dokonać podstawowych ustawień panelu personalizacji wyświetlanego klientom na stronie frontowej.

• Włącz / Wyłącz: Za pomocą tej opcji możesz całkowicie włączyć lub wyłączyć funkcjonalność modułu Prestashop Extended Product Customization dla klientów.
• Wyświetl opcję pobrania pliku PDF w koszyku: Możesz włączyć lub wyłączyć tę opcję, aby pobrać obraz projektu w formacie PDF na stronie zamówienia administratora.
• Pokaż podgląd projektu na fakturze PDF: Włącz lub wyłącz tę opcję, aby wyświetlić lub ukryć podgląd projektu w fakturze PDF.
• Maksymalna liczba slajdów: Korzystając z tej opcji, możesz ustawić maksymalną liczbę stron produktu, których personalizację można przeprowadzić z poziomu interfejsu użytkownika.

3.2 Czcionki

W tej sekcji modułu projektanta produktów Prestashop właściciel sklepu ma możliwość dodania kilku czcionek, które klient może wybrać do wydrukowania stylizowanego tekstu na produkcie. Pierwszy interfejs poniżej przedstawia listę istniejących czcionek dostępnych w interfejsie. Można dodać nową czcionkę lub zmodyfikować lub usunąć istniejącą.

Tutaj możesz wykonać dwie pozostałe czynności:

1. Dodawanie nowej czcionki

Aby dodać nowy styl czcionki, wykonaj następujące kroki: Kliknij zakładkę Czcionki, a następnie przycisk „+” (Dodaj czcionkę) w panelu administracyjnym. Zostanie wyświetlony poniższy interfejs.

• Aktywny: Ta opcja włącza lub wyłącza czcionkę.
• Tytuł czcionki: Korzystając z tej opcji, możesz ustawić tytuł czcionki taki sam, jak ten podany w Google Font.
• Osadź czcionkę @import: Aby korzystać z czcionki Google Font, musisz osadzić klasę importu Font. W tym celu należy:
• Kliknij link „Google Fonts” znajdujący się tuż pod opcją. Wyświetli się poniższy ekran.
• Wybierz dowolną czcionkę i kliknij przycisk „+” przy wybranym stylu czcionki.

• Po dodaniu czcionki pojawi się okno z listą wybranej rodziny czcionek. Kliknij kartę „Osadź”, a następnie przycisk „@Importuj”.
• Skopiuj adres URL @import dla tej czcionki i wklej go w polu Osadź czcionkę @import.

2. Edytuj istniejącą czcionkę

Jeśli chcesz edytować istniejącą czcionkę, po prostu kliknij przycisk Edytuj obok stylu czcionki. Zobaczysz następujące opcje:

• Aktywny: Włącz lub wyłącz styl czcionki.
• Styl czcionki: Za pomocą tej opcji można edytować tytuł czcionki.
• Osadź czcionkę @Import: Zmodyfikuj adres URL importu dla danej czcionki.

3.3 Kolory

W ramach tej sekcji Moduł konfiguratora produktówMożesz zdefiniować własną paletę kolorów i pozwolić klientom wybrać dowolny kolor dla wybranego produktu. Poniższy interfejs wyświetla listę istniejących kolorów, które można edytować lub w razie potrzeby dodać nowy kolor.

1. Dodawanie nowego koloru

• Kod koloru: Wybierz żądany kolor, który będzie wyświetlany na stronie personalizacji produktu.
• Aktywny: Włącz lub wyłącz kolor.

2. Edytuj istniejący kolor

• Kod koloru: Wybierz żądany kolor, który będzie wyświetlany na stronie personalizacji produktu.
• Aktywny: Włącz lub wyłącz istniejący kolor.

3.4 Grupy obrazów

Dla wybranego produktu klient może wybrać dowolne domyślne obrazy dostarczone przez właściciela sklepu lub przesłać nowy, niestandardowy obraz w celu personalizacji produktu. Domyślne obrazy zostały skategoryzowane jako grupy obrazów. Istniejące grupy obrazów można edytować, a nawet dodać nową grupę obrazów.

1. Dodawanie nowej grupy obrazów

• Nazwa grupy obrazów: Można nadać grupie obrazów dowolną nazwę.
• Załaduj obrazek: Możesz przesłać i ustawić obraz logo grupy obrazów.
• Aktywny: Ta opcja włącza lub wyłącza grupę obrazów.

2. Edytuj istniejącą grupę obrazów

• Nazwa grupy obrazów: Można nadać grupie obrazów dowolną nazwę.
• Załaduj obrazek: Możesz przesłać i ustawić obraz logo grupy obrazów.
• Aktywny: Ta opcja włącza lub wyłącza grupę obrazów.

Aby wyświetlić, dodać lub usunąć obrazy w dowolnej grupie obrazów, kliknij opcję „Wyświetl obrazy” odpowiadającą tej grupie obrazów.

Zostanie Ci wyświetlony następujący interfejs.

Tutaj możesz dodać nowy obraz, usunąć lub zmienić istniejące obrazy w grupie.

4.0 Ustawienia dostosowywania produktów witryny

Ustawienia konfiguracji czcionek, kolorów i grup obrazów omówione w sekcjach 3.2, 3.3 i 3.4 dotyczą wszystkich produktów na stronie. Ustawienia te można nazwać ustawieniami globalnymi. Poza tym ustawienia te można również wprowadzić na poziomie produktu. Ustawienia te dotyczą konkretnego produktu, który administrator skonfigurował w zapleczu. Poniżej omówiono ustawienia personalizacji produktów dla poszczególnych produktów. Administrator witryny może zastosować te ustawienia inaczej dla każdego produktu w sklepie. Aby skonfigurować ustawienia personalizacji produktów dla poszczególnych produktów, wykonaj następujące kroki: 1. W panelu administracyjnym przejdź do opcji „Katalog” na pasku menu po lewej stronie interfejsu.

2. Kliknij opcję „Produkty” w zakładce „Katalog”.

Zobaczysz listę produktów w sklepie wraz z opcją edycji lub konfiguracji produktu. Ekran produktów w sklepie pokazano poniżej:

Po kliknięciu przycisku „Edytuj” dla produktu, zobaczysz następujące ustawienia konfiguracji. Wybierz zakładkę Projektant produktu/Personalizacja.

Obecnie kompletne ustawienia projektanta/personalizatora produktu podzielone są na cztery grupy, mianowicie:

• Konfiguracja
• Cennik
• Tekst
• Strony

Konfiguracja 4.1

• Włącz / Wyłącz: Ta opcja włącza lub wyłącza panel personalizacji produktu na stronie produktu w interfejsie użytkownika.
• Wymagane do personalizacji produktu: Włącz tę opcję, jeśli chcesz zlecić klientom personalizację produktu.
• Prześlij rozmiar obrazu: Ta opcja ustawi maksymalny rozmiar przesyłanego obrazu.
• Prześlij obraz Cena: Ta opcja pozwala ustalić cenę za przesłanie obrazu.
• Wyświetl opcję pobierania PNG: Włącz lub wyłącz opcję pobierania obrazów PNG.
• Zezwól na przesyłanie obrazów: Włącz lub wyłącz opcję przesyłania obrazu na stronie personalizacji produktu.
• Zmień rozmiar tekstu: Włącz tę opcję, aby umożliwić zmianę rozmiaru tekstu.
• Wyświetl rotator tekstu: Włącz tę opcję, aby umożliwić obracanie tekstu.
• Opcja wyświetlania kodu QR: Włącz lub wyłącz opcję dodawania kodu QR do produktu.
• Wyświetl przezroczystość obrazów: Włącz tę opcję, aby wyświetlić opcję przezroczystości dla obrazów.
• Filtry wyświetlania dla obrazów: Za pomocą tej opcji możesz włączać lub wyłączać filtry obrazu.
• Filtry dla obrazów: Wybierz wiele filtrów, które chcesz wyświetlić w interfejsie użytkownika na stronie dostosowywania produktu.

Ceny 4.2

• Cena stała tekstu: Opcja ta umożliwia ustalenie stałej ceny tekstu.
• Włącz Koszt na postać: Możesz włączyć tę opcję, jeśli chcesz pobierać opłatę za każdą postać.
• Kompletny projekt, cena stała: Ta opcja pozwala ustalić stałą cenę za cały projekt. Cena ta jest dodawana do całkowitego kosztu personalizacji.
• Cena kodu QR: Za pomocą tej opcji możesz ustalić cenę kodu QR.

4.3 Tekst

• Wyświetl blok tekstu: Możesz pokazać lub ukryć opcję bloku tekstu na stronie personalizacji produktu.
• Maksymalna długość tekstu: Za pomocą tej opcji możesz ustawić maksymalną długość tekstu.
• Minimalna długość tekstu: Za pomocą tej opcji możesz ustawić minimalną długość tekstu.
• Zezwól na przezroczystość tekstu: Możesz włączyć lub wyłączyć tę opcję przezroczystości tekstu.
• Zezwól na krzywą tekstu: Możesz włączyć lub wyłączyć tę opcję dla krzywej tekstu.

Boki 4.4

• Włącz stronę: Za pomocą tej opcji możesz włączyć lub wyłączyć stronę.
• Nazwa strony: Ta opcja umożliwia ustawienie nazwy strony.
• Obraz boczny: Ta opcja umożliwia przesłanie zdjęcia przedstawiającego produkt z jednej strony. Ustawienia te dotyczą jednej strony produktu. Możesz również wprowadzić te same ustawienia dla pozostałych stron produktu.
  Uwaga: W tym miejscu możesz skonfigurować tylko ustawienia liczby boków, zgodnie z informacjami w sekcji „Ustawienia konfiguracji” modułu personalizacji produktu. Na przykład, jeśli ustawiłeś „Maksymalną liczbę boków” na 2, możesz skonfigurować ustawienia tylko dla boku 1 i boku 2.

Jak skonfigurować czcionki, kolory i grupy obrazów?

Podczas zmiany ustawień personalizacji produktu, w prawym górnym rogu ekranu znajdziesz opcje wyboru czcionek, kolorów i grup obrazów. Dostępne są trzy opcje:

1. Skonfiguruj czcionki
Wszystkie czcionki dodane w sekcji 3.2 są wymienione w tym interfejsie. Możesz bezpośrednio włączyć lub wyłączyć dowolną czcionkę.

2. Skonfiguruj kolory
Wszystkie kolory dodane w sekcji 3.3 są wymienione w tym interfejsie. Możesz bezpośrednio włączyć lub wyłączyć dowolny kolor.

3. Skonfiguruj grupy obrazów

Wszystkie grupy obrazów dodane w sekcji 3.4 są wymienione w tym interfejsie. Możesz bezpośrednio włączyć lub wyłączyć dowolną grupę obrazów. Po kliknięciu przycisku „Wyświetl obrazy” zobaczysz poniższy ekran.

5.0 Interfejs przedni Moduł Prestashop do projektowania niestandardowych produktów

Po zainstalowaniu i skonfigurowaniu Online Product Designer dla sklepu, w ogólnych ustawieniach produktów w sklepie wyświetlana jest karta ustawień Product Designer/Customizer. Aby włączyć lub wyłączyć stronę personalizacji produktu, wystarczy skonfigurować ustawienia produktu w zakładce „Katalog produktów” w zapleczu. Po włączeniu modułu Product Designer/Customizer dla produktu, na jego stronie pojawi się przycisk „Dostosuj”, jak pokazano poniżej:

Po kliknięciu przycisku „Dostosuj” klientowi wyświetli się okno dialogowe z różnymi ustawieniami projektu i personalizacji produktu. Klienci mogą dodać dowolny kolor, własny tekst, własny obraz lub kod QR do produktu, zgodnie ze swoimi potrzebami zakupowymi.

Twoi klienci mogą dokonać dowolnego rodzaju personalizacji, takiej jak: 1.Kolor

2. Obraz: Klienci mogą dodać obraz do produktu. Mogą wybrać dowolny domyślny obraz z grupy obrazów, przesłać własny obraz lub dodać kod QR do produktu.

2a. Wybierz obraz

2b. Prześlij obraz

Załóżmy, że klient dodaje przesłany obraz na tył bluzy z kapturem. 2c. Dodaj kod QR

3. Tekst

Zapisywanie personalizacji produktu

Klienci mogą również personalizować inne produkty w sklepie, np. kubki i etui na telefony.

Strona podsumowania koszyka dla spersonalizowanego produktu Poniższy obraz pokazuje, jak spersonalizowany produkt wyświetla się na stronie koszyka, oferując klientom różne opcje po kliknięciu przycisku „Zapisz dostosowanie”.

Klient może zobaczyć fakturę tego spersonalizowanego produktu, tak jak pokazano poniżej.

Strona historii zamówień z fakturą

Po kliknięciu przycisku Szczegóły klient zobaczy następujący ekran:

Widok zamówienia z Panelu Administracyjnego. Administrator może przeglądać fakturę zamówienia i wszystkie ustawienia dotyczące personalizacji produktu z poziomu zaplecza. Szczegóły zamówienia można wyświetlić w sekcji „Zamówienia” w Panelu Administracyjnych.

Klikając przycisk „Wyświetl” odpowiadający danemu produktowi, administrator może sprawdzić pełne szczegóły zamówienia niestandardowego produktu.

Po kliknięciu przycisku „Wyświetl szczegóły” administrator zobaczy pełne szczegóły spersonalizowanego produktu w formie wyskakującego okienka, jak pokazano poniżej.

Administrator może kliknąć opcję „Podgląd”, aby zobaczyć niestandardowy obraz dodany do produktu, który wygląda jak poniżej.

Samouczek: Obejrzyj przewodnik wideo

Aby pomóc Ci skonfigurować i używać Moduł projektanta/dostosowywacza produktów PrestaShop, przygotowaliśmy szczegółowy Film instruktażowy na YouTubeTen film przeprowadzi Cię krok po kroku przez instalację, konfigurację i użytkowanie modułu.

Obejrzyj samouczek tutaj:

Aby uzyskać dodatkową pomoc, dostosować ustawienia lub zadać pytania, skontaktuj się z naszym zespołem wsparcia pod adresem:
support@knowband.com