הוספת קוד של לחצן קנייה ל-HTML

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

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

הוספת קוד הטמעה ל-WordPress

באפשרותך להוסיף קוד הטמעה לפוסטים, לדפים או לתבניות באתר ה-WordPress שלך.

הוספת קוד הטמעה לפוסט או לדף ב-WordPress

1. ב-Shopify, צור לחצן קנייה והעתק את קוד ההטמעה שלו מתיבת הדו-שיח קוד הטמעה (או לחץ על העתקת קוד ההטמעה ללוח).
2. בלוח המחוונים של WordPress, עבור אל הפוסטים או אל הדפים שלך.
3. צור פוסט או דף חדש, או ערוך אחד קיים.
4. בתוך עורך הבלוקים, לחץ על הלחצן +, חפש את הערך Custom HTML, ולאחר מכן לחץ כדי להוסיף בלוק מסוג Custom HTML.
5. הדבק את קוד ההטמעה בשדה הטקסט שמסופק על ידי בלוק ה-Custom HTML.
6. אופציונלי: הזז את בלוק ה-Custom HTML או הצג תצוגה מקדימה של האופן שבו לחצן הקנייה שלך יוצג:
   • כדי להזיז את בלוק ה-Custom HTML, לחץ על לחצני החיצים בסרגל הכלים של הבלוק, או גרור את הבלוק למיקום חדש.
   • כדי להציג תצוגה מקדימה של לחצן הקנייה, לחץ על תצוגה מקדימה בסרגל הכלים של הבלוק.
7. בסיום, לחץ על הלחצן שמירת טיוטה, תצוגה מקדימה או פרסום עבור הפוסט או הדף שלך.

אם אתה משתמש ב-Classic Editor Plugin של WordPress, במקום להשתמש בבלוק Custom HTML, שנה את מצב עורך הטקסט מ-Visual ל-Text והדבק את קוד ההטמעה בעורך.

הוספת קוד הטמעה לתבנית WordPress

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

שלבים:

1. ב-Shopify, צור לחצן קנייה והעתק את קוד ההטמעה שלו מתיבת הדו-שיח קוד הטמעה (או לחץ על העתקת קוד ההטמעה ללוח).
2. בלוח המחוונים של WordPress, עבור אל העורך.
3. נווט אל התבנית שברצונך לערוך.
4. בתוך עורך הבלוקים, לחץ על הלחצן +, חפש את הערך Custom HTML, ולאחר מכן לחץ כדי להוסיף בלוק מסוג Custom HTML.
5. הדבק את קוד ההטמעה בשדה הטקסט שמסופק על ידי בלוק ה-Custom HTML.
6. אופציונלי: הזז את בלוק ה-Custom HTML או הצג תצוגה מקדימה של האופן שבו לחצן הקנייה שלך יוצג:
   • כדי להזיז את בלוק ה-Custom HTML, לחץ על לחצני החיצים בסרגל הכלים של הבלוק, או גרור את הבלוק למיקום חדש.
   • כדי להציג תצוגה מקדימה של לחצן הקנייה, לחץ על תצוגה מקדימה בסרגל הכלים של הבלוק.
7. בסיום, לחץ על הלחצן תצוגה מקדימה או שמירה עבור התבנית.

הוספת קוד הטמעה לבלוג Shopify שלך

שלבים:

הוספת קוד הטמעה ל-Squarespace

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

שלבים:

1. מלוח המחוונים שלך ב-Squarespace, פתח את דף האינטרנט שאליו תרצה להוסיף את קוד ההטמעה.
2. אתר את האלמנט בדף שבו ברצונך שלחצן הקנייה או הסל המוטמע יוצגו, העבר את סמן העכבר מעל אזור Page Content, ואז לחץ על EDIT.
3. לחץ בנקודת ההוספה שבה ברצונך להוסיף את קוד ההטמעה.
4. במקטע More שבתיבת הדו-שיח Content Blocks, לחץ על Code.
5. במנהל של Shopify, העתק את קוד ההטמעה מתיבת הדו-שיח קוד הטמעה.
6. מלוח המחוונים של Squarespace, הדבק את קוד ההטמעה בתיבת הדו-שיח CODE. ודא ששדה הטקסט מוגדר לקבל HTML.
7. לחץ על APPLY בתיבת הדו-שיח EDIT CODE.
8. לחץ שוב על SAVE בעורך הדף. מכיוון ש-Squarespace משביתה את ה-JavaScript בלוח המחוונים שלה, עליך להציג את הדף בתצוגה מקדימה בנפרד כדי לוודא שלחצן הקנייה או הסל המוטמע עובדים.

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

הוספת קוד הטמעה ל-Wix

לאחר שיצרת לחצן קנייה או אוסף במנהל של Shopify, תוכל להוסיף אותו לאתר שלך ב-Wix באמצעות עורך האתרים של Wix (Wix Website Editor).

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

שלבים:

1. במנהל של Shopify, צור לחצן קנייה עבור מוצר או אוסף, ולאחר מכן העתק את קוד ההטמעה שלו.

2. בחשבון שלך ב-Wix, מצא את האתר שברצונך לערוך במקטע My Sites, ולאחר מכן לחץ על Edit Site.
3. בעורך האתרים של Wix, לחץ על הלחצן + ולאחר מכן לחץ על More.
4. לחץ על HTML Code כדי להוסיף וידג'ט של קוד HTML לדף.
5. לחץ על Enter Code.
6. בתיבת הדו-שיח HTML Settings, הדבק את קוד ההטמעה עבור לחצן הקנייה או האוסף שלך בשדה Add your code here, ולאחר מכן לחץ על Update.
7. שנה את גודל וידג'ט קוד ה-HTML כדי שיתאים לתוכן שלו. אם אתה יוצר הטמעה עם סל, ודא שכרטיסיית הסל מוצגת במקום הנכון.
8. בסיום, יש ללחוץ על שמירה.

הטמעת מוצרים או אוספים מרובים

שלבים:

1. במנהל של Shopify, צור לחצן קנייה עבור מוצר או אוסף, ולאחר מכן העתק את קוד ההטמעה שלו.
2. יש להדביק את הקוד בתוך עורך קוד או בבונה האתרים של Wix. יש לחזור על שני השלבים הראשונים עד ליצירת לחצני הקנייה הנדרשים.
3. יש לערוך את קודי ההטמעה כדי לוודא שהם יוצגו ביישור הנכון.
4. בחשבון שלך ב-Wix, מצא את האתר שברצונך לערוך במקטע My Sites, ולאחר מכן לחץ על Edit Site.
5. בעורך האתרים של Wix, לחץ על הלחצן + ולאחר מכן לחץ על More.
6. לחץ על HTML Code כדי להוסיף וידג'ט של קוד HTML לדף.
7. לחץ על Enter Code.
8. בתיבת הדו-שיח הגדרות HTML, יש להדביק את הקוד הערוך עבור לחצני הקנייה בשדה הוסף את הקוד שלך כאן ולאחר מכן ללחוץ על עדכון.
9. שנה את גודל וידג'ט קוד ה-HTML כדי שיתאים לתוכן שלו. אם אתה יוצר הטמעה עם סל, ודא שכרטיסיית הסל מוצגת במקום הנכון.
10. בסיום, יש ללחוץ על שמירה.

הוספת תגי script בנפרד

פלטפורמות מסוימות (כגון Unbounce) מחייבות הדבקה של תגי <script> של קוד ההטמעה בכותרת הדף, ואת שאר קוד ההטמעה בדף שבו תרצו שלחצן הקנייה יוצג.

שלבים:

1. מקוד ההטמעה שנוצר בעת יצירת לחצן קנייה, יש להעתיק גם את רכיב ה-<div> וגם את רכיב ה-<script>. לדוגמה:

<script type="text/javascript">
/*<![CDATA[*/

(function () {
  var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
  if (window.ShopifyBuy) {
    if (window.ShopifyBuy.UI) {
      ShopifyBuyInit();
    } else {
      loadScript();
    }
  } else {
    loadScript();
  }

  function loadScript() {
    var script = document.createElement('script');
    script.async = true;
    script.src = scriptURL;
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
    script.onload = ShopifyBuyInit;
  }

  function ShopifyBuyInit() {
    var client = ShopifyBuy.buildClient({
      domain: 'haris-mahmood.myshopify.com',
      apiKey: 'a4e6808b1c4afa490c5b7459f7758347',
      appId: '15'
    });

    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('product', {
        id: [9017131142],
        node: document.getElementById('product-component-2dd3c8704e6'),
        moneyFormat: '%24%24%24%7B%7Bamount%7D%7D',
        options: {
  "product": {
    "variantId": "all",
    "contents": {
      "variantTitle": false,
      "description": false,
      "buttonWithQuantity": false,
      "quantity": false
    },
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "calc(25% - 20px)",
          "margin-left": "20px",
          "margin-bottom": "50px"
        }
      }
    }
  },
  "cart": {
    "contents": {
      "button": true
    },
    "styles": {
      "footer": {
        "background-color": "#ffffff"
      }
    }
  },
  "modalProduct": {
    "contents": {
      "variantTitle": false,
      "buttonWithQuantity": false,
      "quantity": false
    },
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "100%",
          "margin-left": "0px",
          "margin-bottom": "0px"
        }
      }
    }
  },
  "productSet": {
    "styles": {
      "products": {
        "@media (min-width: 601px)": {
          "margin-left": "-20px"
        }
      }
    }
  }
}
      });
    });
  }
})();
/*]]>*/
</script>

2. יש לפתוח את כותרת הדף (header) באתר שבו רוצים להטמיע לחצן קנייה.
3. יש להדביק את רכיב ה-<script> במלואו בתוך כותרת הדף.
4. יש לשמור את השינויים.
5. מקוד ההטמעה המקורי במנהל של Shopify, יש להעתיק רק את רכיב ה-<div>. לדוגמה:

<div id='product-component-2dd3c8704e6'></div>

6. יש לפתוח את הדף באתר שבו רוצים להטמיע את לחצן הקנייה.
7. יש להדביק את קטע הקוד של <div> בתוך הדף.
8. יש לשמור את השינויים.