Vuoi far risaltare i tuoi prodotti Shopify con tag personalizzati accattivanti? Allora questa è la guida giusta per te. Badge come "Saldi", "Nuovo arrivo" o "Best Seller" possono aiutare i prodotti a farsi notare velocemente. Non hai bisogno di alcuna app per farlo. Sorpreso? In questo post, imparerai come creare badge di prodotto Shopify senza un'app utilizzando Metacampi di Shopify e codice tematico semplice.
Questa guida passo passo è adatta anche a chi non ha competenze di programmazione. Imparerai anche come aggiungere un badge su Shopify e come controllarne testo e colore direttamente dal pannello di amministrazione. Al termine, avrai badge colorati e professionali, dall'aspetto pulito e dal caricamento rapido. Pronto a trasformare il tuo negozio Shopify? Iniziamo subito!
I badge aiutano i clienti a concentrarsi sui prodotti chiave. Evidenziano le novità, i prodotti più popolari o quelli in saldo.
Guidano gli acquirenti e aumentano i clic.
Esempi:
Se vendi abbigliamento, aggiungi un badge "Nuovo arrivo" ai nuovi articoli. I clienti li noteranno subito.
Aggiungere badge personalizzati Shopify migliora l'aspetto del tuo negozio e ti fa risparmiare. Non avrai bisogno di app o script aggiuntivi. È uno dei modi migliori per aggiungere badge ai prodotti Shopify in modo semplice.
Imparerai a:
Nella prossima sezione, forniremo una guida passo passo su come aggiungere badge personalizzati utilizzando un codice semplice. Non preoccuparti se non hai familiarità con il codice. Queste istruzioni sono facili da seguire e tutto ciò che devi fare è copiare e incollare per ottenere il risultato desiderato.
Metafields memorizza ulteriori dettagli sui prodotti.
Ne creerai tre: uno per il testo del badge, uno per il colore di sfondo e uno per il colore del testo.
Passaggi:
Ora modifica qualsiasi prodotto e scorri fino a MetacampiVedrai tre caselle pronte da riempire.
Esempio:
Se il prodotto è un abito estivo, compila
Salvalo.
Shopify mostrerà ora un badge rosso di vendita su quel prodotto.
Ecco come funzionano i badge dei prodotti Shopify senza un'app.
Questo passaggio è semplice. Basta incollare un blocco di codice.
{% se product.metafields.custom.badge_text != vuoto %}
<div class=”custom-badge”
stile=”colore-di-sfondo: {{ product.metafields.custom.badge_background_color }};
colore: {{ product.metafields.custom.badge_text_color }};”>
{{ prodotto.metafields.custom.badge_text }}
</div>
{% fine se %}
Screenshot del codice:
Salvalo.
Questo codice verifica se un prodotto ha un testo distintivo. In caso affermativo, il distintivo viene visualizzato automaticamente.
Esempio:
Se aggiungi "Vendita" al tuo metacampo, questo codice lo visualizza. Tutto quello che hai dovuto fare è stato copiare e incollare. Facile, vero?
Funziona con un badge di vendita Shopify, "Nuovo arrivo" o qualsiasi altro testo. È uno dei modi più semplici per utilizzare i badge dei prodotti Shopify senza un'app.
Ora indica a Shopify dove mostrare il badge.
{% rende 'product-badge' %}
Screenshot del codice:
Salva.
Quindi apri modello-prodotto.liquido e incolla la stessa riga nel punto in cui desideri che appaia il badge nelle pagine dei prodotti.
Esempio:
Incollalo sopra l'immagine per mostrare "Nuovo arrivo" direttamente sull'immagine. Salva e aggiorna.
Mancia:
Duplica il tema prima di modificarlo. In questo modo, potrai ripristinarlo facilmente se necessario.
Questa configurazione ti aiuta ad aggiungere rapidamente badge ai prodotti Shopify e funziona su qualsiasi tema.
Ora puoi definire l'aspetto del tuo badge.
Apri il tuo file CSS (base.css O tema.css).
Scorri fino in fondo e aggiungi questo codice.
.distintivo personalizzato {
posizione: assoluta;
in alto: 10px;
sinistra: 10px;
imbottitura: 5px 10px;
font-weight: grassetto;
dimensione carattere: 14px;
raggio del bordo: 5px;
indice z: 10;
spazio bianco: nowrap;
}
Screenshot del codice:
Salva.
I tuoi badge ora vengono visualizzati nell'angolo in alto a sinistra di ogni immagine del prodotto.
Esempio:
Un badge rosso di vendita Shopify con testo bianco ora è chiaramente visibile su ogni prodotto. È possibile modificarne la posizione modificando i numeri in alto o a sinistra.
Ecco come puoi personalizzare i badge dei prodotti Shopify senza un'app. E senza nemmeno dover modificare il layout principale.
Adesso è il momento di applicare il tuo badge.
Aggiorna il tuo negozio. Vedrai il badge Bestseller dorato.
Hai appena creato una configurazione Shopify personalizzata per i badge dei prodotti che funziona perfettamente senza strumenti esterni.
È anche possibile creare badge con tag anziché metacampi.
Aggiungi un tag denominato "sale" al tuo prodotto. Quindi incolla questo codice nello stesso punto di prima.
{% se product.tags contiene 'vendita' %}
<div class="”custom-badge”">Vendita</div>
{% fine se %}
Screenshot del codice:
Ora personalizzalo.
.distintivo personalizzato {
colore di sfondo: #FF0000;
colore: #FFFFFF;
}
Screenshot del codice:
Esempio:
I prodotti con il tag "in saldo" ora mostrano un badge rosso "In saldo". Rimuovi il tag e il badge scompare.
Questo metodo di configurazione manuale del badge su Shopify è più veloce ma meno flessibile. Non è possibile modificare i colori per prodotto, a differenza del badge Shopify, senza un'app che utilizzi i metacampi.
Nella prossima sezione, elencheremo alcune soluzioni comuni per aiutarti a ridurre al minimo gli errori. Vediamole insieme.
Se i badge non ti sembrano corretti, controlla questi.
Distintivo mancante
Assicurati che i nomi dei metacampi corrispondano esattamente (come testo_distintivo).
Posizione del badge
Modifica i valori in alto e a sinistra nel CSS.
Il colore non si vede
Utilizzare un # prima del codice colore.
Dopo piccole correzioni, i badge dei tuoi prodotti Shopify dovrebbero essere visualizzati correttamente senza l'app.
Puoi fare un ulteriore passo avanti con i badge Shopify di ScontoRayNon hai bisogno di alcuna codifica. In soli 2 clic, il tuo badge personalizzato è pronto.
Esempi:
C'è una guida dettagliata su come puoi personalizzare ulteriormente le tue offerte utilizzando questo sconto personalizzato applicazione.
Ora sai come creare badge di prodotto Shopify senza un'app. Non hai dovuto scrivere codice o installare nulla.
Voi
Il tuo negozio ora appare più pulito e veloce. Inizia in piccolo. Aggiungi un badge e provalo. Un piccolo badge può fare una grande differenza nel modo in cui gli acquirenti vedono i tuoi prodotti. Ci auguriamo che questo articolo ti sia stato utile. Condividilo con altri commercianti Shopify che desiderano trasformare il loro negozio Shopify in meglio. Per altri consigli degli esperti, consulta i nostri altri blog sull'eCommerce.
Puoi aggiungere un badge personalizzato in Shopify creando metacampi per il testo e i colori del badge, quindi incollando un piccolo frammento di codice Liquid nel tuo tema.
Sì. Puoi modificare le forme dei badge con CSS, ad esempio rendendoli rotondi o rettangolari.
Crea un metacampo con testo come "Saldi" o "Sconto" e usa il codice del tuo badge per visualizzarlo sulle immagini dei prodotti.
Puoi caricare le immagini del badge di fiducia e posizionarle sotto il pulsante "Aggiungi al carrello" nel file del modello di prodotto del tuo tema.
Aggiungi un metacampo con il testo "Spedizione gratuita" oppure usa un tag come "spedizione-gratuita" e visualizzalo utilizzando lo snippet del badge.
Puoi farlo utilizzando i badge dei prodotti Shopify senza un'app. Imposta i metafield, incolla uno snippet e personalizzalo con il CSS.
Puoi caricare icone o utilizzare il codice SVG nelle sezioni del tuo tema, proprio come aggiungi uno snippet di badge.
Sì. I badge aumentano la fiducia, attirano l'attenzione e aiutano a vendere i prodotti più velocemente.
Inizia con il nostro piano gratuito o sblocca le funzionalità premium con una prova gratuita di 14 giorni.
Garanzia soddisfatti o rimborsati entro 30 giorni!
Italiano 
English 
日本語 
Français 
Deutsch 
Español 
简体中文