Zum Inhalt springen

Social-Media-Icons

Zeigen Sie Ihre konfigurierten Social-Profile mit flexiblen Stilen, gezielter Netzwerkanzeige und einfachen Sichtbarkeitssteuerungen an.

Dieser Block zeigt Links zu den Social-Profilen an, die in Ihren Theme-Einstellungen bereits eingerichtet sind. Für einen umfassenderen Überblick darüber, wie Theme-Blöcke organisiert sind, siehe Shopify-Dokumentation zu Abschnitten und Blöcken. Verwenden Sie ihn dort, wo Kundinnen und Kunden schnelle Marken-Anknüpfungspunkte erwarten, etwa in einem Header, Footer, einem Kontaktbereich oder in supportorientierten Inhalten.

Die wichtigsten Einstellungen steuern, wie die Social-Links aussehen und welche Netzwerke angezeigt werden.

Wählen Sie einen Icon style basierend auf der Rolle des Blocks in Ihrem Layout. Branded ist auf einen Blick am leichtesten wiederzuerkennen, Solid sorgt für einen saubereren und einheitlicheren visuellen Stil, und Text only eignet sich gut, wenn die Links eher wie Navigation als wie Dekoration wirken sollen.

Standardmäßig zeigt Show all jedes Social-Network an, das in Ihren Theme-Einstellungen konfiguriert wurde. Deaktivieren Sie dies, wenn dieser Block nur ausgewählte Netzwerke anzeigen soll, etwa um einen Header schlank zu halten, während in der Footer ein vollständigerer Satz angezeigt wird.

Wenn Show all deaktiviert ist, können Sie für diesen Block einzelne Netzwerke auswählen. Das ist die beste Option, wenn der Platz begrenzt ist oder wenn verschiedene Bereiche Ihres Shops unterschiedliche Kanäle hervorheben sollen.

Dieser Block zeigt nur Netzwerke an, für die in Ihren Theme-Einstellungen bereits Kontodetails hinzugefügt wurden. Wenn Sie hier ein Netzwerk aktivieren, wird dadurch nicht automatisch der Social-Link erstellt.

Diese Einstellungen ermöglichen es diesem Block, Ihre übergeordneten Theme-Farbwahloptionen bei Bedarf zu überschreiben. Sie sind besonders nützlich, wenn der Block auf einem anderen Hintergrund steht oder mehr Kontrast benötigt als der umgebende Inhalt.

Icon color betrifft nur den Stil Solid, und Text color betrifft nur den Stil Text only. Wenn eine Farbänderung nicht angezeigt wird, prüfen Sie zuerst, ob sie zum ausgewählten Stil passt.

Siehe die gemeinsame Referenz zu den Farbeinstellungen: Company XYZ-Dokumentation zu Farbeinstellungen.

Verwenden Sie die Sichtbarkeitssteuerungen, um festzulegen, ob dieser Block auf dem Desktop, auf Mobilgeräten oder auf beiden angezeigt wird. Das ist hilfreich, wenn Sie Social-Links in einem Layout, aber nicht in einem anderen anzeigen möchten, besonders bei kompakten mobilen Designs.

Blenden Sie den Block nur aus, wenn dieselben Links bereits an anderer Stelle verfügbar sind oder wenn die Platzierung sich wiederholt anfühlt. So bleibt das Layout übersichtlich, ohne dass Ihre Social-Links schwerer zu finden sind.

Siehe die gemeinsame Referenz zu den Sichtbarkeitseinstellungen: Company XYZ-Dokumentation zu Sichtbarkeitseinstellungen.

  1. Passen Sie den Stil an die Platzierung an. Verwenden Sie Branded-Icons für schnelle Wiedererkennung, Solid-Icons für ein aufgeräumteres Erscheinungsbild und Text only für bereichsähnliche Navigation.
  2. Kürzen Sie die Netzwerkliste bei Bedarf. Schalten Sie Show all in engeren Bereichen aus, damit der Block nur die Kanäle hervorhebt, die Kundinnen und Kunden am ehesten nutzen.
  3. Überschreiben Sie Farben mit Absicht. Ändern Sie Icon- oder Textfarben, wenn Sie an einem bestimmten Bereich besseren Kontrast oder klarere Hervorhebung benötigen.
  4. Prüfen Sie zuerst die Kontoeinrichtung. Wenn ein Netzwerk angezeigt werden sollte, es aber nicht erscheint, bestätigen Sie, dass sein Social-Profil bereits in Ihren Theme-Einstellungen hinzugefügt wurde.
  5. Verwenden Sie responsive Sichtbarkeit mit Bedacht. Blenden Sie den Block auf Mobilgeräten oder auf dem Desktop nur aus, wenn eine andere Platzierung denselben Bedarf bereits abdeckt.
  6. Prüfen Sie beide Viewports. Desktop- und Mobilsteuerungen können zu unterschiedlichem Abstand, anderer Ausrichtung, Sichtbarkeit und Medienverhalten führen. Überprüfen Sie daher beide Layouts vor dem Veröffentlichen.