1.0 Introduzione
Essendo proprietario di un negozio, hai sempre pensato di moltiplicare le conversioni del tuo negozio, ma non per l'esperienza di acquisto dei tuoi clienti. Un cliente felice e soddisfatto è quello che ritorna al negozio alla ricerca di altri articoli. Quindi, se vuoi restituire i clienti nel tuo negozio, rendere l'esperienza del cliente dura per sempre integrando l'addon Product Designer / Customizer di Prestashop nel tuo negozio eCommerce. Con l'aiuto del modulo Prestashop Custom Product Design, i commercianti di negozi possono offrire opzioni di personalizzazione del prodotto online intuitive e creative ai propri clienti in modo che possano trasformare la versione base del prodotto in un design moderno, elegante e unico. Il componente aggiuntivo di personalizzazione del prodotto Prestashop consente all'amministratore di mostrare la pagina del pannello di personalizzazione del prodotto mentre l'utente fa clic sul pulsante Personalizza nella pagina del prodotto. I clienti possono facilmente aggiungere testi ricchi di effetti con effetti, caricare le loro immagini con filtri, aggiungere un codice QR per renderlo adatto alle loro esigenze.
Caratteristiche sorprendenti di 1.1 degli addon di personalizzazione del prodotto Prestashop
Per la configurazione o la modifica delle impostazioni del modulo Prestashop Custom Product Design non è richiesto alcun tecnicismo di codifica. Tutto è facile con questo modulo. Consente di verificare rapidamente le diverse funzionalità offerte da questo add-on di Prestashop.
- L'addon di Designer / Personalizzatore di Prestashop aiuta ad offrire una vasta gamma di prodotti personalizzabili nel tuo negozio online. Utilizzando l'addon di designer di prodotti personalizzati Prestashop, i clienti possono facilmente acquistare e usufruire dei vantaggi dei prodotti online estesi che possono essere personalizzati in base alle loro esigenze.
- Il Product Designer online aggiunge una vista designer per i prodotti in modo che i potenziali acquirenti abbiano l'opportunità di personalizzare il prodotto in tempo reale. Il modulo di configurazione del prodotto consente all'amministratore di Prestashop di aggiungere un diverso set di opzioni di personalizzazione per ogni prodotto diverso nel negozio.
- Con l'integrazione del modulo di progettazione dei prodotti Prestashop, i clienti possono accedere al pannello di personalizzazione del prodotto con qualsiasi prodotto che desiderano acquistare, come magliette, tazze, anelli o qualsiasi altro tipo di prodotto che può essere personalizzato in base alle proprie esigenze.
- Il componente aggiuntivo di personalizzazione del prodotto Prestashop mostra un pulsante Personalizza per ogni prodotto personalizzabile nel negozio. L'amministratore può abilitare le opzioni di personalizzazione solo per i prodotti desiderati.
- La funzionalità completa di Product Designer / Personalizzatore di Prestashop può essere abilitata o disabilitata. Quando questo modulo è disabilitato, le opzioni di personalizzazione del prodotto standard sono mostrate sulla pagina del prodotto.
- Modulo di personalizzazione del prodotto avanzato mostra il calcolo del prezzo di personalizzazione in tempo reale sulla pagina del prodotto.
- Con addon del designer di prodotti personalizzati Prestashop, l'amministratore può impostare i lati del design del prodotto che sono disponibili all'utente.
- Il modulo di configurazione del prodotto consente all'amministratore di abilitare o disabilitare le opzioni di download di file PDF per i clienti sul frontend.
- Il modulo di personalizzazione del prodotto esteso Prestashop offre un'opzione per aggiungere immagini predefinite per un prodotto. Le immagini predefinite sono generalmente definite in gruppi. I clienti possono caricare e impostare qualsiasi immagine personale.
- Il cliente può utilizzare in modo flessibile i tipi di carattere, i colori e i filtri desiderati per il prodotto utilizzando questo modulo di progettazione del prodotto Prestashop.
- Questo modulo di personalizzazione del prodotto avanzato consente all'amministratore di definire i prezzi per diverse opzioni di personalizzazione.
- Il modulo di personalizzazione del prodotto Prestashop offre anche un'opzione per personalizzare il prodotto utilizzando il codice QR per il quale l'amministratore può definire un prezzo separato.
- L'addon di designer di prodotti personalizzati Prestashop aggiunge automaticamente un prezzo fisso di design completo al prezzo finale personalizzato per un prodotto.
- L'addon di Designer / Personalizzatore di Prestashop supporta la compatibilità multi-store e multi-lingua.
- L'addon di designer di prodotti personalizzati di Prestashop è mobile reattivo e compatibile con vari temi Prestashop.
Tecnologia 1.2 per lo sviluppo
- Lingua: PHP
- Struttura: Prestashop
Guida all'installazione di 2.0 per modulo Advanced Product Customizer
L'amministratore del negozio può seguire questi semplici passaggi per installare l'addon di personalizzazione del prodotto Prestashop sul proprio negozio eCommerce: 1. Innanzitutto, scarica il pacchetto addon dal negozio Knowband. 2. Riceverai un file zippato contenente il codice sorgente e il manuale dell'utente. Decomprimere il pacchetto completo nella directory principale del tuo negozio Prestashop tramite il gestore FTP (come Filezilla o WinSCP
L'addon del designer di prodotti personalizzati Prestashop è ora installato e pronto per l'uso. Ora l'amministratore può configurare le varie impostazioni di configurazione in base al loro sito Prestashop.
Interfaccia 3.0 Admin del modulo Advanced Product Customizer di Prestashop
Subito dopo l'installazione riuscita del componente Product Designer / Personalizzazione di Prestashop nel sito Web, è possibile configurare le impostazioni del pannello di personalizzazione del prodotto in base alle proprie esigenze. Nel pannello di amministrazione o nel pannello di controllo, fare clic su "Moduli e servizi" e quindi sul pulsante "Configura" fornito accanto a Designer / Personalizzatore di Knowband.
Qui, nella prossima interfaccia, troverai le impostazioni complete del modulo Product Designer / Customizer insieme alle sue sottosezioni come elencato di seguito.
Questo modulo di personalizzazione del prodotto Knowband è composto da quattro sottosezioni che sono state discusse ulteriormente. 1.Configuration 2.Fonts 3.Colors 4.Image Group Ciascuna scheda del modulo di personalizzazione del prodotto esteso Prestashop è stata discussa di seguito:
Configurazione 3.1
Nelle impostazioni di configurazione del componente di personalizzazione del prodotto Prestashop, è possibile eseguire le impostazioni di base per il pannello di personalizzazione visualizzato sul frontend ai clienti.
- Attiva / Disattiva: Con questa opzione, è possibile abilitare o disabilitare completamente la funzionalità del modulo di personalizzazione del prodotto esteso Prestashop per i clienti.
- Visualizza l'opzione per scaricare PDF nel carrello: È possibile abilitare o disabilitare questa opzione per scaricare l'immagine del disegno in PDF nella pagina Ordine amministratore.
- Mostra l'anteprima del disegno nel PDF della fattura: Abilita o disabilita questa opzione per visualizzare o nascondere l'anteprima del disegno nel PDF della fattura.
- Numero massimo di diapositive: Utilizzando questa opzione, è possibile impostare il numero massimo di lati del prodotto a cui è consentita la personalizzazione dal frontend.
Caratteri 3.2
In questa sezione del modulo Designer di prodotti Prestashop, il proprietario del negozio ha la possibilità di aggiungere diversi caratteri che il cliente può scegliere di stampare un testo in stile sul prodotto. La prima interfaccia mostrata di seguito mostra un elenco di caratteri esistenti disponibili sul frontend. È possibile aggiungere un nuovo font o modificare o eliminare il font esistente.
Qui puoi eseguire le altre due azioni come:
1. Aggiungere un nuovo font
Per aggiungere un nuovo stile di carattere, attenersi alla seguente procedura: Fare clic sulla scheda Caratteri e quindi sul pulsante "+" (Aggiungi carattere) nel pannello di back-end. Ti verrà mostrata la seguente interfaccia.
- Attivo: Questa opzione abiliterà o disabiliterà il carattere.
- Titolo del carattere: Utilizzando questa opzione, puoi impostare il titolo del font come indicato in Google Font.
- Incorpora il carattere @import: Per utilizzare il carattere Google, devi incorporare la classe Font di importazione. Per questo, devi:
- Fai clic sul link "Google Fonts" fornito appena sotto l'opzione. La schermata qui sotto ti verrà mostrata.
- Scegli il tipo di carattere desiderato e fai clic sul pulsante Aggiungi "+" per quello stile di carattere.
- Dopo aver aggiunto un font, ti verrà mostrato un popup che ti mostrerà la famiglia di font che hai selezionato. Fare clic sulla scheda Incorpora e quindi sul pulsante @Importa.
- Copia l'URL @import per quel carattere e incollalo nel campo Font Incorpora @import.
2. Modifica un carattere esistente
Se vuoi modificare il carattere esistente, fai semplicemente clic sul pulsante Modifica accanto allo stile del carattere. Vedrai le seguenti opzioni:
- Attivo: Abilita o disabilita lo stile del carattere.
- Stile del font: Modifica il titolo del font usando questa opzione.
- Incorpora il carattere @Import: Modifica l'URL di importazione per quel particolare tipo di carattere.
3.3 Colori
Sotto questa sezione del modulo di configurazione del prodotto, è possibile definire la propria tavolozza di colori e consentire ai clienti di scegliere qualsiasi colore per il prodotto selezionato. La seguente interfaccia mostra un elenco di colori esistenti che possono essere modificati o è possibile aggiungere un nuovo colore se necessario.
1. Aggiungere un nuovo colore
- Codice colore: con questa opzione, scegli il colore desiderato da mostrare sulla pagina di personalizzazione del prodotto.
- Attivo: attiva o disattiva il colore.
2. Modifica un colore esistente
- Codice colore: con questa opzione, scegli il colore desiderato da mostrare sulla pagina di personalizzazione del prodotto.
- Attiva: attiva o disattiva il colore esistente.
Gruppi di immagini 3.4
Per un prodotto selezionato, il cliente può selezionare qualsiasi immagine predefinita fornita dal proprietario del negozio o può caricare una nuova immagine personalizzata per la personalizzazione del prodotto. Le immagini predefinite sono state classificate come gruppi di immagini. Questi gruppi di immagini esistenti possono essere modificati o persino aggiungere un nuovo gruppo di immagini.
1. Aggiunta di un nuovo gruppo di immagini
- Nome del gruppo di immagini: È possibile impostare il nome desiderato per il gruppo di immagini.
- Carica immagine: Puoi caricare e impostare un'immagine del logo del gruppo di immagini.
- Attivo: Questa opzione abilita o disabilita il gruppo di immagini.
2. Modifica un gruppo di immagini esistente
- Nome del gruppo di immagini: È possibile impostare il nome desiderato per il gruppo di immagini.
- Carica immagine: Puoi caricare e impostare un'immagine del logo del gruppo di immagini.
- Attivo: Questa opzione abilita o disabilita il gruppo di immagini.
Per visualizzare, aggiungere o eliminare le immagini all'interno di qualsiasi gruppo di immagini, fare clic sull'opzione "Visualizza immagini" corrispondente al gruppo di immagini.
Ti verrà mostrata la seguente interfaccia.
Qui puoi aggiungere una nuova immagine, eliminare o modificare le immagini esistenti all'interno di un gruppo.
Impostazioni di personalizzazione 4.0 per prodotti del sito
Le impostazioni di configurazione per font, colori, gruppi di immagini discussi nella sezione 3.2, 3.3. E 3.4 sono applicabili a tutti i prodotti del sito. Queste impostazioni possono essere definite impostazioni globali. Oltre a questo, le impostazioni possono essere eseguite anche a livello di prodotto. Queste impostazioni sono specifiche per il prodotto che l'amministratore ha configurato dal back-office. Di seguito sono discusse le impostazioni di personalizzazione del prodotto per i singoli prodotti. L'amministratore del sito può applicare queste impostazioni in modo diverso per qualsiasi prodotto sul negozio. Per configurare le impostazioni di personalizzazione del prodotto per i singoli prodotti, segui i passaggi elencati: 1.Nel pannello di amministrazione, vai all'opzione "Catalogo" nella barra dei menu a sinistra dell'interfaccia.
2.Clicca su "Prodotti" opzione sotto "Catalogo".
Verrà visualizzato un elenco di prodotti del negozio insieme a un'opzione per modificare o configurare il prodotto. Di seguito è riportato lo schermo per i prodotti del negozio:
Facendo clic sul pulsante "Modifica" per un prodotto, è possibile trovare le seguenti impostazioni di configurazione. Scegli la scheda Product Designer / Personalizzazione.
Ora, le impostazioni complete di progettazione / personalizzazione del prodotto sono suddivise in quattro gruppi:
- Configurazione
- i prezzi
- Testo
- lati
Configurazione 4.1
- Attiva / Disattiva: Questa opzione abilita o disabilita il pannello di personalizzazione del prodotto sulla pagina del prodotto al frontend.
- Richiesto per la personalizzazione del prodotto: Abilitare questa opzione se si desidera richiedere la personalizzazione del prodotto per i clienti.
- Carica dimensione immagine: Questa opzione imposterà la dimensione massima per il caricamento dell'immagine.
- Carica immagine Prezzo: Questa opzione imposta il prezzo per il caricamento di un'immagine.
- Mostra l'opzione per scaricare PNG: Abilita o disabilita l'opzione per scaricare l'immagine PNG.
- Consenti caricamento immagini: Abilita o disabilita l'opzione di caricamento delle immagini sulla pagina di personalizzazione del prodotto.
- Ridimensiona il testo: Abilita questa opzione per consentire il ridimensionamento del testo.
- Mostra il Rotatore al testo: Abilita questa opzione per consentire la rotazione del testo.
- Opzione di visualizzazione per QR Code: Abilita o disabilita la sua opzione per aggiungere il codice QR sul prodotto.
- Visualizza la trasparenza per le immagini: Abilita questa opzione per visualizzare l'opzione di trasparenza per le immagini.
- Mostra filtri per immagini: Con questa opzione, puoi abilitare o disabilitare i filtri immagine.
- Filtri per immagini: Seleziona più filtri che vuoi mostrare al frontend sulla pagina di personalizzazione del prodotto.
Prezzi 4.2
- Prezzo fisso del testo: Questa opzione ti consente di impostare un prezzo fisso per il testo.
- Abilita costo per carattere: È possibile abilitare questa opzione se si desidera addebitare un costo per personaggio.
- Design completo Prezzo fisso: Questa opzione ti consente di impostare un prezzo fisso per il progetto completo. Questo prezzo è aggiunto al costo totale di personalizzazione.
- Codice QR Prezzo: È possibile impostare un prezzo per il codice QR utilizzando questa opzione.
Testo 4.3
- Visualizza blocco di testo: È possibile mostrare o nascondere l'opzione di blocco del testo sulla pagina di personalizzazione del prodotto.
- Lunghezza massima del testo: Usando questa opzione, puoi impostare una lunghezza massima per il testo.
- Lunghezza minima del testo: Usando questa opzione, puoi impostare una lunghezza minima per il testo.
- Consenti trasparenza del testo: È possibile abilitare o disabilitare questa opzione per la trasparenza del testo.
- Consenti curva di testo: È possibile abilitare o disabilitare questa opzione per la curva di testo.
4.4 Sides
- Abilita il lato: Con questa opzione, puoi abilitare o disabilitare il lato.
- Nome laterale: Questa opzione ti consente di impostare il nome per il lato.
- Immagine laterale: Questa opzione ti consente di caricare un'immagine che mostra il lato del prodotto. Queste impostazioni sono per un lato di un prodotto. Puoi fare le stesse impostazioni anche per gli altri lati di un prodotto.
Nota: Qui, è possibile configurare solo le impostazioni del numero di lati come indicato nelle "impostazioni di configurazione" del modulo di personalizzazione del prodotto. Ad esempio, se è stato impostato il numero massimo di lati "2", è possibile configurare solo le impostazioni per lato 1 e lato 2.
Come configurare font, colori e gruppi di immagini?
Mentre stai modificando le impostazioni di personalizzazione per un prodotto, troverai le opzioni per selezionare diversi tipi di carattere, colori, gruppi di immagini nella parte superiore destra dello schermo. Troverete tre opzioni come:
1. Configura caratteri
Tutti i font che sono stati aggiunti nella sezione 3.2 sono elencati qui in questa interfaccia. Puoi abilitare o disabilitare direttamente qualsiasi carattere.
2. Configura colori
Tutti i colori che sono stati aggiunti nella sezione 3.3 sono elencati qui in questa interfaccia. Puoi abilitare o disabilitare direttamente qualsiasi colore.
3. Configura gruppi di immagini
Tutti i gruppi di immagini che sono stati aggiunti nella sezione 3.4 sono elencati qui in questa interfaccia. Puoi abilitare o disabilitare direttamente qualsiasi gruppo di immagini. Facendo clic sul pulsante "Visualizza immagini", verrà visualizzata la seguente schermata.
Interfaccia frontale 5.0 del modulo di progettazione del prodotto personalizzato Prestashop
Una volta installato e configurato il Product Designer online per il negozio, la scheda Impostazioni Designer / Prodotto è visualizzata nelle impostazioni generali dei prodotti del negozio. Se si desidera abilitare o disabilitare la pagina di personalizzazione del prodotto per un prodotto, è possibile configurare semplicemente le impostazioni del prodotto nel "Catalogo prodotti" presso il back-office. Quando il modulo Product Designer / Customizer è abilitato per un prodotto, mostrerà un pulsante "Personalizza" sulla sua pagina prodotto come mostrato di seguito:
Facendo clic sul pulsante Personalizza, al cliente verrà mostrato un popup a schermo che consisterà in varie impostazioni di progettazione e personalizzazione del prodotto. I clienti possono aggiungere qualsiasi colore, testo personalizzato, immagine personalizzata o codice QR per un prodotto secondo le loro esigenze di acquisto.
I tuoi clienti possono eseguire qualsiasi tipo di personalizzazione come: 1.Color
2.Image I clienti possono aggiungere un'immagine al prodotto. Possono scegliere qualsiasi immagine predefinita dal gruppo di immagini o possono caricare la propria immagine o possono aggiungere un codice QR al prodotto.
2a. Scegli un'immagine
2b. Carica immagine
Supponiamo che il cliente stia aggiungendo l'immagine caricata sul retro di Hoodie. 2c. Aggiungi codice QR
3.Text
Salvataggio della personalizzazione del prodotto
Allo stesso modo, il cliente può applicare le personalizzazioni ad altri prodotti del negozio come tazze e custodie per telefoni.
Pagina Riepilogo carrello acquisti per prodotto personalizzato L'immagine sotto frontend mostra come il prodotto personalizzato viene visualizzato sulla pagina carrello con diverse opzioni per i clienti dopo aver fatto clic sul pulsante "Salva personalizzazione".
Il cliente può visualizzare la fattura di questo prodotto personalizzato come mostrato di seguito.
Pagina Cronologia ordini con fattura
Facendo clic sul pulsante Dettagli, il cliente vedrà la seguente schermata:
Visualizza ordine dal pannello di amministrazione L'amministratore può visualizzare la fattura dell'ordine e tutta la configurazione relativa alla personalizzazione del prodotto dal back-office. I dettagli di un ordine possono essere visualizzati nella sezione Ordini del Pannello di amministrazione.
Facendo clic sul pulsante Visualizza corrispondente a un prodotto, l'amministratore può controllare i dettagli completi dell'ordine del prodotto personalizzato.
Facendo clic sul pulsante Visualizza dettagli, l'amministratore vedrà i dettagli completi del prodotto personalizzato sotto forma di una schermata popup come mostrato di seguito.
L'amministratore può fare clic sull'opzione "Anteprima" per visualizzare l'immagine personalizzata aggiunta al prodotto che appare di seguito.
