Estensione per designer/personalizzatore di prodotti Opencart – Manuale dell’utente

1.0 Introduzione

Tutti amano un tocco personale. Ciò è particolarmente vero nell’universo dello shopping online di oggi, che ti consente di ordinare il prodotto che preferisci comodamente dal tuo divano. Inoltre, lo spettacolare aumento del numero di negozi online ha offerto ai clienti un’ampia gamma di opzioni di acquisto. Ed è qui che entra in gioco la personalizzazione del prodotto. Aziende che implementano la personalizzazione del prodotto, progettano, modificano e commercializzano i propri articoli in base alle esigenze o ai desideri del cliente.�Designer/personalizzatore di prodotti Opencart offre molti vantaggi e generalmente porta a tassi di conversione più elevati. Fino a pochi anni fa, i prodotti personalizzati erano praticamente limitati a una ristretta cerchia di marchi e articoli. Comprendeva principalmente articoli da regalo, prodotti in vetrina o articoli di marketing. In senso figurato, potresti contare la quantità di oggetti personalizzati sulle dita di una mano. Fortunatamente, molto è cambiato. Per il bene. I venditori di praticamente di tutto, da abiti e camicie a borse e persino beni di consumo confezionati, stanno scoprendo i vantaggi e il valore della personalizzazione del prodotto. Sempre più marchi stanno scoprendo che la personalizzazione di articoli e servizi è un ottimo modo per aumentare la fedeltà e il coinvolgimento dei clienti. OpenCart Product Designer/Customizer è un modo semplice per consentire ai tuoi clienti di personalizzare qualsiasi prodotto secondo i loro desideri ed effettuare un ordine con te. Dà al tuo cliente la flessibilità di ottenere il Prodotto che desidera e nel modo in cui desidera, aumentando di conseguenza le tue vendite. I clienti possono aggiungere facilmente testi ricchi di colori con effetti, caricare le loro immagini con filtri e aggiungere un codice QR per renderlo adatto alle loro esigenze.

Perché dovresti dare l’opzione di personalizzazione del prodotto ai tuoi clienti?

Se ti stai chiedendo perché la personalizzazione del prodotto? Allora ecco perché renderebbe il tuo negozio web migliore.

picture1
2.0 Guida all’installazione

Prima di iniziare il processo di installazione, è necessario acquistare Opencart Product Designer/Customizer dal negozio Knowband. Una volta acquistato, riceverai i seguenti file sulla tua email registrata. 1. Codice sorgente del modulo di personalizzazione del prodotto Opencart in formato file zippato. 2. Manuale dell’utente dell’estensione del designer di prodotti personalizzati Opencart. Ora per installare questa estensione del designer di prodotti personalizzati Opencart sul tuo negozio online, segui i passaggi indicati:

Passo 1: Decomprimere il file zip. Otterrai le cartelle come mostrato nell’immagine qui sotto


Passo 2: Copia tutte le cartelle del file zip nella directory principale della configurazione di OpenCart tramite FTP manager. Quindi, il modulo Opencart Custom Product Design è ora installato correttamente ed è pronto per l’uso nel tuo negozio. Vai al menu di amministrazione e fai clic sulle estensioni. Scegli il tipo di estensione come moduli. Troverai un elenco di moduli. Seleziona il Designer/Personalizzatore di prodotti Opencart.

3.0 Interfaccia di amministrazione di Opencart Product Designer Customizer

Per configurare l’estensione Product Designer/Customizer per OpenCart, navigare nelle impostazioni nel seguente ordine:
Pannello di amministrazione > Estensioni > Moduli > Product Designer/Customizer

L’interfaccia di amministrazione dell’estensione OpenCart Product Designer/Customizer include le seguenti impostazioni principali:

  • Configurazione
  • Colori
  • fonte
  • Gruppo di immagini

Come personalizzare un prodotto?

Per personalizzare un prodotto, segui il seguente percorso:
Catalogo >> Prodotti >> Seleziona un prodotto >> Modifica >> Product Designer/Customizer


Una volta che l’utente fa clic su Product Designer/Customizer, l’utente avrà le seguenti opzioni nel modulo di personalizzazione del prodotto esteso di Opencart:

Configurazione 3.0.1

Attraverso questa impostazione del modulo Opencart Custom Product Design, l’Utente può abilitare/disabilitare l’intero Modulo e apportare modifiche alla Personalizzazione del Prodotto.

Prezzo 3.0.2

Questa impostazione del modulo di personalizzazione del prodotto esteso di Opencart consente all’amministratore di decidere il prezzo fisso per ogni personalizzazione che deve essere aggiunta al prodotto. La schermata per lo stesso apparirà come mostrato di seguito:


3.0.3 Testo

Attraverso questa impostazione del modulo Opencart Custom Product Design, l’amministratore può controllare l’opzione Testo nella personalizzazione. La schermata per questa opzione apparirà come mostrato di seguito:

3.0.4 Sides

L’impostazione dei lati del modulo di estensione del designer di prodotti personalizzati di Opencart consente all’amministratore di aggiungere un’immagine di diversi lati del prodotto in modo che l’utente possa personalizzare il prodotto da qualsiasi lato desideri. L’amministratore può anche nominare i lati aggiunti. Lo schermo apparirà come mostrato:

Come configurare caratteri, colori e gruppi di immagini?

Mentre modifichi le impostazioni di personalizzazione per un prodotto, troverai le opzioni per selezionare diversi tipi di carattere, colori, gruppi di immagini nella parte in alto a destra dello schermo. Troverai tre opzioni come:

1. Configura i caratteri

Tutti i font che sono stati aggiunti dal modulo sono elencati qui in questa interfaccia. Puoi abilitare o disabilitare direttamente qualsiasi tipo di carattere.


2. Configura i colori

Tutti i colori che sono stati aggiunti utilizzando il modulo sono elencati qui in questa interfaccia. Puoi abilitare o disabilitare direttamente qualsiasi colore.

3. Configura i gruppi di immagini


Tutti i gruppi di immagini che sono stati aggiunti sono elencati qui in questa interfaccia. Puoi abilitare o disabilitare direttamente qualsiasi gruppo di immagini. Facendo clic sul pulsante “Visualizza immagini”, vedrai la seguente schermata.

3.0.5 Configura

Questa opzione è fornita nel pannello di amministrazione dell’estensione del designer di prodotti personalizzati OpenCart, l’amministratore può abilitare/disabilitare l’intero modulo da questa impostazione. Lo schermo apparirà come mostrato di seguito:


Caratteri 3.0.6

Attraverso questa impostazione del modulo di personalizzazione del prodotto esteso di OpenCart, l’amministratore può aggiungere un nuovo carattere nel sistema e anche modificare quello esistente. Lo schermo apparirà come mostrato di seguito:

Modifica carattere: È possibile modificare un set di caratteri esistente utilizzando l’opzione Modifica. Le schermate per la modifica del carattere saranno le stesse di Aggiunta di un carattere. L’unica differenza sarà che Modifica avrà i campi già riempiti.

Elimina carattere: Puoi eliminare un carattere facendo clic sull’icona “Cestino”. Apparirà un pop up che chiede la conferma. Puoi fare clic su Sì e il carattere verrà eliminato.

Aggiungi carattere: Puoi aggiungere un carattere nel modulo di personalizzazione del prodotto esteso di OpenCart facendo clic sull’icona “+” nella parte superiore della pagina. Lo schermo apparirà come mostrato di seguito:


3.0.7 Colori

Attraverso questa impostazione del modulo di personalizzazione del prodotto esteso di OpenCart, l’amministratore può aggiungere un nuovo colore nel sistema e anche modificare quello esistente. Lo schermo apparirà come mostrato di seguito:


Modifica colore: È possibile modificare un set di colori esistente utilizzando l’opzione Modifica. Le schermate per la modifica del colore saranno le stesse di Aggiunta di un colore. L’unica differenza sarà che Modifica avrà i campi già riempiti.

Elimina colore: Puoi eliminare un colore facendo clic sull’icona “Cestino”. Apparirà un pop up che chiede la conferma. È possibile fare clic su Sì e il carattere verrà eliminato.

Aggiungi colore: Puoi aggiungere un colore nel modulo di personalizzazione estesa del prodotto OpenCart facendo clic sull’icona “+” nella parte superiore della pagina. Lo schermo apparirà come mostrato di seguito:


3.0.8 Gruppo di immagini

Le impostazioni del gruppo di immagini del modulo di personalizzazione del prodotto esteso di OpenCart consentono all’amministratore di aggiungere un gruppo di immagini da offrire ai propri clienti per la personalizzazione del prodotto. Lo schermo apparirà come mostrato di seguito:

Modifica gruppo di immagini: Puoi modificare un gruppo di immagini esistente utilizzando l’opzione Modifica. Le schermate per la modifica del gruppo di immagini saranno le stesse di Aggiunta di un colore. L’unica differenza sarà che Modifica avrà i campi già riempiti.

Elimina gruppo di immagini: Puoi eliminare un gruppo di immagini facendo clic sull’icona “Cestino”. Apparirà un pop up che chiede la conferma. È possibile fare clic su Sì e il carattere verrà eliminato.

Aggiungi gruppo di immagini: Puoi aggiungere un gruppo di immagini nel modulo di personalizzazione del prodotto esteso di OpenCart facendo clic sull’icona “+” nella parte superiore della pagina. Lo schermo apparirà come mostrato di seguito:

Anteprima del gruppo di immagini:�Puoi visualizzare tutte le immagini all’interno di un gruppo facendo clic sull’icona “Occhio” corrispondente a un determinato gruppo. Verrà visualizzata la schermata seguente:


Qui puoi aggiungere una nuova immagine nel gruppo, modificare/eliminare l’immagine esistente. Facendo clic sul pulsante Aggiungi, vedrai le seguenti opzioni come mostrato di seguito:

Carica immagine: Questa opzione ti consentirà di sfogliare un’immagine desiderata dallo spazio del tuo computer locale e caricarla qui.

Prezzo: Questa opzione imposta il prezzo per l’immagine selezionata.

Attivo: Questa opzione abilita o disabilita l’immagine per il gruppo selezionato. Impostalo su SÌ o NO. Allo stesso modo, puoi fare clic sul pulsante Modifica corrispondente all’immagine. Le opzioni saranno le stesse, l’unica differenza è che i campi verranno compilati come mostrato nell’immagine sottostante.


Eliminare un’immagine è semplice. Basta cliccare sull’icona “Cestino” corrispondente all’immagine.

4.0 Interfaccia frontale del modulo di personalizzazione di Opencart Product Designer

Se il modulo Opencart Product Designer/Customizer è abilitato, mostrerà un pulsante “Personalizza” sulla pagina del prodotto come mostrato di seguito.

Facendo clic sul pulsante Personalizza, al cliente verrà mostrata una schermata pop-up 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 clienti possono eseguire vari tipi di personalizzazioni come:

1. Colore

 

2. Immagine

I clienti possono selezionare un’immagine a loro scelta dalle opzioni del gruppo di immagini fornite.

Possono caricare e stampare qualsiasi altra immagine a loro scelta dallo spazio locale.

Possono persino stampare un codice QR per alcuni testi nascosti o collegamenti a siti Web.

 

3. Testo


Il cliente può salvare tutte le personalizzazioni del proprio prodotto facendo clic sul pulsante Salva come mostrato di seguito.

Mostrerà la casella di controllo del costo sullo schermo. Fare clic su OK per confermare.


Allo stesso modo, queste personalizzazioni sono applicabili ad altri prodotti del negozio come tazze e custodie per telefoni.

Pagina di riepilogo del carrello per prodotti personalizzati

L’immagine del frontend sottostante mostra come il prodotto personalizzato viene visualizzato nella pagina del 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.


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 sulle immagini del prodotto, l’amministratore vedrà i dettagli completi del prodotto personalizzato sotto forma di una schermata popup come mostrato di seguito.

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