Tag: Addon personalizzazione del prodotto

Componente aggiuntivo Prestashop Product Designer/Customizer – Manuale utente

1.0 Introduzione

Essendo un negoziante, hai sempre pensato di moltiplicare le conversioni del tuo negozio, ma non l’esperienza di acquisto dei tuoi clienti. Un cliente felice e soddisfatto è quello che torna in negozio alla ricerca di altri articoli. Quindi, se vuoi che i clienti tornino nel tuo negozio, rendi l’esperienza del cliente duratura integrando il componente aggiuntivo Prestashop Product Designer/Customizer nel tuo negozio e-commerce. Con l’aiuto di Modulo Prestashop Custom Product DesignI commercianti possono offrire ai propri clienti opzioni di personalizzazione online intuitive e creative, trasformando la versione base del prodotto in un design moderno, elegante e unico. Il componente aggiuntivo Prestashop per la personalizzazione dei prodotti consente all’amministratore di visualizzare la pagina del pannello di personalizzazione del prodotto quando l’utente clicca sul pulsante “Personalizza” nella pagina del prodotto. I clienti possono facilmente aggiungere testi colorati con effetti, caricare immagini con filtri e aggiungere un codice QR per adattarlo alle proprie esigenze.

1.1 Caratteristiche sorprendenti del componente aggiuntivo di personalizzazione del prodotto Prestashop

Non sono richiesti tecnicismi di programmazione per configurare o modificare le impostazioni del modulo Prestashop Custom Product Design. Tutto è semplicissimo con questo modulo. Diamo un’occhiata veloce alle diverse funzionalità offerte da questo componente aggiuntivo per Prestashop.

  • Il componente aggiuntivo Prestashop Product Designer/Customizer ti aiuta a offrire un’ampia gamma di prodotti personalizzabili nel tuo negozio online. Utilizzando il componente aggiuntivo Prestashop Product Designer, i clienti possono acquistare facilmente e usufruire dei vantaggi dei prodotti online estesi, personalizzabili in base alle loro esigenze.
  • Online Product Designer aggiunge una vista di progettazione per i prodotti, in modo che i potenziali acquirenti abbiano l’opportunità di personalizzarli in tempo reale. Il modulo di configurazione del prodotto consente all’amministratore di Prestashop di aggiungere diverse opzioni di personalizzazione per ogni prodotto presente nel negozio.
  • Grazie all’integrazione del modulo di progettazione dei prodotti Prestashop, i clienti possono accedere al pannello di personalizzazione del prodotto con qualsiasi prodotto desiderino acquistare, come magliette, tazze, anelli o qualsiasi altro tipo di prodotto che possa essere personalizzato in base alle loro esigenze.
  • Il componente aggiuntivo Prestashop per la personalizzazione dei prodotti mostra un pulsante “Personalizza” per ogni prodotto personalizzabile presente nello store. L’amministratore può abilitare le opzioni di personalizzazione solo per i prodotti desiderati.
  • È possibile abilitare o disabilitare tutte le funzionalità del componente aggiuntivo Prestashop Product Designer/Customizer. Quando questo modulo è disabilitato, le opzioni di personalizzazione standard del prodotto vengono visualizzate nella pagina prodotto.
  • Il modulo di personalizzazione avanzata del prodotto mostra il calcolo del prezzo di personalizzazione in tempo reale sulla pagina del prodotto.
  • Con il componente aggiuntivo Prestashop Custom Product Designer, l’amministratore può impostare i lati del design del prodotto che saranno disponibili all’utente.
  • Il modulo di configurazione del prodotto consente all’amministratore di abilitare o disabilitare le opzioni di download dei file PDF per i clienti sul frontend.
  • Il modulo Prestashop Extended Product Customization offre la possibilità di aggiungere immagini predefinite per un prodotto. Le immagini predefinite sono solitamente suddivise in gruppi. I clienti possono caricare e impostare qualsiasi immagine desiderata.
  • Grazie a questo modulo di progettazione di prodotti Prestashop, il cliente può utilizzare in modo flessibile i font, i colori e i filtri desiderati per il prodotto.
  • Questo modulo di personalizzazione avanzata dei prodotti consente all’amministratore di definire i prezzi per diverse opzioni di personalizzazione.
  • Il modulo di personalizzazione del prodotto Prestashop offre anche la possibilità di personalizzare il prodotto tramite codice QR, per il quale l’amministratore può definire un prezzo separato.
  • Il componente aggiuntivo Prestashop Custom Product Designer aggiunge automaticamente un prezzo fisso di progettazione completa al prezzo finale personalizzato di un prodotto.
  • Il componente aggiuntivo Prestashop Product Designer/Customizer supporta la compatibilità multi-store e multilingue.
  • Il componente aggiuntivo Prestashop Custom Product Designer è reattivo ai dispositivi mobili e compatibile con vari temi Prestashop.

1.2 Tecnologia per lo sviluppo

  • Lingua: PHP
  • Struttura: Prestashop

2.0 Guida all’installazione del modulo Advanced Product Customizer

L’amministratore del negozio può seguire questi semplici passaggi per installare il componente aggiuntivo Prestashop per la personalizzazione dei prodotti sul proprio negozio e-commerce: 1. Innanzitutto, scarica il pacchetto aggiuntivo dallo store Knowband. 2. Otterrai un file compresso contenente il codice sorgente e il manuale utente. Decomprimi il pacchetto completo nella directory principale del tuo negozio Prestashop tramite un gestore FTP (come Filezilla o WinSCP – scaricabile qui: https://filezilla-project.org/). Troverai i file e le cartelle come mostrato nell’immagine qui sotto:

Il componente aggiuntivo Prestashop Custom Product Designer è ora installato e pronto all’uso. Ora l’amministratore può configurare le varie impostazioni di configurazione in base al proprio sito Prestashop.

3.0 Interfaccia di amministrazione del modulo Prestashop Advanced Product Customizer

Subito dopo l’installazione riuscita di Addon per designer / personalizzatore di prodotti Prestashop Sul tuo sito web, puoi configurare le impostazioni del pannello di personalizzazione del prodotto in base alle tue esigenze. Nel pannello di amministrazione o nella dashboard, clicca su “Moduli e servizi” e poi sul pulsante “Configura” accanto a Knowband Product Designer/Customizer.

Qui, nell’interfaccia successiva, troverete le impostazioni complete del modulo Product Designer/Customizer insieme alle sue sottosezioni elencate di seguito.

Questo modulo di personalizzazione del prodotto Knowband è composto da quattro sottosezioni che sono state discusse più avanti. 1. Configurazione 2. Caratteri 3. Colori 4. Gruppo di immagini Ogni scheda del modulo di personalizzazione estesa del prodotto Prestashop è stata discussa di seguito:

Configurazione 3.1

Nelle impostazioni di configurazione del componente aggiuntivo di personalizzazione del prodotto Prestashop, è possibile eseguire le impostazioni di base per il pannello di personalizzazione mostrato ai clienti sul frontend.

  • Attiva / Disattiva: Con questa opzione puoi abilitare o disabilitare completamente la funzionalità del modulo Prestashop Extended Product Customization per i clienti.
  • Visualizza l’opzione per scaricare il PDF nel carrello: È possibile abilitare o disabilitare questa opzione per scaricare l’immagine del progetto in formato PDF nella pagina degli ordini di amministrazione.
  • Mostra l’anteprima del progetto nel PDF della fattura: Abilita o disabilita questa opzione per visualizzare o nascondere l’anteprima del progetto nel PDF della fattura.
  • Numero massimo di diapositive: Utilizzando questa opzione, puoi impostare il numero massimo di lati del prodotto che possono essere personalizzati dal frontend.

Caratteri 3.2

In questa sezione del modulo di progettazione prodotti Prestashop, il proprietario del negozio ha la possibilità di aggiungere diversi font che il cliente può scegliere per stampare un testo formattato sul prodotto. La prima interfaccia mostrata di seguito mostra un elenco dei font esistenti disponibili nel frontend. È possibile aggiungere un nuovo font oppure modificare o eliminare quello esistente.

Qui puoi eseguire le altre due azioni come:

1. Aggiungere un nuovo font

Per aggiungere un nuovo stile di carattere, procedi come segue: fai clic sulla scheda Caratteri e poi sul pulsante “+” (Aggiungi carattere) nel pannello back-end. Ti verrà mostrata l’interfaccia sottostante.

  • Attivo: Questa opzione abilita o disabilita il font.
  • Titolo del carattere: Utilizzando questa opzione, puoi impostare il titolo del font come indicato in Google Font.
  • Incorpora @import Carattere: Per utilizzare Google Font, è necessario incorporare la classe import Font. Per farlo, è necessario:
  • Clicca sul link “Google Fonts” appena sotto l’opzione. Ti verrà mostrata la schermata seguente.
  • Scegli il font desiderato e clicca sul pulsante Aggiungi “+” per quello stile di font.

  • Dopo aver aggiunto un font, verrà visualizzata una finestra popup che elenca la famiglia di font selezionata. Fare clic sulla scheda Incorpora e quindi sul pulsante @Importa.
  • Copia l’URL @import per quel font e incollalo nel campo Incorpora font @import.

2. Modifica un font esistente

Per modificare il font esistente, è sufficiente fare clic sul pulsante Modifica accanto allo stile del font. Verranno visualizzate le seguenti opzioni:

  • Attivo: Abilita o disabilita lo stile del carattere.
  • Stile del font: Modifica il titolo del font utilizzando questa opzione.
  • Incorpora @Import Font: Modifica l’URL di importazione per quel particolare font.

3.3 Colori

In questa sezione di Modulo configuratore di prodottoPuoi definire la tua palette di colori e consentire ai tuoi clienti di scegliere qualsiasi colore per il prodotto selezionato. L’interfaccia seguente mostra un elenco di colori esistenti che possono essere modificati oppure puoi aggiungerne uno nuovo, se necessario.

1. Aggiungere un nuovo colore

  • Codice colore: con questa opzione, seleziona il colore desiderato da visualizzare nella pagina di personalizzazione del prodotto.
  • Attivo: abilita o disabilita il colore.

2. Modifica un colore esistente

  • Codice colore: con questa opzione, seleziona il colore desiderato da visualizzare nella pagina di personalizzazione del prodotto.
  • Attivo: abilita o disabilita il colore esistente.

3.4 Gruppi di immagini

Per un prodotto selezionato, il cliente può selezionare qualsiasi immagine predefinita fornita dal proprietario del negozio oppure caricare una nuova immagine personalizzata per la personalizzazione del prodotto. Le immagini predefinite sono state categorizzate come gruppi di immagini. Questi gruppi di immagini esistenti possono essere modificati o è anche possibile aggiungerne uno nuovo.

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 un 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.

4.0 Impostazioni di personalizzazione per i prodotti del sito

Le impostazioni di configurazione per font, colori e gruppi di immagini, illustrate nelle sezioni 3.2, 3.3 e 3.4, sono applicabili a tutti i prodotti del sito. Queste impostazioni possono essere definite “Impostazioni globali”. Oltre a ciò, le impostazioni possono essere modificate anche a livello di prodotto. Queste impostazioni sono specifiche del prodotto configurato dall’amministratore dal back-office. Di seguito sono illustrate le impostazioni di personalizzazione per i singoli prodotti. L’amministratore del sito può applicare queste impostazioni in modo diverso per qualsiasi prodotto presente nello store. Per configurare le impostazioni di personalizzazione per i singoli prodotti, seguire i passaggi elencati: 1. Nel pannello di amministrazione, accedere all’opzione “Catalogo” nella barra dei menu a sinistra dell’interfaccia.

2. Fare clic sull’opzione “Prodotti” in “Catalogo”.

Vedrai un elenco dei prodotti del negozio insieme alla possibilità di modificarli o configurarli. La schermata per i prodotti del negozio è mostrata di seguito:

Cliccando sul pulsante “Modifica” per un prodotto, troverai le seguenti impostazioni di configurazione. Seleziona la scheda “Progettista/Personalizza Prodotto”.

Ora, le impostazioni complete del progettista/personalizzatore del prodotto sono divise in quattro gruppi, ovvero:

  • Configurazione
  • Prezzi
  • Testo
  • lati

Configurazione 4.1

  • Attiva / Disattiva: Questa opzione abiliterà o disabiliterà il pannello di personalizzazione del prodotto nella pagina del prodotto nel frontend.
  • Richiesto per la personalizzazione del prodotto: Abilita questa opzione se vuoi imporre la personalizzazione del prodotto ai clienti.
  • Carica dimensione immagine: Questa opzione imposterà la dimensione massima per il caricamento delle immagini.
  • Carica immagine Prezzo: Questa opzione imposterà il prezzo per il caricamento di un’immagine.
  • Visualizza 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 nella pagina di personalizzazione del prodotto.
  • Ridimensiona il testo: Abilita questa opzione per consentire il ridimensionamento del testo.
  • Visualizza Rotator sul testo: Abilita questa opzione per consentire la rotazione del testo.
  • Opzione di visualizzazione per il codice QR: Abilita o disabilita l’opzione per aggiungere il codice QR al prodotto.
  • Visualizza trasparenza per le immagini: Abilita questa opzione per visualizzare l’opzione di trasparenza per le immagini.
  • Filtri di visualizzazione per le immagini: Con questa opzione puoi abilitare o disabilitare i filtri delle immagini.
  • Filtri per immagini: Seleziona più filtri che vuoi mostrare nel frontend della pagina di personalizzazione del prodotto.

Prezzi 4.2

  • Testo prezzo fisso: Questa opzione consente di impostare un prezzo fisso per il testo.
  • Abilita Costo per personaggio: Puoi abilitare questa opzione se vuoi addebitare un costo per personaggio.
  • Prezzo fisso per la progettazione completa: Questa opzione consente di impostare un prezzo fisso per il progetto completo. Questo prezzo viene aggiunto al costo totale della personalizzazione.
  • Prezzo del codice QR: Utilizzando questa opzione è possibile impostare un prezzo per il codice QR.

4.3 Testo

  • Visualizza blocco di testo: È possibile mostrare o nascondere l’opzione del blocco di testo nella pagina di personalizzazione del prodotto.
  • Lunghezza massima del testo: Utilizzando questa opzione è possibile impostare una lunghezza massima per il testo.
  • Lunghezza minima del testo: Utilizzando questa opzione è possibile impostare una lunghezza minima per il testo.
  • Consenti trasparenza del testo: È possibile abilitare o disabilitare questa opzione per la trasparenza del testo.
  • Consenti curvatura del testo: È possibile abilitare o disabilitare questa opzione per la curva del testo.

4.4 Sides

  • Abilita il lato: Con questa opzione puoi abilitare o disabilitare il lato.
  • Nome laterale: Questa opzione consente di impostare il nome del lato.
  • Immagine laterale: Questa opzione consente di caricare un’immagine che mostra il lato del prodotto. Queste impostazioni sono valide per un solo lato del prodotto. È possibile effettuare le stesse impostazioni anche per gli altri lati del prodotto.
    Nota: Qui puoi configurare solo le impostazioni relative al numero di lati, come indicato nelle “Impostazioni di configurazione” del modulo di personalizzazione del prodotto. Ad esempio, se hai impostato il “Numero massimo di lati” su 2, puoi configurare solo le impostazioni per il lato 1 e il lato 2.
Come configurare caratteri, colori e gruppi di immagini?

Mentre modifichi le impostazioni di personalizzazione di un prodotto, troverai le opzioni per selezionare diversi font, colori e gruppi di immagini in alto a destra dello schermo. Troverai tre opzioni:

1. Configura i caratteri
Tutti i font aggiunti nella sezione 3.2 sono elencati in questa interfaccia. È possibile abilitare o disabilitare direttamente qualsiasi font.

2. Configura i colori
Tutti i colori aggiunti nella sezione 3.3 sono elencati in questa interfaccia. È possibile abilitare o disabilitare direttamente qualsiasi colore.

3. Configurare i gruppi di immagini


Tutti i gruppi di immagini aggiunti nella sezione 3.4 sono elencati in questa interfaccia. È possibile abilitare o disabilitare direttamente qualsiasi gruppo di immagini. Cliccando sul pulsante “Visualizza immagini”, verrà visualizzata la seguente schermata.

5.0 Interfaccia frontale di Modulo di progettazione di prodotti personalizzati Prestashop

Una volta installato e configurato il modulo Online Product Designer per il negozio, la scheda Impostazioni Product Designer/Customizer viene visualizzata nelle impostazioni generali dei prodotti del negozio. Per abilitare o disabilitare la pagina di personalizzazione di un prodotto, è sufficiente configurare le impostazioni del prodotto nella sezione “Catalogo prodotti” del back-office. Quando il modulo Product Designer/Customizer è abilitato per un prodotto, verrà visualizzato un pulsante “Personalizza” nella pagina del prodotto, come mostrato di seguito:

Cliccando sul pulsante “Personalizza”, il cliente visualizzerà una schermata pop-up contenente diverse impostazioni di design e personalizzazione del prodotto. I clienti possono aggiungere qualsiasi colore, testo personalizzato, immagine personalizzata o codice QR per un prodotto, in base alle proprie esigenze di acquisto.

I tuoi clienti possono effettuare qualsiasi tipo di personalizzazione come: 1.Colore

2. Immagine: i clienti possono aggiungere un’immagine al prodotto. Possono scegliere un’immagine predefinita dal gruppo di immagini, caricare la propria immagine o aggiungere un codice QR al prodotto.

2a. Scegli un’immagine

2b. Carica l’immagine

Supponiamo che il cliente aggiunga l’immagine caricata sul retro della felpa con cappuccio. 2c. Aggiungi il codice QR

3. Testo

Salvataggio della personalizzazione del prodotto

Allo stesso modo, il cliente può personalizzare altri prodotti del negozio, come tazze e custodie per telefoni.

Pagina di riepilogo del carrello per il prodotto personalizzato L’immagine frontend sottostante mostra come il prodotto personalizzato viene visualizzato nella pagina del carrello con diverse opzioni per i clienti dopo aver cliccato sul pulsante “Salva personalizzazione”.


Il cliente può visualizzare la fattura di questo prodotto personalizzato come mostrato di seguito.


Pagina Cronologia Ordini con Fattura


Cliccando sul pulsante Dettagli, il cliente visualizzerà la seguente schermata:

Visualizzazione degli ordini dal pannello di amministrazione. L’amministratore può visualizzare la fattura dell’ordine e tutte le configurazioni relative alla personalizzazione del prodotto dal back-office. I dettagli di un ordine possono essere visualizzati nella sezione Ordini del pannello di amministrazione.

Cliccando 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 visualizzerà i dettagli completi del prodotto personalizzato sotto forma di schermata popup, come mostrato di seguito.

L’amministratore può cliccare sull’opzione “Anteprima” per vedere l’immagine personalizzata aggiunta al prodotto, come quella mostrata di seguito.

Tutorial: Guarda la guida video

Per aiutarti a configurare e utilizzare il Modulo di progettazione/personalizzazione dei prodotti PrestaShop, abbiamo preparato un dettagliato Video tutorial di YouTubeQuesto video ti guiderà passo dopo passo attraverso l’installazione, la configurazione e l’utilizzo del modulo.

Guarda il tutorial qui:

Per ulteriore assistenza, personalizzazioni o domande, contatta il nostro team di supporto all’indirizzo:
support@knowband.com