Social Icons an anderer Stelle anzeigen

[Alex358]

Hi zusammen,

ich nutze das Taste Theme und würde gerne meine Social Icons + Link an anderen Stellen einbinden. Ist das möglich und hat das schon Jemand gemacht?

Danke euch :).

[Gabe]

Hey @Alex358 

Danke für die Frage und um die Social Media Icons woanders anzuzeigen wird Code Änderungen verlangen je nachdem wo du sie anzeigen möchtest. Code Änderungen können aber 1) deine Page Loading Speeds negativ beeinflussen und 2) dein Taste Theme ggf. aus den Theme Updates ausschließen.

DIY

Aber wenn das das trotzdem selber machen möchtest und dich bereit fühlst im Liquid Code zu basteln, dann gebe ich hier das Beispiel die Icons in der Header Bar einzupflegen im Code da du nicht angegeben hast wo genau du die Icons anzeigen möchtest.

Folgendes empfehle ich in einer kopie deines Themes als Testumgebung vorher zu testen -> Theme -> Aktionen -> Duplizieren -> Code bearbeiten.

Gehe da in deinen footer.liquid und suche nach einem Codeabschnitt, der Links zu deinen Social-Media-Profilen enthält. Er könnte ähnlich wie folgt aussehen:

<ul class="social-icons">
  <li><a href="#" class="icon-facebook"></a></li>
  <li><a href="#" class="icon-twitter"></a></li>
  <li><a href="#" class="icon-instagram"></a></li>
</ul>

Wenn du den Code für die Social Media Icons gefunden hast, kopiere ihn und füge ihn in einen Texteditor ein, um ihn aufzubewahren. Der Header-Code befindet sich normalerweise in der Datei header.liquid des Themes. Suche nach einem Codeabschnitt, der den Kopfbereich deiner Website definiert. Suche eine geeignete Stelle im Header-Code, an der du die Social-Media-Symbole anzeigen möchtest. Füge dann den Code ein, den du in Schritt 3 kopiert hast. Er könnte etwa so aussehen:

<header>
  ...
  <div class="header-right">
    <ul class="social-icons">
      <li><a href="#" class="icon-facebook"></a></li>
      <li><a href="#" class="icon-twitter"></a></li>
      <li><a href="#" class="icon-instagram"></a></li>
    </ul>
  </div>
  ...
</header>

Nachdem du deine Änderungen vorgenommen hast, musst du die Datei speichern und prüfen, ob die Änderungen geklappt haben, was nicht gesagt ist, denn Code ist eine komplexe Sache 💪 .

Je nach den Besonderheiten deines Themes können die oben beschriebenen Schritte leicht variieren. Wenn du dich mit Änderungen am Theme-Code nicht auskennst, solltest du die Hilfe eines Shopify-Experten oder eines professionellen Webentwicklers in Anspruch nehmen.

Gerne kann ich welche empfehlen! 😉

[Alex358]

Hey Gabe. Super, vielen Dank dafür. Das probiere ich aus. Einfügen wollte ich das ganze eigtl. in ein "Rich Text Element", was ja aber nicht geht. Meine Lösung wäre deswegen gewesen ein Custom Liquid direkt nach dem Text Element anzulegen; Falls das gehen sollte.

2) dein Taste Theme ggf. aus den Theme Updates ausschließen -> Wie genau äußert sich das? Kann ich dann manuel updaten und die Code Änderungen wieder überschreiben? Danke 🙂

[Gabe · Accepted solution]

Hey @Alex358 

Ja, der RTE übernimmt nur Fett, Kursiv und Hyperlink als HTML Elemente. Der Custom HTML übernimmt alles und da wäre es gar kein Problem die social icons einzufügen.

Um die icons im benutzerdefinierten HTML-Abschnitt zu platzieren, siehe folgende Schritte:

1. Die Symbole mit einer Grafikbearbeitungssoftware wie Adobe Illustrator oder Canva erstellen.

2. Die Symbole zum Dateien bereich in Shopify hochladen und die CDN Links holen.

3. Erstelle den HTML-Code für jedes Social-Media-Symbol. Der Code sollte den URL-Link zu jedem Symbol und den Link zum Social-Media-Profil enthalten. Zum Beispiel kann für ein Facebook-Symbol der Code wie folgt aussehen:

<a href="https://www.facebook.com/yourprofile">
  <img src="https://www.example.com/facebook-icon.png" alt="Facebook">
</a>

5. Füge den HTML-Code für jedes icon zum benutzerdefinierten HTML-Abschnitt hinzu und speichern.

Schönes W-Ende noch! 😉