איך להוסיף כפתור ווצאפ לחנות שופיפיי?

שיפור התקשורת עם הלקוחות שלך הוא חלק חשוב מהצלחת החנות המקוונת. אחת הדרכים היעילות לעשות זאת היא על ידי הוספת כפתור ווצאפ לחנות Shopify שלך. במאמר הזה נסביר איך אפשר לעשות את זה בשני דרכים פשוטות: שימוש באפליקציה או הוספת קוד באופן ידני.

💬 שימוש באפליקציה

הדרך הפשוטה והמהירה ביותר להוסיף כפתור ווצאפ היא באמצעות אפליקציה מחנות האפליקציות של Shopify. אפליקציות כמו WhatsApp Chat + Abandoned Cart או WhatsApp Chat Button מאפשרות לך להוסיף כפתור ווצאפ מותאם אישית בתוך דקות, בלי צורך להתעסק עם קוד. פשוט התקן את האפליקציה, בצע את ההגדרות הבסיסיות, וכפתור הווצאפ יהיה מוכן לשימוש בחנות שלך.

💻 הוספת קוד באופן ידני 

אני ממליץ להשתמש בקוד הזה רק אם יש לכם ידע מקדים בקוד אם שאתם בוגרי הקורס.

למי שמעדיף גישה מותאמת אישית יותר, ניתן להוסיף את כפתור הווצאפ גם באמצעות קוד HTML, CSS ו-JavaScript. כך תוכל לעשות זאת:

{% assign whatsappNumber = "972xxxxxxxxx" %}
{% assign Message = "שלום, אני צריך עזרה!" %}
{% assign buttonPosition = "right" %}
{% assign buttonColor = "#25d366" %}
{% assign closeButtonColor = "black" %}
{% assign ctaText = "שלחו לנו הודעה ב-WhatsApp" %}
    {% assign marginBottom = "1.25em" %}
    {% assign marginLeft = "1.25em" %}
    {% assign marginRight = "1.25em" %}
    {% assign cornerRadius = "2.5em" %}
    {% assign zIndex = "999999" %}
    {% assign showCloseButton = true %}  {# Set this to false to hide the close button #}

    {% if buttonPosition == "left" %}
      {% assign positionStyle = "left: 0;" %}
    {% else %}
      {% assign positionStyle = "right: 0;" %}
    {% endif %}

    <style>
      .whatsapp-button-container {
        position: fixed;
        bottom: {{ marginBottom }};
        {{ positionStyle }}
        margin: 0 {{ marginLeft }} {{ marginRight }};
        z-index: {{ zIndex }};
        cursor: pointer;
      }

      .whatsapp-button {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.625em;
        background-color: {{ buttonColor }};
        border-radius: {{ cornerRadius }};
        text-decoration: none;
        font-weight: bold;
        color: #FFFFFF;
      }

      .whatsapp-button img {
        height: 2em;
        width: auto;
        margin-right: 0.3125em;
      }

      .close-button {
        position: absolute;
        top: -0.625em;
        right: -0.625em;
        display: {{ showCloseButton | default: true | append: "none" }};
        background-color: red;
        color: white;
        width: 1.25em;
        height: 1.25em;
        border-radius: 50%;
        text-align: center;
        line-height: 1.25em;
        font-weight: bold;
        cursor: pointer;
      }
    </style>
    <script>
      function hideWhatsAppButton() {
        document.querySelector('.whatsapp-button-container').style.display = 'none';
      }

      // Wait for the DOM to load
      document.addEventListener('DOMContentLoaded', function() {
        // Add click event listener to the close button
        document.querySelector('.close-button').addEventListener('click', hideWhatsAppButton);
      });
    </script>
    <div class="whatsapp-button-container">

    <a class="whatsapp-button" href="https://api.whatsapp.com/send?phone={{ whatsappNumber }}&text={{ Message | url_encode }}"> <img src="https://meetanshi.com/blog/wp-content/uploads/2023/08/whatsapp-logo-example.png" alt="WhatsApp Logo" />   {{ ctaText }}  </a> {% if showCloseButton %}
    <div class="close-button">×</div>
    {% endif %}

    </div>

🔗 סיכום

הוספת כפתור ווצאפ לחנות שלך ב-Shopify יכולה לשפר משמעותית את התקשורת עם הלקוחות. בין אם תבחר להשתמש באפליקציה מוכנה או להוסיף את הקוד באופן ידני, כפתור הווצאפ יאפשר ללקוחות לפנות אליך בקלות ובמהירות. אם אתה מעוניין בעיצוב מותאם אישית או בגישה טכנית יותר, ההוספה בקוד היא הדרך הטובה ביותר להשיג זאת.

רוצים לדעת עוד על Shopify?
למעבר לדף כל השאלות על Shopify לחצו כאן.

🌟 קישורים למידע נוסף להעשרה במיוחד בשבילך

מעוניינים ללמוד עוד על שופיפיי ולשאול שאלות? הצטרפו ל- קבוצת הווצאפ שלנו שאלו שאלות ושתפו את הידע שלכם עם קהילה תומכת ומלמדת.

רוצים להעמיק את הידע שלכם ב-Shopify? אנו ממליצים להירשם לקורס המתקדמים שלנו ולבקר בדף השאלות הנפוצות על Shopify לקבלת מידע נוסף.