CSS personalizzato

Per gli stili che vanno oltre l’editor visivo, Sami Product Labels include un editor CSS integrato. Puoi anche controllare la sovrapposizione dei badge con lo z-index, aggiungere suggerimenti al passaggio del mouse e impostare il testo alternativo per i badge con immagine.

Come aggiungere CSS personalizzato

1. Apri l’editor dei badge

   Da Sami Product Labels, vai su Badges & Labels. Seleziona Create badge, oppure l’icona Edit badge/label nella colonna Actions di un badge esistente.

2. Vai alla scheda Design

   Seleziona Design nell’editor dei badge. Questa scheda è selezionata per impostazione predefinita quando si apre l’editor.

3. Scorri fino a Advanced Settings

   Espandi Advanced settings verso il fondo della scheda Design.

4. Attiva «Custom css»

   In Advanced, attiva Custom css.

5. Inserisci un selettore e aggiungi il tuo CSS

   Compare l’editor CSS con tre opzioni in CSS reference:

   • .samita_productLabel-content applica lo stile all’intero badge.
   • .samita_productLabel-content-text applica lo stile ai badge di testo.
   • .samita_productLabel-content img applica lo stile ai badge con immagine.

   Seleziona l’opzione che ti serve. L’app inserisce nell’editor un selettore limitato all’ID del badge attuale, come .__content--94129. Mantieni quella parte specifica del badge nel selettore, poi aggiungi solo le dichiarazioni che ti servono tra le parentesi graffe.

   /* Use the badge ID inserted by the app in place of YOUR_BADGE_ID. */
   .samita_productLabel-content.__content--YOUR_BADGE_ID {
     box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
   }
   
   .samita_productLabel-content.__content--YOUR_BADGE_ID:hover {
     transform: scale(1.1);
     transition: transform 0.2s ease;
   }

   

   Seleziona una classe in CSS reference per inserire un selettore limitato al badge nell’editor Custom CSS.

6. Anteprima e salvataggio

   Controlla l’anteprima dal vivo mentre modifichi. Quando il risultato ti convince, seleziona Save, poi verifica il badge nella pagina collezione o prodotto pertinente della tua vetrina.

Attenzione

Il CSS personalizzato viene salvato con questo badge, ma i suoi selettori determinano comunque quali elementi della vetrina può influenzare. Mantieni il selettore limitato al badge generato dall’app. Un selettore generico come .samita_productLabel-content da solo può corrispondere anche ad altri badge.

Controllo dello z-index

Risolvi il problema di un badge nascosto dietro una sovrapposizione dell’immagine del prodotto, un’intestazione fissa o un altro badge.

1. In Advanced settings, attiva Z-index.
2. Inserisci un valore da 1 a 100. I valori più alti collocano il badge davanti agli elementi con z-index più basso.

Imposta un valore di z-index per controllare la sovrapposizione dei badge.

Nota

Lo z-index dipende anche dal contesto di sovrapposizione creato dal tuo tema. Se aumentare il valore del badge non lo porta in primo piano, potrebbe essere necessario un intervento sul CSS di un contenitore padre nel tema.

Suggerimento al passaggio del mouse

Aggiungi un suggerimento che compare quando si passa con il mouse sul badge: utile per spiegare cosa significano “New Arrival” o “Limited Edition” senza appesantire l’immagine del prodotto.

1. In Advanced settings, attiva Show tooltip on hover.
2. Inserisci il testo del suggerimento che deve comparire al passaggio del mouse.

Aggiungi il testo del suggerimento che viene mostrato quando si passa con il mouse sul badge.

Non inserire informazioni essenziali solo nel suggerimento. Chi usa il touchscreen o naviga con la tastiera potrebbe non attivare lo stato di passaggio del mouse.

Testo alternativo SEO per i badge con immagine

Imposta il testo alternativo perché gli screen reader possano descrivere il significato di un badge con immagine. Un testo alternativo descrittivo può anche favorire la SEO delle immagini.

1. In Advanced settings, attiva Seo alt text.
2. Inserisci una descrizione concisa del messaggio trasmesso dal badge, come “20% off sale badge” o “Free shipping label”. Evita di ripetere parole chiave in modo eccessivo e frasi come “image of”.

Imposta il testo alternativo per accessibilità e SEO.

Passaggi successivi

• Modificare lo stile del badge: personalizza il badge con i controlli dell’editor visivo.
• Modificare la posizione del badge: posiziona il badge nel punto giusto della pagina.

Consiglio

Serve aiuto?

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