Tutti gli articoli

Design Studio: crea il tuo primo prodotto personalizzato

Tutorial passo per passo per costruire un prodotto personalizzato con il Design Studio di Composerie: tipi di blocco, campi di personalizzazione e strumenti della tela.

Design Studio: crea il tuo primo prodotto personalizzato

Design Studio: crea il tuo primo prodotto personalizzato

Il Design Studio è il cuore di Composerie. Qui costruisci i modelli dietro i tuoi prodotti personalizzati: definisci cosa il cliente può modificare, come le sue modifiche seguono dal vivo, e quali impostazioni di output e corrispondenze fornitore un commerciante può controllare. Questo tutorial ti porta attraverso un prodotto completo, da zero fino alla fine.

Aprire il Design Studio

Dalla dashboard di Composerie vai su Prodotti > Nuovo. Scegli un prodotto base dal tuo catalogo Shopify sincronizzato, scegli il partner di stampa e clicca Apri Design Studio. L’editor parte con una tela vuota nelle dimensioni dell’area di stampa del tuo prodotto.

L’interfaccia ha tre zone principali:

  • Pannello sinistro — libreria dei blocchi ed elenco dei livelli
  • Centro — la tela interattiva
  • Pannello destro — proprietà e vincoli del blocco selezionato

Pannello dei tipi di blocco nel Design Studio di Composerie: testo, immagine e forme

I tipi di blocco

I blocchi sono i mattoni di ogni modello. Ogni tipo ha il suo scopo, e li combini liberamente per comporre layout complessi.

Blocchi di testo

I blocchi di testo mostrano testo fisso o modificabile dal cliente. Aggiungendone uno imposti:

  • Testo predefinito — quello che compare prima che il cliente cambi qualcosa
  • Carattere e corpo — scegli dalla libreria integrata oppure carica i tuoi caratteri
  • Colore — fissa un colore, oppure lascia scegliere al cliente
  • Allineamento e spaziatura — come scorre il testo dentro il blocco
  • Limiti di caratteri — evita che il cliente scriva più di quanto entri nell’area di design

I blocchi di testo sono l’elemento di personalizzazione più usato. Vanno bene per nomi, date, monogrammi, citazioni e messaggi brevi.

Blocchi immagine

Con i blocchi immagine metti grafiche fisse oppure lasci che il cliente carichi la sua foto. Fra le impostazioni:

  • Immagine predefinita — un segnaposto o una grafica fissa
  • Impostazioni di caricamento — risoluzione minima, tipi di file accettati, dimensione massima
  • Ritaglio — se l’immagine riempie la cornice, ci sta dentro, o si ritaglia a mano
  • Filtri — effetti facoltativi che il cliente può applicare alla sua immagine

Imposta la risoluzione minima in linea con il requisito DPI del tuo partner di stampa. Così eviti caricamenti che stampano male.

Blocchi forma

I blocchi forma aggiungono geometria: rettangoli, cerchi, linee e tracciati propri. Utili per:

  • Bordi e cornici decorative attorno a testo o immagine
  • Fondi che danno contrasto dietro il contenuto personalizzato
  • Linee di separazione fra le parti del design

Le forme possono avere proprietà fisse oppure agganciarsi a un campo di personalizzazione, così il cliente regola colore o dimensione.

Impostare i campi di personalizzazione

I campi di personalizzazione sono gli input con cui il cliente lavora sulla scheda prodotto Shopify. Ogni campo è agganciato a uno o più blocchi sulla tela, e collega ciò che il cliente scrive o sceglie a ciò che compare nell’anteprima.

Campi di testo

Il tipo più semplice. Un campo di testo è agganciato a un blocco di testo e si aggiorna dal vivo mentre il cliente scrive. Imposti:

  • Etichetta — quello che vede il cliente (per esempio «Scrivi il tuo nome»)
  • Testo di esempio — quello che si vede prima della scrittura
  • Regole di convalida — obbligatorio o facoltativo, lunghezza minima e massima, caratteri ammessi
  • Trasformazione — maiuscole, minuscole o iniziali maiuscole in automatico

Campi di caricamento immagine

Con i campi di caricamento il cliente aggiunge la sua foto o la sua grafica. Tu fissi i criteri di accettazione, e il caricamento si aggancia a un blocco immagine sulla tela.

Il cliente vede un’area in cui trascinare il file sulla scheda prodotto. Dopo il caricamento può spostare e ridimensionare l’immagine dentro i limiti del blocco. L’anteprima risponde all’istante, quindi vede esattamente come verrà la sua foto.

Selettori di colore

Un selettore di colore lascia scegliere al cliente i colori di testo, forme o sfondi. Sei tu a decidere cosa è disponibile:

  • Tavolozza fissa — un insieme scelto, in linea con il tuo marchio o con quello che riesci a stampare
  • Selettore libero — l’intera ruota dei colori
  • Blocchi collegati — quali elementi cambiano con il colore scelto

Limita la tavolozza ai colori che il tuo fornitore gestisce bene: ti risparmia sorprese in produzione.

Selettori di carattere

Un selettore di carattere dà al cliente la scelta del font per il suo testo. Tu componi l’elenco, e l’anteprima sulla tela si aggiorna subito.

Raggruppa i caratteri per stile (con grazie, senza grazie, corsivo, display) così il cliente trova in fretta. Tieni l’elenco stretto: da 8 a 12 caratteri scelti bene funzionano meglio di centinaia di opzioni.

Lavorare sulla tela

La barra strumenti sopra la tela ti dà precisione nel disporre il design.

Allineare e distribuire

Seleziona più blocchi e usa gli strumenti di allineamento per sistemarli: a sinistra, al centro, a destra, o distribuiti in modo regolare. Così le spaziature restano coerenti e pulite a qualsiasi formato di stampa.

Barra di allineamento della tela nel Design Studio di Composerie

Livelli e ordine

Ogni blocco sta su un livello. Con il pannello dei livelli a sinistra riordini gli elementi e decidi cosa sta davanti o dietro. È decisivo quando un blocco immagine si sovrappone al testo: il livello del testo deve restare sopra per rimanere leggibile.

Aggancio e guide

Attiva le guide intelligenti per vedere i suggerimenti di allineamento mentre trascini. L’aggancio alla griglia tiene uguali le spaziature. Entrambi si possono spegnere quando vuoi posizionare a mano libera.

Zoom e anteprima

Ingrandisci per i dettagli, poi passa alla modalità anteprima per vedere il design come lo vedranno i clienti. In quella modalità sparisce l’interfaccia dell’editor e resta solo il prodotto con i suoi campi, esattamente come appare nel tuo negozio Shopify.

Salvare e pubblicare

Salvare come bozza

Clicca Salva quando vuoi per conservare il lavoro come bozza. Le bozze si vedono solo nella tua dashboard, non nel negozio. Comode per continuare a rifinire, raccogliere pareri dal team, o preparare in anticipo i prodotti di stagione.

Pubblicare su Shopify

Quando il design è pronto, clicca Pubblica. Composerie rende disponibile la configurazione del personalizzatore sulla tua scheda prodotto Shopify. I clienti possono personalizzare e ordinare subito.

Dopo la pubblicazione puoi continuare a lavorare. Le modifiche si accumulano come bozza finché non pubblichi di nuovo, così il personalizzatore in linea resta stabile nel frattempo.

Duplicare e derivare

Usa Duplica per copiare un modello esistente e adattarlo a un altro prodotto o a un’altra variante. Fa risparmiare tempo quando la tua gamma condivide opzioni simili: costruisci un buon modello e declinalo sul catalogo.

Consigli per design migliori

  1. Parti dall’area di stampa — allinea le misure della tela alle specifiche del fornitore prima di mettere qualsiasi blocco
  2. Metti vincoli chiari — limiti di caratteri e risoluzioni minime evitano design che stampano male
  3. Prova su mobile — la maggior parte del traffico Shopify arriva dal telefono; controlla che il personalizzatore lì funzioni bene
  4. Usa la modalità anteprima — guarda sempre l’esperienza del cliente prima di pubblicare
  5. Tieni pochi campi — da tre a cinque campi di personalizzazione è un intervallo di partenza ragionevole; troppe opzioni stancano e ti costano completamenti

Anteprima mobile del personalizzatore dal vivo di Composerie

Iniziare

Il Design Studio ti dà pieno controllo sull’esperienza di personalizzazione. Che tu faccia prodotti semplici con un monogramma o design complessi con molti campi, gli strumenti sono fatti per reggerli.

Pronto a creare il tuo primo prodotto personalizzato? Inizia gratis e apri oggi il Design Studio.

Continua a leggere

Tutorial

Iniziare con Composerie: il tuo primo prodotto personalizzato

Come impostare il tuo primo prodotto personalizzato in Composerie, dal collegamento del negozio Shopify al personalizzatore attivo.

Guide

Print on demand con personalizzazione: la guida completa

Come la personalizzazione si inserisce in un flusso print on demand, come collegare un partner di stampa e che percorso fa un ordine dal cliente alla consegna.

Confronto

Composerie e i personalizzatori di prodotto classici: cosa cambia?

Composerie accanto alle app di personalizzazione Shopify di sempre: anteprima dal vivo, analytics e il lavoro dopo l'ordine.