Whatsapp Button auf Artikelseite

[MichaelPet]

Hallo,

ich möchte gerne einen Button auf der Artikelseite unter dem "in den Warenkorb legen" Button einfügen. Das Design soll dem "in den Warenkorb legen" Button gleichen, nur die Farbe soll grün sein. Dazu soll automatisch der Whatsapp Nachricht der Artikelname und ein Text hinzugefügt werden. Den Code dazu habe ich schon gefunden, ich weiß nur nicht an welcher Stelle ich den Code genau einfügen soll und wie ich den Button vom Design her erstellen kann.

www.home-online.shop

vg

Michael

[Gabe]

Hey Michael! @MichaelPet 

Danke aber es ist nicht ganz klar was du meinst. Hast du vieleicht ein Mockup oder Beispiel dessen was du erreichen möchtest?

Wenn dir die verschiedenen WhatsApp Apps nicht passen, dann wäre ein Code für das Produkt Liquid dafür notwendig und könnte das folgende sein um den Button zu erstellen:

<!-- WhatsApp Button -->
<button id="whatsapp-button" class="btn btn--secondary">Jetzt via WhatsApp anfragen</button>

Das CSS um den Button zu stylen:

#whatsapp-button {
    background-color: green;
    border-color: green;
    color: white;
    padding: 15px 30px;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    margin-top: 10px;
}

#whatsapp-button:hover {
    background-color: darkgreen;
    border-color: darkgreen;
}

JavaScript, um die WhatsApp-Nachricht zu generieren, in eine separate JavaScript-Datei im Theme Code:

<script>
document.getElementById('whatsapp-button').onclick = function() {
    var productName = document.querySelector('.product-single__title').innerText;
    var whatsappMessage = "Ich interessiere mich für den Artikel: " + productName + ".";
    var whatsappUrl = "https://wa.me/?text=" + encodeURIComponent(whatsappMessage);
    window.open(whatsappUrl, '_blank');
};
</script>

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

---
Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

[MichaelPet]

Hallo , danke für deine Antwort. Habe mal einen Button an die Stelle gezeichnet, wo ich ihn gerne haben möchte. Ich habe einige Apps mir angeschaut, leider wird dort nur ein Button unten rechts oder links angeboten. Ich hätte aber gerne einen Button auf den Artikelseiten und einen im Footer.

Gibt es eine App die das kann?

Da ich keine Programmierkenntnisse habe, weiß ich nicht wo die einzelnen Codes eingefügt werden müssen, damit der Button hinterher an der richtigen Stelle angezeigt wird.

vg

Michael

[MichaelPet]

Hey @Gabe kannst du bitte einmal schauen ob du mir weiterhelfen kannst...

vg

mIchael