Highlight erstellen

Ein Highlight-Block ist ein Raster aus Feature-Elementen – jeweils mit Bild, Titel und Beschreibung –, das Sie auf Ihren Produktseiten platzieren, um Vorteile und Verkaufsargumente hervorzuheben. Der Editor hat zwei Tabs: Design (Inhalt und Gestaltung) und Placement (wo und für wen er erscheint).

1. Tab „Highlights“ öffnen

   Öffnen Sie in Ihrem Shopify Admin die App Sami Product Labels, klicken Sie in der App-Seitenleiste auf Extra Features und wechseln Sie dann zum Tab Highlights.

   

   Der Tab „Highlights“ listet jeden Highlight-Block auf, den Sie erstellt haben.

2. Auf „Create highlights“ klicken

   Klicken Sie auf Create highlights. Der Vollbild-Editor öffnet sich im Tab Design.

   Hinweis

   Scrollen Sie zu Featured templates und klicken Sie auf View all templates, um mit einem fertigen Block wie Free Delivery zu starten, statt einen von Grund auf zu erstellen.

   

   Erstellen Sie ein Highlight von Grund auf oder starten Sie mit einer Featured-Vorlage.

3. Highlight benennen

   Das Namensfeld befindet sich über der Vorschau. Ersetzen Sie New Highlight durch einen Namen mit bis zu 50 Zeichen. Dieser Name ist intern – er identifiziert den Block in Ihrer Liste und wird der Kundschaft nicht angezeigt.

4. Überschrift und Beschreibung hinzufügen

   Füllen Sie unter Content & Badges die Felder Title und Description aus – sie bilden die Überschrift und den Einleitungstext für den gesamten Block, zum Beispiel „Why Choose Us“. Beide sind Rich-Text-Editoren mit Fett, Kursiv, Unterstreichung, Emoji, Ausrichtung und einer HTML-Ansicht (</>), und beide gelten pro Sprache, sodass die Beschriftung die aktive Sprache zeigt, zum Beispiel Title (en).

   Beide sind optional; lassen Sie sie leer, um nur die Elemente anzuzeigen.

   

   Überschrift und Beschreibung des Blocks sind Rich-Text-Felder, die pro Sprache bearbeitet werden.

5. Highlight-Elemente hinzufügen

   Klicken Sie unter Badges auf Add highlight und wählen Sie dann:

   Option	Was sie bewirkt
   Select badge image	Öffnet die Bildauswahl, um ein oder mehrere Elemente hinzuzufügen.
   Line break	Fügt einen Umbruch ein, sodass die folgenden Elemente in einer neuen Zeile beginnen.

   In der Auswahl enthält die Library mehr als 1.800 Bilder. Suchen Sie nach dem Namen oder grenzen Sie die Liste mit den Filtern Images, Free Labels, All colors und Latest ein (Clear setzt sie zurück). Klicken Sie auf die gewünschten Bilder und dann auf Select Image. Sie können die Quelle auch auf Design your Images umstellen, um Ihre eigenen Bilder zu verwenden, oder auf Edit with AI klicken, um das ausgewählte Bild zu ändern.

   

   Filtern oder durchsuchen Sie die Bibliothek und wählen Sie dann die Bilder für Ihre Highlight-Elemente aus.

6. Titel und Beschreibung für jedes Element schreiben

   Jedes Element erscheint als Zeile in der Liste Badges. Klicken Sie auf das Zahnradsymbol einer Zeile, um ihren Bereich zu öffnen. Dort können Sie festlegen:

   • Image – Klicken Sie auf Change, um es gegen ein anderes auszutauschen.
   • Title – die kurze Überschrift für dieses Feature, pro Sprache.
   • Description – bis zu 250 Zeichen, pro Sprache.

   Mit Delete im Bereich entfernen Sie das Element, und mit dem Ziehen einer Zeile am Griff ändern Sie die Reihenfolge im Raster.

   

   Jedes Element erhält sein eigenes Bild, seinen eigenen Titel und seine eigene Beschreibung.

7. Raster und Block gestalten

   Öffnen Sie Design Main Section, um den Block als Ganzes zu steuern:

   Einstellung	Was sie bewirkt
   Alignment	Links, zentriert oder rechts.
   Column	Wie viele Elemente pro Zeile erscheinen.
   Width	Die Blockbreite in % oder px.
   Background Heading Color	Hintergrund hinter Überschrift und Beschreibung.
   Background Color	Hintergrund des Elementbereichs.
   Margin / Padding	Abstand außerhalb und innerhalb des Blocks.
   Border & corners	Rahmenstil, Farbe und Eckenradius.

   

   „Design Main Section“ steuert das Raster und den Block-Container.

8. Highlight-Elemente gestalten

   Öffnen Sie Design Badge, um die Elemente selbst zu gestalten:

   Einstellung	Was sie bewirkt
   Alignment	Wie der Inhalt jedes Elements ausgerichtet wird.
   Style	Vier Bildstile: einfarbig, einfarbig auf einer Karte, Originalfarbe und Originalfarbe auf einer Karte.
   Background Color	Hintergrund jedes Elements.
   Size	Width und Height des Bilds in px oder % (standardmäßig 50 px).
   Positions	Wo das Bild relativ zum Text sitzt, zum Beispiel Image Position Top.
   Margin / Padding / Border & corners	Abstand und Rahmen für jedes Element.
   Title / Description	Schriftart, Farbe, Größe und Zeilenhöhe für den Elementtext.

   

   „Design Badge“ gestaltet die einzelnen Highlight-Elemente.

9. Überschrift des Blocks gestalten (optional)

   Öffnen Sie Design title & description. Design Title und Design Description haben jeweils eigene Einstellungen für Schriftart, Farbe, Größe und Zeilenhöhe der Überschrift und des Einleitungstexts auf Blockebene.

10. Responsive Größen und eigenes CSS festlegen (optional)

    • Responsive size – Überschreiben Sie die Größen für Tablet und Mobilgerät.
    • Advance Section – Fügen Sie Custom CSS (Developer Zone) hinzu. Die CSS reference unter dem Editor listet die Selektoren auf, die Sie ansprechen können, zum Beispiel .samita_highlight_container; klicken Sie auf einen, um ihn einzufügen.

    

    Die CSS-Referenz listet die für eigene Gestaltung verfügbaren Selektoren auf.

11. Festlegen, wo das Highlight erscheint

    Wechseln Sie zum Tab Placement:

    • Product page – Aktivieren Sie diese Option, um den Block auf jeder Produktseite an der integrierten Position der App anzuzeigen.
    • Shortcode – Kopieren Sie das Snippet und fügen Sie es in Ihr Theme ein, um den Block an einer genauen Position zu platzieren.
    • Conditions – Bedingungen für Product, Customer, Page, Language und Country grenzen ein, wer den Block wo sieht.

    Hinweis

    Wie die Bedingungssätze funktionieren, erfahren Sie unter Highlight-Anzeige targetieren.

    

    Der Tab „Placement“ kombiniert Anzeigebedingungen, den Schalter für die Produktseite und den Shortcode.

12. Vorschau ansehen und speichern

    Über der Vorschau können Sie die Sprache wechseln, die Seite für die Vorschau auswählen, zwischen Desktop / Mobil umschalten und das Beispielprodukt mit dem Augensymbol ausblenden. Stellen Sie den Block auf Active oder Draft und klicken Sie dann oben rechts auf Save. Mit Discard verwerfen Sie nicht gespeicherte Änderungen.

Hinweis

Der Tarif FREE enthält 2 Highlights, und gelöschte zählen weiterhin zu diesem Limit. Wechseln Sie zu GOLD oder DIAMOND für unbegrenzte Highlights.

Nächste Schritte

• Highlight per Shortcode platzieren – Positionieren Sie den Block an einer beliebigen Stelle in Ihrem Theme.
• Highlight-Anzeige targetieren – Steuern Sie, welche Seiten und welche Kundschaft Ihre Highlights sehen.
• Highlights im Überblick – Was Highlights sind und wann Sie sie einsetzen.
• Trust-Badge erstellen – Fügen Sie Ihren Produktseiten Zahlungs- und Sicherheitssymbole hinzu.

Tipp

Brauchen Sie Hilfe?

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