Badge-Stil ändern
Passen Sie Schriftarten, Farben, Hintergründe, Rahmen, Deckkraft und Drehung für Text- und Bild-Badges an.
Im Tab Design ändern Sie das Aussehen eines Badges. Text-Badges bieten Steuerelemente für Schriftart, Farbe, Hintergrund, Rahmen, Deckkraft und Drehung. Bild-Badges bieten Steuerelemente für Deckkraft und Drehung des ausgewählten Bilds.
Ein Badge im Editor öffnen
Abschnitt betitelt „Ein Badge im Editor öffnen“-
Badges & Labels öffnen
Abschnitt betitelt „Badges & Labels öffnen“Öffnen Sie im Shopify Admin Sami Product Labels > Badges & Labels.
-
Badge auswählen
Abschnitt betitelt „Badge auswählen“Suchen Sie das Badge, das Sie aktualisieren möchten, und klicken Sie in seiner Zeile auf Edit badge/label.
Um stattdessen ein neues Badge zu gestalten, klicken Sie auf Create badge und wählen Sie dann Text badge oder Image badge.
Klicken Sie bei dem Badge, das Sie anpassen möchten, auf Edit badge/label.
-
Im Tab „Design“ bleiben
Abschnitt betitelt „Im Tab „Design“ bleiben“Der Editor öffnet sich im Tab Design. Welche Bereiche verfügbar sind, hängt davon ab, ob Sie ein Text-Badge oder ein Bild-Badge ausgewählt haben.
Ein Text-Badge anpassen
Abschnitt betitelt „Ein Text-Badge anpassen“Schriftart und Textfarbe wählen
Abschnitt betitelt „Schriftart und Textfarbe wählen“Mit den Steuerelementen unter Badge text passen Sie den Text an:
- Font picker – Wählen Sie eine Schriftart aus der integrierten Liste.
- Use Custom Font Style – Aktivieren Sie diese Option, um unter Font eine Schriftfamilie einzugeben, und wählen Sie dann einen verfügbaren Schriftstil oder eine Schriftstärke, etwa Regular oder Bold.
- Text color – Öffnen Sie die Farbauswahl und wählen Sie eine Farbe, die vor dem Badge-Hintergrund gut lesbar bleibt.
Wählen Sie eine integrierte Schriftart oder aktivieren Sie Use Custom Font Style und legen Sie dann die Textfarbe fest.
Textgröße und Buchstabenabstand legen Sie unter Size fest. Diese Steuerelemente finden Sie unter Badge-Größe ändern.
Hintergrund wählen
Abschnitt betitelt „Hintergrund wählen“Klappen Sie Style auf und wählen Sie dann einen Fill type:
| Fill type | Verwenden für |
|---|---|
| Solid | Eine einzelne Hintergrundfarbe oder eine Farbvorlage. |
| Shape | Eine Vorlagenform mit einfarbiger oder verlaufender Farbgestaltung. |
| Image | Eine Textur, ein Muster oder ein Bild als Hintergrund des Text-Badges. |
Klappen Sie Style auf und wählen Sie die Hintergrundart für das Text-Badge.
Einfarbigen Hintergrund verwenden
Abschnitt betitelt „Einfarbigen Hintergrund verwenden“Wählen Sie Solid und dann eine Background color. Sie können auch eine der Vorlagen unter Choose template auswählen.
Form oder Farbverlauf als Hintergrund verwenden
Abschnitt betitelt „Form oder Farbverlauf als Hintergrund verwenden“Wählen Sie Shape und konfigurieren Sie dann Folgendes:
- Choose from library – Öffnen Sie die Vorlagengalerie und filtern Sie Designs nach Kategorien wie Sales, Autotext, Stock, Free shipping, Pre-order und weiteren.
- Start color und End color – Verwenden Sie dieselbe Farbe für eine einfarbige Gestaltung oder zwei verschiedene Farben für einen Farbverlauf.
- Gradient direction – Wählen Sie Left to right, Top to bottom, Diagonal oder Radial.
- Choose template – Wenden Sie eine Formvorlage direkt im Editor an.
Wählen Sie eine Form, legen Sie ihre Farben fest und wählen Sie die Verlaufsrichtung.
Bild als Hintergrund verwenden
Abschnitt betitelt „Bild als Hintergrund verwenden“Wählen Sie Image und klicken Sie dann auf Select Image, um einen eigenen Hintergrund auszuwählen. Der Editor akzeptiert PNG-, JPG- oder SVG-Dateien bis 5 MB. Klicken Sie auf Remove, um den ausgewählten Hintergrund zu entfernen.
Wählen Sie ein Bild, das als Hintergrund eines Text-Badges dienen soll.
Rahmen hinzufügen oder Ecken abrunden
Abschnitt betitelt „Rahmen hinzufügen oder Ecken abrunden“Klappen Sie Border & corners auf. Beide Optionen lassen sich unabhängig voneinander aktivieren:
| Option | Verfügbare Steuerelemente |
|---|---|
| Add border | Legen Sie Border width von 0 bis 8 px fest, wählen Sie eine Border color und wählen Sie Solid, Dotted oder Dashed. |
| Round corners | Legen Sie Corner radius von 0 bis 100 px fest. |
Fügen Sie einen Rahmen hinzu, runden Sie die Ecken ab oder nutzen Sie beide Einstellungen zusammen.
Ein Bild-Badge gestalten
Abschnitt betitelt „Ein Bild-Badge gestalten“Bild-Badges zeigen weder die Steuerelemente für Schriftart und Hintergrund noch Border & corners des Text-Badges. Ändern Sie mit Content oben im Tab Design das Bild des Badges und passen Sie dann mit Advanced settings seine Deckkraft oder Drehung an.
Informationen zu Bildabmessungen und Platzierung finden Sie unter Badge-Größe ändern und Badge-Position ändern.
Deckkraft oder Drehung anpassen
Abschnitt betitelt „Deckkraft oder Drehung anpassen“Diese Effekte sind sowohl für Text-Badges als auch für Bild-Badges verfügbar:
- Klappen Sie Advanced settings auf.
- Aktivieren Sie unter Effects die gewünschte Option.
- Passen Sie den Wert an und beobachten Sie dabei die Live-Vorschau.
| Effekt | Bereich |
|---|---|
| Adjust opacity | 0 % bis 100 % |
| Rotate badge | 0° bis 360° |
Aktivieren Sie Adjust opacity oder Rotate badge und legen Sie dann den Effektwert fest.
Vorschau und Speichern
Abschnitt betitelt „Vorschau und Speichern“Prüfen Sie das Badge in der Vorschau-Symbolleiste auf Collection page und Product page und wechseln Sie dann zwischen Desktop view und Mobile view. Wenn das Badge in jeder benötigten Vorschau richtig aussieht, klicken Sie auf Save.
Nächste Schritte
Abschnitt betitelt „Nächste Schritte“- Badge-Größe ändern – Ändern Sie die Größe des Badges und passen Sie Textgröße oder Buchstabenabstand an.
- Badge-Position ändern – Verschieben Sie das Badge und passen Sie Margin oder Padding an.
- Animation zu einem Badge hinzufügen – Wenden Sie einen Animationseffekt an und legen Sie Geschwindigkeit und Wiederholungen fest.
- Eigenes CSS verwenden – Passen Sie das Badge mit eigenem CSS fein an.