Προσθήκη κώδικα Κουμπιού αγοράς σε HTML

Αφού δημιουργήσετε ένα Κουμπί αγοράς στον Διαχειριστή Shopify, είστε έτοιμοι να το προσθέσετε στον δικό σας ιστότοπο ή ιστολόγιο.

Η διαδικασία προσθήκης κώδικα ενσωμάτωσης στον πηγαίο κώδικα HTML του ιστοτόπου σας διαφέρει ελαφρώς ανάλογα με το πώς και πού θέλετε να εμφανίζονται τα Κουμπιά αγοράς και το καλάθι σας, την πλατφόρμα δημοσίευσης που χρησιμοποιείτε, και μερικές φορές το θέμα που χρησιμοποιείτε σε αυτήν την πλατφόρμα.

Προσθήκη κώδικα ενσωμάτωσης στο WordPress

Μπορείτε να προσθέσετε κώδικα ενσωμάτωσης σε αναρτήσεις, σελίδες ή πρότυπα στον ιστότοπό σας στο WordPress.

Προσθήκη κώδικα ενσωμάτωσης σε ανάρτηση ή σελίδα του WordPress

1. Στο Shopify, δημιουργήστε ένα Κουμπί αγοράς και αντιγράψτε τον κώδικα ενσωμάτωσής του από το παράθυρο διαλόγου Κώδικας ενσωμάτωσης (ή κάντε κλικ στην επιλογή Αντιγραφή κώδικα ενσωμάτωσης στο πρόχειρο).
2. Από τον πίνακα ελέγχου του WordPress, μεταβείτε στις αναρτήσεις ή τις σελίδες σας.
3. Δημιουργήστε μια νέα ανάρτηση ή σελίδα ή επεξεργαστείτε μια υπάρχουσα.
4. Στον επεξεργαστή μπλοκ, κάντε κλικ στο κουμπί +, αναζητήστε Προσαρμοσμένο HTML και, στη συνέχεια, κάντε κλικ για να εισαγάγετε ένα μπλοκ Προσαρμοσμένου HTML.
5. Επικολλήστε τον κώδικα ενσωμάτωσης στο πεδίο κειμένου που παρέχεται από το μπλοκ Προσαρμοσμένου HTML.
6. Προαιρετικά: Μετακινήστε το μπλοκ Προσαρμοσμένου HTML ή κάντε προεπισκόπηση του τρόπου εμφάνισης του Κουμπιού αγοράς σας:
   • Για να μετακινήσετε το μπλοκ Προσαρμοσμένου HTML, κάντε κλικ στα κουμπιά με τα βέλη στη γραμμή εργαλείων του μπλοκ ή σύρετε το μπλοκ σε μια νέα θέση.
   • Για να κάνετε προεπισκόπηση του Κουμπιού αγοράς, κάντε κλικ στην επιλογή Προεπισκόπηση στη γραμμή εργαλείων του μπλοκ.
7. Όταν τελειώσετε, κάντε κλικ στο κουμπί Αποθήκευση προσχεδίου, Προεπισκόπηση ή Δημοσίευση για την ανάρτηση ή τη σελίδα σας.

Αν χρησιμοποιείτε το Classic Editor Plugin του WordPress, τότε, αντί να χρησιμοποιήσετε ένα μπλοκ Προσαρμοσμένου HTML, αλλάξτε το πρόγραμμα επεξεργασίας κειμένου από τη λειτουργία Οπτική σε λειτουργία Κείμενο και επικολλήστε τον κώδικα ενσωμάτωσης στο πρόγραμμα επεξεργασίας.

Προσθήκη κώδικα ενσωμάτωσης σε ένα πρότυπο WordPress

Αν το θέμα του WordPress που χρησιμοποιείτε υποστηρίζει τον επεξεργαστή ιστότοπου, τότε μπορείτε να προσθέσετε ένα ενσωματωμένο Κουμπί αγοράς σε οποιοδήποτε από τα πρότυπα του ιστοτόπου σας.

Βήματα:

1. Στο Shopify, δημιουργήστε ένα Κουμπί αγοράς και αντιγράψτε τον κώδικα ενσωμάτωσής του από το παράθυρο διαλόγου Κώδικας ενσωμάτωσης (ή κάντε κλικ στην επιλογή Αντιγραφή κώδικα ενσωμάτωσης στο πρόχειρο).
2. Στον πίνακα ελέγχου του WordPress, μεταβείτε στον Επεξεργαστή.
3. Μεταβείτε στο πρότυπο που θέλετε να επεξεργαστείτε.
4. Στον επεξεργαστή μπλοκ, κάντε κλικ στο κουμπί +, αναζητήστε Προσαρμοσμένο HTML και, στη συνέχεια, κάντε κλικ για να εισαγάγετε ένα μπλοκ Προσαρμοσμένου HTML.
5. Επικολλήστε τον κώδικα ενσωμάτωσης στο πεδίο κειμένου που παρέχεται από το μπλοκ Προσαρμοσμένου HTML.
6. Προαιρετικά: Μετακινήστε το μπλοκ Προσαρμοσμένου HTML ή κάντε προεπισκόπηση του τρόπου εμφάνισης του Κουμπιού αγοράς σας:
   • Για να μετακινήσετε το μπλοκ Προσαρμοσμένου HTML, κάντε κλικ στα κουμπιά με τα βέλη στη γραμμή εργαλείων του μπλοκ ή σύρετε το μπλοκ σε μια νέα θέση.
   • Για να κάνετε προεπισκόπηση του Κουμπιού αγοράς, κάντε κλικ στην επιλογή Προεπισκόπηση στη γραμμή εργαλείων του μπλοκ.
7. Όταν τελειώσετε, κάντε κλικ στο κουμπί Προεπισκόπηση ή Αποθήκευση για το πρότυπο.

Προσθήκη κώδικα ενσωμάτωσης στο ιστολόγιό σας στο Shopify

Βήματα:

Προσθήκη κώδικα ενσωμάτωσης στο Squarespace

Μπορείτε να προσθέσετε κώδικα ενσωμάτωσης σε μεμονωμένες αναρτήσεις στο Squarespace και στα μενού της αρχικής σελίδας σας. Σε ορισμένες περιπτώσεις, μπορεί να θέλετε να κάνετε και τα δύο. Για παράδειγμα, μπορείτε να ενσωματώσετε ένα καλάθι στην αρχική σελίδα σας για να δέχεστε αγορές από τα Κουμπιά αγοράς που ενσωματώνετε σε μεμονωμένες αναρτήσεις.

Βήματα:

1. Από τον πίνακα ελέγχου του Squarespace, ανοίξτε την ιστοσελίδα όπου θέλετε να προσθέσετε τον κώδικα ενσωμάτωσης.
2. Βρείτε το στοιχείο στη σελίδα όπου θέλετε να εμφανίζεται το Κουμπί αγοράς ή το ενσωματωμένο καλάθι, μετακινήστε τον κέρσορα πάνω από την περιοχή Περιεχόμενο σελίδας και, στη συνέχεια, κάντε κλικ στην επιλογή ΕΠΕΞΕΡΓΑΣΙΑ.
3. Κάντε κλικ στο σημείο εισαγωγής όπου θέλετε να προσθέσετε τον κώδικα ενσωμάτωσης.
4. Στην ενότητα Περισσότερα του παραθύρου διαλόγου Μπλοκ περιεχομένου, κάντε κλικ στην επιλογή Κώδικας.
5. Από τον Διαχειριστή Shopify, αντιγράψτε τον κώδικα ενσωμάτωσης από το παράθυρο διαλόγου Κώδικας ενσωμάτωσης.
6. Από τον πίνακα ελέγχου του Squarespace, επικολλήστε τον κώδικα ενσωμάτωσης στο παράθυρο διαλόγου ΚΩΔΙΚΑΣ. Βεβαιωθείτε ότι το πεδίο κειμένου έχει ρυθμιστεί για λήψη HTML.
7. Κάντε κλικ στο ΕΦΑΡΜΟΓΗ στο παράθυρο διαλόγου ΕΠΕΞΕΡΓΑΣΙΑ ΚΩΔΙΚΑ.
8. Κάντε ξανά κλικ στο ΑΠΟΘΗΚΕΥΣΗ στο πρόγραμμα επεξεργασίας σελίδας. Επειδή το Squarespace απενεργοποιεί τη JavaScript στον πίνακα ελέγχου του, πρέπει να κάνετε προεπισκόπηση της σελίδας σας ξεχωριστά για να επιβεβαιώσετε ότι το Κουμπί αγοράς ή το ενσωματωμένο καλάθι λειτουργεί.

Εάν ολοκληρώσετε τα βήματα και το Κουμπί αγοράς σας δεν φορτώνει, τότε ίσως χρειαστεί να απενεργοποιήσετε τη φόρτωση Ajax. Για περισσότερες λεπτομέρειες, ανατρέξτε στην ενότητα Ενεργοποίηση ή απενεργοποίηση του Ajax.

Προσθήκη κώδικα ενσωμάτωσης στο Wix

Αφού δημιουργήσετε ένα Κουμπί αγοράς ή μια συλλογή στον Διαχειριστή Shopify, μπορείτε να το προσθέσετε στον ιστότοπό σας στο Wix χρησιμοποιώντας το πρόγραμμα επεξεργασίας ιστότοπου του Wix.

Αν θέλετε να εμφανίσετε περισσότερα από ένα προϊόντα στον ιστότοπό σας στο Wix χωρίς να επεξεργαστείτε τον κώδικα ενσωμάτωσης, τότε μπορείτε να ενσωματώσετε μια συλλογή. Μπορείτε να δημιουργήσετε μια νέα συλλογή στον Διαχειριστή Shopify για τα προϊόντα που θέλετε να εμφανίσετε στο Wix.

Βήματα:

1. Από τον Διαχειριστή Shopify, δημιουργήστε ένα Κουμπί αγοράς για ένα προϊόν ή μια συλλογή και, στη συνέχεια, αντιγράψτε τον κώδικα ενσωμάτωσής του.

2. Από τον λογαριασμό σας στο Wix, βρείτε τον ιστότοπο που θέλετε να επεξεργαστείτε στην ενότητα Οι ιστότοποί μου και, στη συνέχεια, κάντε κλικ στην επιλογή Επεξεργασία ιστότοπου.
3. Στο πρόγραμμα επεξεργασίας ιστότοπου του Wix, κάντε κλικ στο κουμπί + και, στη συνέχεια, κάντε κλικ στο Περισσότερα.
4. Κάντε κλικ στην επιλογή Κώδικας HTML για να προσθέσετε ένα widget κώδικα HTML στη σελίδα.
5. Κάντε κλικ στην επιλογή Εισαγωγή κώδικα.
6. Στο παράθυρο διαλόγου Ρυθμίσεις HTML, επικολλήστε τον κώδικα ενσωμάτωσης για το Κουμπί αγοράς ή τη συλλογή σας στο πεδίο Προσθέστε τον κώδικά σας εδώ και, στη συνέχεια, κάντε κλικ στην επιλογή Ενημέρωση.
7. Αλλάξτε το μέγεθος του widget κώδικα HTML για να ταιριάζει με τα περιεχόμενά του. Αν δημιουργείτε μια ενσωμάτωση με καλάθι, τότε βεβαιωθείτε ότι η καρτέλα του καλαθιού εμφανίζεται στο σωστό σημείο.
8. Όταν τελειώσετε, κάντε κλικ στο Αποθήκευση.

Ενσωμάτωση πολλών προϊόντων ή συλλογών

Βήματα:

1. Από τον Διαχειριστή Shopify, δημιουργήστε ένα Κουμπί αγοράς για ένα προϊόν ή μια συλλογή και, στη συνέχεια, αντιγράψτε τον κώδικα ενσωμάτωσής του.
2. Επικολλήστε τον κώδικα σε ένα πρόγραμμα επεξεργασίας κώδικα ή στο εργαλείο δημιουργίας ιστότοπων του Wix. Επαναλάβετε τα δύο πρώτα βήματα μέχρι να δημιουργήσετε τα Κουμπιά αγοράς που χρειάζεστε.
3. Επεξεργαστείτε τους κώδικες ενσωμάτωσης για να βεβαιωθείτε ότι εμφανίζονται με τη σωστή στοίχιση.
4. Από τον λογαριασμό σας στο Wix, βρείτε τον ιστότοπο που θέλετε να επεξεργαστείτε στην ενότητα Οι ιστότοποί μου και, στη συνέχεια, κάντε κλικ στην επιλογή Επεξεργασία ιστότοπου.
5. Στο πρόγραμμα επεξεργασίας ιστότοπου του Wix, κάντε κλικ στο κουμπί + και, στη συνέχεια, κάντε κλικ στο Περισσότερα.
6. Κάντε κλικ στην επιλογή Κώδικας HTML για να προσθέσετε ένα widget κώδικα HTML στη σελίδα.
7. Κάντε κλικ στην επιλογή Εισαγωγή κώδικα.
8. Στο παράθυρο διαλόγου Ρυθμίσεις HTML, επικολλήστε τον επεξεργασμένο κώδικα για τα Κουμπιά αγοράς σας στο πεδίο Προσθέστε τον κώδικά σας εδώ και, στη συνέχεια, κάντε κλικ στην επιλογή Ενημέρωση.
9. Αλλάξτε το μέγεθος του widget κώδικα HTML για να ταιριάζει με τα περιεχόμενά του. Αν δημιουργείτε μια ενσωμάτωση με καλάθι, τότε βεβαιωθείτε ότι η καρτέλα του καλαθιού εμφανίζεται στο σωστό σημείο.
10. Όταν τελειώσετε, κάντε κλικ στο Αποθήκευση.

Προσθήκη script tags ξεχωριστά

Ορισμένες πλατφόρμες (όπως το Unbounce) απαιτούν να επικολλήσετε τα <script> tags του κώδικα ενσωμάτωσης στην επικεφαλίδα της σελίδας και τον υπόλοιπο κώδικα ενσωμάτωσης στη σελίδα όπου θέλετε να εμφανίζεται το Κουμπί αγοράς.

Βήματα:

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. Ανοίξτε την επικεφαλίδα της σελίδας για τον ιστότοπο όπου θέλετε να ενσωματώσετε ένα Κουμπί αγοράς.
3. Επικολλήστε ολόκληρο το στοιχείο <script> στην επικεφαλίδα της σελίδας.
4. Αποθηκεύστε τις αλλαγές σας.
5. Από τον αρχικό κώδικα ενσωμάτωσης στον Διαχειριστή Shopify, αντιγράψτε μόνο το στοιχείο <div>. Για παράδειγμα:

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

6. Ανοίξτε τη σελίδα στον ιστότοπό σας όπου θέλετε να ενσωματώσετε ένα Κουμπί αγοράς.
7. Επικολλήστε το απόσπασμα κώδικα <div> στη σελίδα.
8. Αποθηκεύστε τις αλλαγές σας.