Badge-Größe ändern

Mit dem Bereich Size im Badge-Editor ändern Sie die Größe eines Badges überall oder legen für jedes Gerät und jeden Seitentyp eine eigene Größe fest.

Bereich „Size“ öffnen

1. Badges & Labels öffnen

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

2. Badge auswählen

   Suchen Sie das Badge, dessen Größe Sie ändern möchten, und klicken Sie in seiner Zeile auf Edit badge/label.

   Um stattdessen die Größe eines neuen Badges festzulegen, klicken Sie auf Create badge und wählen Sie Text badge oder Image badge.

3. Size aufklappen

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

   

   Öffnen Sie ein Badge, bleiben Sie im Tab Design und klappen Sie Size auf.

Eine Größe für Desktop und Mobilgeräte verwenden

Lassen Sie unter Responsive size die Option Use same size on desktop and mobile ausgewählt, wenn das Badge auf jedem Gerät und in jeder unterstützten Seitenvorschau dieselben Abmessungen haben soll.

• Bei einem Text-Badge legen Sie Width und Height getrennt fest.
• Bei einem Bild-Badge mit aktivierter Option Lock aspect ratio verwenden Sie den Schieberegler Size oder das Feld Width. Die Höhe passt sich automatisch an, damit die Bildproportionen erhalten bleiben.

Verwenden Sie einen Satz Abmessungen für Desktop und Mobilgeräte.

Jedes Gerät und jeden Seitentyp anpassen

Wählen Sie Customize desktop and mobile separately, wenn das Badge in verschiedenen Kontexten unterschiedliche Abmessungen braucht.

1. Wählen Sie Desktop oder Mobile.
2. Wählen Sie Product page size oder Listing pages size.
3. Legen Sie die Abmessungen für diese Kombination fest.
4. Wiederholen Sie dies bei Bedarf für die anderen Kombinationen aus Gerät und Seite.

Auswahl	Wo die Größe gilt
Desktop > Product page size	Produktseiten auf dem Desktop
Desktop > Listing pages size	Listing-Seiten, einschließlich Kollektionsseiten, auf dem Desktop
Mobile > Product page size	Produktseiten auf Mobilgeräten
Mobile > Listing pages size	Listing-Seiten, einschließlich Kollektionsseiten, auf Mobilgeräten

Hinweis

Der Editor verwendet die Bezeichnung Listing pages size. Nutzen Sie diesen Tab für Vorschauen von Kollektionsseiten und anderen Produktlisten.

Wählen Sie ein Gerät und einen Seitentyp und legen Sie dann die Größe für diese Kombination fest.

Größeneinheit wählen

Jede Abmessung kann eine dieser Einheiten verwenden:

Einheit	Verwenden, wenn
px	Sie eine exakte Abmessung in Pixeln brauchen.
%	das Badge relativ zum verfügbaren Bereich des Produktbilds skalieren soll. Prüfen Sie das Ergebnis in der Vorschau für jeden Seitentyp und jedes Gerät.

Bei einem Text-Badge haben Width und Height jeweils eine eigene Einheitenauswahl. Sie müssen nicht dieselbe Einheit verwenden.

Größe eines Text-Badges anpassen

Text-Badges bieten unter Width und Height zusätzliche Steuerelemente:

• Auto-fit text to badge aus – Legen Sie Text size als feste Schriftgröße in Pixeln fest.
• Auto-fit text to badge an – Die App passt die Textgröße automatisch an den Badge-Hintergrund an, und Text size wird zu einem Prozentregler.
• Letter spacing – Vergrößern oder verkleinern Sie den Abstand zwischen den Zeichen in Pixeln.

Hinweis

Aktivieren Sie Auto-fit text to badge, wenn sich die Länge des Badge-Texts ändern kann, etwa bei Text mit {inventory} oder einer anderen dynamischen Variable.

Aktivieren Sie Auto-fit text to badge, damit sich ändernder Text im Badge-Hintergrund bleibt.

Proportionen eines Bild-Badges beibehalten oder ändern

Bei Bild-Badges ist Lock aspect ratio standardmäßig aktiviert.

• Lassen Sie die Option aktiviert, um das Bild mit einem Regler Size oder Width zu skalieren und dabei die ursprünglichen Proportionen beizubehalten.
• Deaktivieren Sie sie nur, wenn Sie Width und Height unabhängig voneinander festlegen müssen. Bei einem anderen Seitenverhältnis kann das Bild gestreckt oder gestaucht werden.

Lassen Sie Lock aspect ratio aktiviert, um die Größe eines Bild-Badges ohne Verzerrung zu ändern.

Vorschau und Speichern

Wechseln Sie in der Vorschau-Symbolleiste zwischen Product page und Collection page und prüfen Sie dann Desktop view und Mobile view. Wenn das Badge in jeder benötigten Vorschau richtig aussieht, klicken Sie auf Save.

Achtung

Wenn Sie getrennte responsive Größen verwenden, sehen Sie sich vor dem Speichern alle vier Kombinationen aus Gerät und Seite in der Vorschau an.

Nächste Schritte

• Badge-Position ändern – Platzieren Sie Ihr Badge an der richtigen Stelle auf Produktbildern oder Seitenelementen.
• Badge-Stil ändern – Passen Sie Schriftarten, Farben, Rahmen und visuelle Effekte an.

Tipp

Brauchen Sie Hilfe?

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