Eigenes CSS

Für Styling, das über den visuellen Editor hinausgeht, enthält Sami Product Labels einen integrierten CSS-Editor. Außerdem steuern Sie die Ebenenreihenfolge von Badges mit z-index, fügen Tooltips beim Darüberfahren hinzu und legen Alt-Text für Bild-Badges fest.

So fügen Sie eigenes CSS hinzu

1. Badge-Editor öffnen

   Gehen Sie in Sami Product Labels zu Badges & Labels. Wählen Sie Create badge oder bei einem vorhandenen Badge das Symbol Edit badge/label in der Spalte Actions.

2. Zum Tab „Design“ wechseln

   Wählen Sie im Badge-Editor Design. Dieser Tab ist beim Öffnen des Editors standardmäßig ausgewählt.

3. Zu Advanced Settings scrollen

   Klappen Sie Advanced settings im unteren Bereich des Tabs „Design“ auf.

4. „Custom css“ aktivieren

   Aktivieren Sie unter Advanced die Option Custom css.

5. Selektor einfügen und CSS hinzufügen

   Der CSS-Editor erscheint mit drei Optionen unter CSS reference:

   • .samita_productLabel-content gestaltet das gesamte Badge.
   • .samita_productLabel-content-text gestaltet Text-Badges.
   • .samita_productLabel-content img gestaltet Bild-Badges.

   Wählen Sie die gewünschte Option. Die App fügt einen Selektor in den Editor ein, der mit der aktuellen Badge-ID versehen ist, etwa .__content--94129. Behalten Sie diesen Badge-spezifischen Teil des Selektors bei und fügen Sie innerhalb der geschweiften Klammern nur die Deklarationen hinzu, die Sie brauchen.

   /* 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;
   }

   

   Wählen Sie unter CSS reference eine Klasse aus, um einen Badge-spezifischen Selektor in den Editor für eigenes CSS einzufügen.

6. Vorschau und Speichern

   Beobachten Sie beim Bearbeiten die Live-Vorschau. Wenn das Ergebnis passt, wählen Sie Save und prüfen Sie das Badge dann in Ihrem Onlineshop auf der entsprechenden Kollektions- oder Produktseite.

Achtung

Eigenes CSS wird mit diesem Badge gespeichert, aber seine Selektoren bestimmen weiterhin, welche Elemente des Onlineshops es beeinflussen kann. Behalten Sie den von der App erzeugten Badge-spezifischen Selektor bei. Ein allgemeiner Selektor wie .samita_productLabel-content allein kann auch auf andere Badges zutreffen.

Z-index-Steuerung

Beheben Sie ein Badge, das hinter einem Overlay des Produktbilds, einem fixierten Header oder einem anderen Badge verborgen ist.

1. Aktivieren Sie in Advanced settings die Option Z-index.
2. Geben Sie einen Wert von 1 bis 100 ein. Höhere Werte platzieren das Badge vor Elementen mit niedrigeren z-index-Werten.

Legen Sie einen z-index-Wert fest, um die Ebenenreihenfolge des Badges zu steuern.

Hinweis

Der z-index wird auch vom Stapelkontext beeinflusst, den Ihr Theme erzeugt. Wenn das Badge durch einen höheren Wert nicht nach vorn rückt, muss möglicherweise ein übergeordneter Container im Theme per CSS angepasst werden.

Tooltip beim Darüberfahren

Fügen Sie einen Tooltip hinzu, der erscheint, wenn Kundschaft mit der Maus über Ihr Badge fährt – nützlich, um zu erklären, was „New Arrival“ oder „Limited Edition“ bedeutet, ohne das Produktbild zu überladen.

1. Aktivieren Sie in Advanced settings die Option Show tooltip on hover.
2. Geben Sie den Tooltip-Text ein, der beim Darüberfahren erscheinen soll.

Fügen Sie Tooltip-Text hinzu, der angezeigt wird, wenn Kundschaft mit der Maus über das Badge fährt.

Geben Sie wichtige Informationen nicht nur im Tooltip an. Auf Touchscreens oder bei der Navigation per Tastatur wird der Hover-Zustand möglicherweise nicht ausgelöst.

SEO-Alt-Text für Bild-Badges

Legen Sie Alt-Text fest, damit Screenreader die Bedeutung eines Bild-Badges beschreiben können. Aussagekräftiger Alt-Text kann auch die Bild-SEO unterstützen.

1. Aktivieren Sie in Advanced settings die Option Seo alt text.
2. Geben Sie eine knappe Beschreibung der Botschaft des Badges ein, etwa „20 % Rabatt-Badge“ oder „Label für kostenlosen Versand“. Vermeiden Sie Keyword-Stuffing und Formulierungen wie „Bild von“.

Legen Sie Alt-Text für Barrierefreiheit und SEO fest.

Nächste Schritte

• Badge-Stil ändern – Passen Sie Ihr Badge mit den Steuerelementen des visuellen Editors an.
• Badge-Position ändern – Platzieren Sie Ihr Badge an der richtigen Stelle auf der Seite.

Tipp

Brauchen Sie Hilfe?

Wenn Sie bei diesen Schritten auf Schwierigkeiten stoßen, schreiben Sie uns an [email protected].