Modificare la posizione del badge

Usa la sezione Position per posizionare un badge di testo o con immagine sopra l’immagine del prodotto, sotto un elemento della pagina prodotto o accanto a un elemento personalizzato del tema.

Apri la sezione Position

1. Apri Badges & Labels

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

2. Crea o seleziona un badge

   Per creare un badge, fai clic su Create badge, poi scegli Text badge o Image badge.

   Per aggiornare un badge esistente, fai clic su Edit badge/label nella riga di quel badge.

3. Espandi Position

   Nell’editor dei badge, resta nella scheda Design, scorri fino a Position ed espandi la sezione.

   

   Apri la scheda Design ed espandi Position.

Posiziona il badge dentro l’immagine del prodotto

Seleziona Inside product image quando il badge deve sovrapporsi all’immagine del prodotto.

Scegli dove si applica l’impostazione

Usa Badge placement per scegliere una di queste modalità:

• Use the same position for collection page and product page: una sola posizione si applica a entrambi i tipi di pagina.
• Set different position for collection page and product page: usa le schede Listing pages e Product page per configurare ogni posizione separatamente.

Nota

L’editor attuale chiama la prima scheda per pagina Listing pages, non Collection page.

Applica ovunque un’unica posizione dentro l’immagine, oppure configura Listing pages e Product page separatamente.

Scegli una posizione predefinita

In Badge position, seleziona uno dei nove punti della griglia di posizione.

Posizione	Collocazione sull’immagine
Top left	Angolo in alto a sinistra
Top center	Centro del bordo superiore
Top right	Angolo in alto a destra
Center left	Centro del bordo sinistro
Center	Centro dell’immagine
Center right	Centro del bordo destro
Bottom left	Angolo in basso a sinistra
Bottom center	Centro del bordo inferiore
Bottom right	Angolo in basso a destra

Seleziona una delle nove posizioni predefinite dentro l’immagine del prodotto.

Imposta una posizione personalizzata in percentuale

Attiva Use Custom Position quando le nove posizioni predefinite non sono abbastanza precise. L’editor sostituisce la griglia con:

• Un ancoraggio verticale: Top o Bottom.
• Un ancoraggio orizzontale: Left o Right.
• Un cursore percentuale per lo scostamento da ciascun ancoraggio selezionato.

Usa i pulsanti di cambio posizione per passare da un ancoraggio all’altro, poi regola i cursori controllando l’anteprima.

Scegli gli ancoraggi verticale e orizzontale, poi imposta i relativi scostamenti percentuali.

Posiziona il badge fuori dall’immagine del prodotto

Seleziona Outside product image quando il badge deve comparire accanto alle informazioni del prodotto invece di sovrapporsi all’immagine.

Apri Predefined position e scegli una di queste opzioni:

Opzione	Collocazione nella pagina prodotto
Below the product image	Direttamente sotto l’immagine del prodotto
Below the product title	Direttamente sotto il titolo del prodotto
Below the product price	Direttamente sotto il prezzo del prodotto
Below the product quantity	Direttamente sotto il controllo della quantità
Below the add to cart button	Direttamente sotto il pulsante di aggiunta al carrello
Below the buy now button	Direttamente sotto il pulsante di acquisto immediato
Custom	Accanto a un elemento identificato da un ID o una classe nel tuo tema

In Badge position, scegli l’allineamento del badge a sinistra, al centro o a destra.

Scegli un elemento della pagina prodotto, poi allinea il badge a sinistra, al centro o a destra.

Posiziona il badge con un selettore del tema

Scegli Custom da Predefined position per puntare a un elemento del tuo tema. Inserisci l’ID o la classe pertinente in ogni campo che ti serve:

Campo	Tipo di pagina
Position in product page	Pagine prodotto
Position in home page	Home page
Position in collection page	Pagine collezione
Position in other page	Altri tipi di pagina

Ad esempio, inserisci .product-form per una classe o #ProductInfo per un ID. Aggiungi un valore per ogni tipo di pagina in cui il badge richiede questa posizione personalizzata.

Attenzione

Gli ID e le classi dei temi variano. Ispeziona il tema della tua vetrina per trovare un selettore stabile, poi verifica il risultato in ogni tipo di pagina in cui il badge deve comparire.

Inserisci l’ID o la classe del tema per ogni tipo di pagina che richiede una posizione personalizzata del badge.

Regola margine e padding

Espandi Margin per cambiare la spaziatura esterna in pixel. L’editor mostra i lati rilevanti per la posizione selezionata.

Espandi Padding per cambiare lo spazio tra il contenuto del badge e i suoi bordi. Puoi impostare indipendentemente i valori superiore, inferiore, sinistro e destro.

Rifinisci il badge con valori di margine e padding in pixel.

Anteprima e salvataggio

Usa i controlli dell’anteprima per verificare Collection page e Product page, poi passa tra Desktop view e Mobile view. Quando il badge compare nella posizione desiderata, fai clic su Save.

Passaggi successivi

• Modificare la dimensione del badge: ridimensiona il badge per diversi viewport e tipi di pagina.
• Modificare lo stile del badge: personalizza caratteri, colori, bordi e sfondi.
• Visualizzazione per dispositivo e pagina: controlla quali dispositivi e pagine mostrano il badge.

Consiglio

Serve aiuto?

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