Badge-Position ändern

Mit dem Bereich Position platzieren Sie ein Text- oder Bild-Badge über dem Produktbild, unter einem Element der Produktseite oder neben einem eigenen Theme-Element.

Bereich „Position“ öffnen

1. Badges & Labels öffnen

   Öffnen Sie im Shopify Admin Sami Product Labels > Badges & Labels.

2. Badge erstellen oder auswählen

   Um ein Badge zu erstellen, klicken Sie auf Create badge und wählen Sie dann Text badge oder Image badge.

   Um ein vorhandenes Badge zu aktualisieren, klicken Sie in der Zeile des Badges auf Edit badge/label.

3. Position aufklappen

   Bleiben Sie im Badge-Editor im Tab Design, scrollen Sie zu Position und klappen Sie den Bereich auf.

   

   Öffnen Sie den Tab Design und klappen Sie Position auf.

Badge innerhalb des Produktbilds platzieren

Wählen Sie Inside product image, wenn das Badge über dem Produktbild liegen soll.

Festlegen, wo die Einstellung gilt

Wählen Sie unter Badge placement einen dieser Modi:

• Use the same position for collection page and product page – Eine Position gilt für beide Seitentypen.
• Set different position for collection page and product page – Konfigurieren Sie die Positionen über die Tabs Listing pages und Product page getrennt.

Hinweis

Im aktuellen Editor heißt der erste Tab für die seitenspezifische Einstellung Listing pages, nicht Collection page.

Verwenden Sie eine Position innerhalb des Bilds überall oder konfigurieren Sie Listing pages und Product page getrennt.

Voreingestellte Position wählen

Wählen Sie unter Badge position einen der neun Punkte im Positionsraster.

Position	Platzierung auf dem Bild
Top left	Obere linke Ecke
Top center	Mitte der oberen Kante
Top right	Obere rechte Ecke
Center left	Mitte der linken Kante
Center	Mitte des Bilds
Center right	Mitte der rechten Kante
Bottom left	Untere linke Ecke
Bottom center	Mitte der unteren Kante
Bottom right	Untere rechte Ecke

Wählen Sie eine von neun voreingestellten Positionen innerhalb des Produktbilds.

Eigene Position in Prozent festlegen

Aktivieren Sie Use Custom Position, wenn die neun Voreinstellungen nicht präzise genug sind. Der Editor ersetzt das Raster durch:

• Einen vertikalen Anker: Top oder Bottom.
• Einen horizontalen Anker: Left oder Right.
• Einen Prozent-Schieberegler für den Versatz von jedem gewählten Anker.

Wechseln Sie mit den Schaltflächen zum Ändern der Position die Anker und passen Sie dann die Schieberegler an, während Sie die Vorschau beobachten.

Wählen Sie den vertikalen und den horizontalen Anker und legen Sie dann deren prozentuale Versätze fest.

Badge außerhalb des Produktbilds platzieren

Wählen Sie Outside product image, wenn das Badge neben den Produktinformationen erscheinen soll, statt das Bild zu überlagern.

Öffnen Sie Predefined position und wählen Sie eine dieser Optionen:

Option	Platzierung auf der Produktseite
Below the product image	Direkt unter dem Produktbild
Below the product title	Direkt unter dem Produkttitel
Below the product price	Direkt unter dem Produktpreis
Below the product quantity	Direkt unter dem Mengenfeld
Below the add to cart button	Direkt unter der Schaltfläche „In den Warenkorb“
Below the buy now button	Direkt unter der Schaltfläche „Jetzt kaufen“
Custom	Neben einem Element, das über eine ID oder Klasse in Ihrem Theme identifiziert wird

Wählen Sie unter Badge position linke, mittige oder rechte Ausrichtung für das Badge.

Wählen Sie ein Element der Produktseite und richten Sie das Badge dann links, mittig oder rechts aus.

Badge mit einem Theme-Selektor platzieren

Wählen Sie unter Predefined position die Option Custom, um ein Element aus Ihrem Theme anzusteuern. Geben Sie in jedem benötigten Feld die passende ID oder Klasse ein:

Feld	Seitentyp
Position in product page	Produktseiten
Position in home page	Startseite
Position in collection page	Kollektionsseiten
Position in other page	Andere Seitentypen

Geben Sie zum Beispiel .product-form für eine Klasse oder #ProductInfo für eine ID ein. Tragen Sie für jeden Seitentyp, bei dem das Badge diese eigene Platzierung braucht, einen Wert ein.

Achtung

IDs und Klassen unterscheiden sich je nach Theme. Untersuchen Sie das Theme Ihres Onlineshops, um einen stabilen Selektor zu finden, und prüfen Sie das Ergebnis auf jedem Seitentyp, auf dem das Badge erscheinen soll.

Geben Sie für jeden Seitentyp, der eine eigene Badge-Position braucht, die Theme-ID oder -Klasse ein.

Margin und Padding anpassen

Klappen Sie Margin auf, um den Außenabstand in Pixeln zu ändern. Der Editor zeigt die Seiten, die für die gewählte Position relevant sind.

Klappen Sie Padding auf, um den Abstand zwischen dem Badge-Inhalt und seinen Rändern zu ändern. Sie können die Werte für oben, unten, links und rechts unabhängig voneinander festlegen.

Passen Sie das Badge mit Margin- und Padding-Werten in Pixeln fein an.

Vorschau und Speichern

Prüfen Sie mit den Vorschau-Steuerelementen Collection page und Product page und wechseln Sie dann zwischen Desktop view und Mobile view. Wenn das Badge an der gewünschten Stelle erscheint, klicken Sie auf Save.

Nächste Schritte

• Badge-Größe ändern – Passen Sie die Größe des Badges für verschiedene Viewports und Seitentypen an.
• Badge-Stil ändern – Passen Sie Schriftarten, Farben, Rahmen und Hintergründe an.
• Nach Gerät und Seite anzeigen – Legen Sie fest, auf welchen Geräten und Seiten das Badge angezeigt wird.

Tipp

Brauchen Sie Hilfe?

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