Symbole verwenden

Ausgewählte Links

1. Shopify-Dokumentation zu Abschnitten und Blöcken
2. Material Symbols
3. Company XYZ-Dokumentation zu Farbeinstellungen

Hilfreiche Videos

Shopify Academy-Video: Ihren Store anpassen

Shopify Academy-Video: Ihren Store anpassen

Viele Inhaltsbereiche von Align enthalten ein Icon-Feld, das neben Text oder innerhalb einer Schaltfläche einen visuellen Hinweis ergänzt. Im Shopify Theme-Editor können Sie diese Felder für Überschriften, Fließtext, Hervorhebungen von Vorteilen, Call-to-Action-Elemente und ähnliche Bereiche verwenden.

Eine Übersicht darüber, wo Abschnitts- und Blockeinstellungen in Shopify erscheinen können, finden Sie in der Shopify-Dokumentation zu Abschnitten und Blöcken

Jedes Align-Icon-Feld akzeptiert einen Wert: einen Material-Icon-Slug oder ein Emoji. Lassen Sie das Feld leer, wenn die Darstellung nur Text enthalten soll.

Einen Icon-Slug finden und verwenden

Material-Icon-Slugs sind eine zuverlässige Wahl, wenn Sie in Ihrem Align-Storefront einen einheitlichen Outline-Stil verwenden möchten. Verwenden Sie die Bibliothek Material Symbols, um verfügbare Icons zu finden.

1. Öffnen Sie Material Symbols
2. Suchen Sie nach dem benötigten Symbol.
3. Wählen Sie ein Icon aus den Ergebnissen aus.
4. Kopieren Sie den kleingeschriebenen Slug, z. B. local_shipping, verified oder chevron_right.
5. Fügen Sie den Slug in die entsprechende Align-Icon-Einstellung ein.

Leerzeichen und Bindestriche werden wie Unterstriche behandelt, und die Groß- und Kleinschreibung spielt keine Rolle. Den Slug direkt aus Material Symbols zu kopieren, ist dennoch der zuverlässigste Ansatz.

Tipp

Durchsuchen oder filtern Sie mit dem Stil Outlined im Hinterkopf. Er entspricht der standardmäßigen Darstellung von Align-Icons.

Wenn ein Slug falsch geschrieben oder nicht verfügbar ist, wird das Icon möglicherweise nicht wie erwartet angezeigt.

Stattdessen ein Emoji verwenden

Sie können auch ein einzelnes Emoji in jedes kompatible Align-Icon-Feld einfügen. Dies funktioniert für Inhalts-Icons, Button-Icons, Breadcrumb-Trennzeichen und andere spezielle Icon-Einstellungen.

Ein Emoji hinzufügen

1. Fügen Sie ein Emoji in das Feld ein, z. B. 📦, ✓ oder ⭐.
2. Geben Sie keine Wortgruppe und nicht mehrere Symbole ein.
3. Lassen Sie das Feld leer, wenn Sie kein Icon benötigen.

Den richtigen Stil auswählen

Emojis eignen sich gut für freundliche, informelle oder kampagnenorientierte Nachrichten. Sie können einer einfachen Vertrauens- oder Vorteilszeile auch Persönlichkeit verleihen.

Emojis verwenden ihren nativen Farbstil statt des Outline-Stils von Material-Icons. Lokale Icon color-Einstellungen wirken sich möglicherweise weniger auf Emojis aus. Verwenden Sie sie daher auf derselben Seite mit benannten Icons mit Bedacht.

Tipp

Material-Slugs sind in der Regel die beste Standardeinstellung für einen hochwertigen, einheitlichen Storefront. Wählen Sie Emojis, wenn ein wärmerer oder ausdrucksstärkerer Akzent zur Nachricht passt.

Inhalts-Icons und Button-Icons

Icon-Einstellungen erfüllen im Allgemeinen eine von zwei Funktionen. Beide verwenden dasselbe Eingabeformat, wirken sich aber auf unterschiedliche Teile des Layouts aus.

Inhalts-Icons

• Erscheinen neben oder um eine Überschrift, Beschriftung oder Vorteilszeile.
• Unterstützen die Aussage, anstatt als Hauptaktion zu dienen.
• Werden im Editor üblicherweise als Icon bezeichnet.

Button-Icons

• Erscheinen innerhalb einer Schaltfläche oder einer Aktion im Link-Stil.
• Verstärken die Beschriftung der Schaltfläche oder werden bei Layouts nur mit Icon zur sichtbaren Aktion.
• Werden im Editor üblicherweise als Button icon bezeichnet.

Kombinieren Sie Button-Icons nach Möglichkeit mit Text. Ein Icon sollte verdeutlichen, was als Nächstes geschieht, und nicht der einzige Hinweis sein.

Icons eindeutig positionieren

Einige Inhaltsbereiche enthalten Icon position. Damit wird gesteuert, wie ein Icon im Verhältnis zu angrenzendem Text angeordnet wird.

1. Top platziert das Icon über dem Textstapel und eignet sich für zentrierte oder redaktionelle Layouts.
2. Bottom platziert das Icon unter dem Textstapel, sodass der Text im Vordergrund steht.
3. Left platziert das Icon vor dem Text in einem horizontalen Layout.
4. Right platziert das Icon nach dem Text, sodass Leser zuerst auf den Text treffen.
5. Middle zentriert das Icon als wichtigsten visuellen Anker.

Nebeneinander angeordnete Layouts können auf kleineren Bildschirmen vertikal gestapelt werden. Prüfen Sie die mobile Darstellung, wenn Sie die Positionierung links, rechts oder mittig verwenden.

Das Button-Icon-Layout festlegen

Wenn eine Schaltfläche ein Icon unterstützt, steuert Button layout, wie Icon und Beschriftung gemeinsam angezeigt werden.

1. Icon left platziert das Icon vor dem Button-Text und ist das geläufigste Muster mit Beschriftung.
2. Icon right platziert das Icon nach dem Button-Text und kann sich für Aktionen eignen, die nach vorne führen.
3. Icon only zeigt ein Icon ohne sichtbare Beschriftung an.

Achtung

Schaltflächen nur mit Icon können leicht falsch verstanden werden. Verwenden Sie sie sparsam und nur, wenn das umgebende Layout die Aktion eindeutig macht.

Farbe und Stil anpassen

Icons übernehmen standardmäßig die Icon-Farbe von Align und werden mit ihrem Container skaliert. Einige Bereiche bieten außerdem lokale Steuerelemente für stärkeren Kontrast oder einen markenspezifischen Akzent.

1. Icon color ändert das Icon selbst.
2. Icon border color ist verfügbar, wenn sich ein Icon innerhalb einer Form mit Rahmen befindet.
3. Show icon border ist in einigen Layouts im Stil von Vorteils-Elementen für eine Umrandung ähnlich einem Badge verfügbar.

Weitere Hinweise zu lokalen Farbüberschreibungen finden Sie in den Farbeinstellungen.

Spezielle Icon-Felder verwenden

Die meisten Align-Icon-Felder folgen denselben Regeln, auch wenn ihre Bezeichnungen eine bestimmte Layout-Funktion beschreiben. Fügen Sie einen Material-Slug oder ein Emoji ein oder lassen Sie das Feld leer, um das Icon auszublenden.

1. Separator icon wird zwischen Breadcrumb-Elementen angezeigt, z. B. als Chevron oder Schrägstrich.
2. Home icon zeigt die Startseiten-Verknüpfung in Breadcrumb-Pfaden an.
3. Announcement icon ergänzt neben Nachrichten der Ankündigungsleiste einen kleinen Akzent.
4. Heading icon ergänzt eine Überschrift um einen Inline-Akzent.
5. Draggable icon legt das Symbol im Stil eines Griffs fest, das bei bestimmten interaktiven Steuerelementen verwendet wird.
6. Contact or feature icons ergänzen Inhaltsblöcke um einzelne Akzente, z. B. bei E-Mail-Details oder Vorteils-Hervorhebungen.

Dabei handelt es sich um vom Händler ausgewählte Material-Slugs oder Emojis, nicht um automatische Systemsymbole.

Andere Icon-Typen erkennen

Freie Icon-Felder steuern nicht jedes iconähnliche Element in Align.

1. Social media icons verwenden die in den Theme-Einstellungen konfigurierten URLs der Social-Media-Profile.
2. Payment icons zeigen aktivierte Zahlungsmethoden automatisch an.
3. Navigation utility icons wie Warenkorb, Konto, Suche und Menü sind im Header integriert.

Beispielszenarien

Versand-Hervorhebung

1. Suchen Sie in Material Symbols nach local_shipping.
2. Kopieren Sie den Slug und fügen Sie ihn in ein Icon-Feld neben einer kurzen Nachricht zum kostenlosen Versand ein.
3. Alternativ können Sie 📦 für einen wärmeren, informelleren Akzent verwenden.

Breadcrumb-Trennzeichen

1. Setzen Sie Separator icon auf chevron_right, um zwischen Breadcrumb-Elementen eine kompakte Trennlinie im Outline-Stil anzuzeigen.
2. Alternativ können Sie › oder → als einfacheres, textähnliches Trennzeichen verwenden.

Nutzungshinweise

1. Wählen Sie den Stil bewusst aus. Verwenden Sie Material-Slugs für Einheitlichkeit und Emojis, wenn die native Farbe oder ein ausdrucksstärkerer Ton zur Nachricht passt.
2. Kopieren Sie Slugs aus der Bibliothek. Suchen Sie in Material Symbols und fügen Sie den Slug ein, statt einen Icon-Namen zu erraten.
3. Blenden Sie Icons bewusst aus. Lassen Sie ein Feld leer, wenn ein Symbol keine zusätzliche Bedeutung vermittelt.
4. Halten Sie zusammengehörige Inhalte einheitlich. Verwenden Sie auf einer Seite wiederholt Slugs im Outline-Stil oder Emojis, damit die Darstellung koordiniert wirkt.
5. Prüfen Sie Kontrast und mobile Layouts. Überprüfen Sie Icons auf hellen und dunklen Hintergründen, insbesondere bei benutzerdefinierten Farben oder Hintergrundmedien, und stellen Sie sicher, dass die Positionierung auf kleineren Bildschirmen weiterhin funktioniert.