Button im Header hinzufügen

[Print-Flower]

Hallo,

ich möchte gerne ein Button - Für Kontaktformular - im Header hinzufügen. Also neben Kundenkonto und Warenkorb. Ich habe mir ein Kontaktformular auf einer Webseite (elfsight)  erstellt und zur Implementierung einen HTML-Code erhalten. Bekomme es aber leider nicht hin wie oben beschrieben. Ich benutze das Theme Sense. Hierbei benötige ich eure Hilfe.

Im Voraus vielen lieben Dank für eure Hilfe.

Grüße

Carsten

[Gabe]

Hey Carten! @Print-Flower 

Um einen Button für ein Kontaktformular im Header deines "Sense" Themes hinzuzufügen, musst du den Liquid-Code von Shopify anpassen.

Wenn du es selber in deinem Header programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

Liquid-Code bearbeiten

1. Gehe in deinen Shopify Admin-Bereich unter Online-Shop -> Themes -> Aktionen und dann auf Code bearbeiten.
2. Im linken Menü solltest du eine Datei namens header.liquid oder theme.liquid sehen. Öffne diese Datei.
3. Suche in der Datei nach den HTML-Elementen oder Liquid-Tags, die den Bereich für das Kundenkonto und den Warenkorb repräsentieren.
4. Füge direkt neben diesen Elementen deinen HTML-Code für das Kontaktformular von Elfsight ein. Es sollte in etwa so aussehen:

<a href="#" class="deinButtonClass" onclick="DEIN_ELF_SIGHT_SCRIPT">Kontaktformular</a>

Ersetze DEIN_ELF_SIGHT_SCRIPT durch den von Elfsight bereitgestellten JavaScript-Aufruf oder Code, und deinButtonClass durch eine passende CSS-Klasse, um den Button zu stylen.

6. Wenn du eine separate CSS-Klasse für den Button hinzufügst, musst du möglicherweise auch die CSS-Datei deines Themes (oft theme.scss.liquid oder styles.scss.liquid genannt) bearbeiten, um den Button entsprechend zu stylen.
   
   

Änderungen überprüfen

Nachdem du den Code eingefügt und gespeichert hast, solltest du deinen Shop besuchen und sicherstellen, dass der Button korrekt angezeigt wird und das Kontaktformular von Elfsight ordnungsgemäß funktioniert, wenn darauf geklickt wird.

Wenn du Schwierigkeiten hast oder sich nicht sicher bist, wie du den Code genau anpassen sollst, kann es hilfreich sein, einen Shopify-Experten oder Webentwickler um Hilfe zu bitten. Es ist immer besser, vorsichtig zu sein, insbesondere wenn du Änderungen am Code deines Live-Shops vornimmst.