Modificare lo stile del badge

Usa la scheda Design per cambiare l’aspetto di un badge. I badge di testo offrono controlli per carattere, colore, sfondo, bordo, opacità e rotazione. I badge con immagine offrono controlli per opacità e rotazione della grafica selezionata.

Apri un badge nell’editor

1. Apri Badges & Labels

   Nell’amministrazione Shopify, apri Sami Product Labels > Badges & Labels.

2. Seleziona un badge

   Trova il badge che vuoi aggiornare, poi fai clic su Edit badge/label nella sua riga.

   Per dare uno stile a un nuovo badge, fai clic su Create badge, poi scegli Text badge o Image badge.

   

   Fai clic su Edit badge/label per il badge che vuoi personalizzare.

3. Resta nella scheda Design

   L’editor si apre su Design. Le sezioni disponibili dipendono dal fatto che tu abbia selezionato un badge di testo o con immagine.

Personalizza un badge di testo

Scegli un carattere e il colore del testo

Usa i controlli sotto Badge text per personalizzare il testo:

• Font picker: scegli un carattere dall’elenco integrato.
• Use Custom Font Style: attiva questa opzione per inserire una famiglia di caratteri in Font, poi scegli uno stile o uno spessore disponibile, come Regular o Bold.
• Text color: apri il selettore di colori e scegli un colore che resti leggibile sullo sfondo del badge.

Scegli un carattere integrato oppure attiva Use Custom Font Style, poi imposta il colore del testo.

Dimensione del testo e spaziatura tra le lettere si configurano in Size. Vedi Modificare la dimensione del badge per questi controlli.

Scegli uno sfondo

Espandi Style, poi seleziona un Fill type:

Fill type	Quando usarlo
Solid	Un singolo colore di sfondo o un colore predefinito.
Shape	Una forma di modello con colore a tinta unita o sfumato.
Image	Una texture, un motivo o una grafica usati come sfondo del badge di testo.

Espandi Style e seleziona il tipo di sfondo per il badge di testo.

Usa uno sfondo a tinta unita

Seleziona Solid, poi scegli un Background color. Puoi anche selezionare uno dei preset sotto Choose template.

Usa una forma o uno sfondo sfumato

Seleziona Shape, poi configura quanto segue:

• Choose from library: apri la galleria dei modelli e filtra i design per categorie come Sales, Autotext, Stock, Free shipping, Pre-order e altre.
• Start color e End color: usa lo stesso colore per un effetto uniforme o due colori diversi per una sfumatura.
• Gradient direction: scegli Left to right, Top to bottom, Diagonal o Radial.
• Choose template: applica direttamente un preset di forma dall’editor.

Scegli una forma, imposta i suoi colori e seleziona la direzione della sfumatura.

Usa uno sfondo con immagine

Seleziona Image, poi fai clic su Select Image per scegliere uno sfondo personalizzato. L’editor accetta file PNG, JPG o SVG fino a 5 MB. Fai clic su Remove per cancellare lo sfondo selezionato.

Nota

Questa immagine viene usata solo come sfondo di un badge di testo. Per mostrare una grafica autonoma senza testo modificabile, usa invece un badge con immagine.

Seleziona una grafica da usare come sfondo di un badge di testo.

Aggiungi un bordo o arrotonda gli angoli

Espandi Border & corners. Entrambe le opzioni possono essere attivate in modo indipendente:

Opzione	Controlli disponibili
Add border	Imposta Border width da 0 a 8 px, scegli un Border color e seleziona Solid, Dotted o Dashed.
Round corners	Imposta Corner radius da 0 a 100 px.

Aggiungi un bordo, arrotonda gli angoli oppure usa entrambe le impostazioni insieme.

Dai uno stile a un badge con immagine

I badge con immagine non mostrano i controlli di carattere, sfondo o Border & corners del badge di testo. Usa Content in cima alla scheda Design per cambiare la grafica del badge, poi usa Advanced settings per regolarne opacità o rotazione.

Per dimensioni e posizione dell’immagine, vedi Modificare la dimensione del badge e Modificare la posizione del badge.

Regola opacità o rotazione

Questi effetti sono disponibili sia per i badge di testo sia per quelli con immagine:

1. Espandi Advanced settings.
2. In Effects, attiva l’opzione che ti serve.
3. Regola il valore controllando l’anteprima dal vivo.

Effetto	Intervallo
Adjust opacity	Da 0 % a 100 %
Rotate badge	Da 0° a 360°

Attiva Adjust opacity o Rotate badge, poi imposta il valore dell’effetto.

Nota

La sezione Effects include anche Use animation. Vedi Aggiungere un’animazione a un badge per il procedimento completo dell’animazione.

Anteprima e salvataggio

Usa la barra dell’anteprima per controllare il badge in Collection page e Product page, poi passa tra Desktop view e Mobile view. Quando il badge ha l’aspetto giusto in ogni anteprima necessaria, fai clic su Save.

Attenzione

Controlla il contrasto del testo dopo aver cambiato colori od opacità. Uno stile leggibile su un’immagine del prodotto può essere difficile da leggere su un’altra.

Passaggi successivi

• Modificare la dimensione del badge: ridimensiona il badge e regola la dimensione del testo o la spaziatura tra le lettere.
• Modificare la posizione del badge: sposta il badge e regola margine o padding.
• Aggiungere un’animazione a un badge: applica un effetto di animazione e configura velocità e numero di ripetizioni.
• Usare CSS personalizzato: rifinisci il badge con CSS personalizzato.

Consiglio

Serve aiuto?

Se incontri difficoltà mentre segui questi passaggi, scrivici a [email protected].