Ajutor
Conectați-vă

Adăugarea codului de buton de cumpărare în HTML

După ce creați un buton de cumpărare în panoul de administrare Shopify, sunteți gata să îl adăugați pe propriul site web sau blog.

Procesul de adăugare a codului încorporat în codul HTML sursă al site-ului dvs. web este puțin diferit în funcție de cum și unde doriți să apară butoanele de cumpărare și coșul, de platforma de publicare și, uneori, de tema pe care o utilizați pe acea platformă.

În această pagină

Adăugarea codului încorporat pe WordPress

Puteți adăuga cod încorporat la postări, pagini sau șabloane pe site-ul dvs. WordPress.

Adăugarea codului încorporat la o postare sau pagină WordPress

  1. În Shopify, creați un buton de cumpărare și copiați codul său încorporat din caseta de dialog Cod încorporat (sau faceți clic pe Copiați codul încorporat în clipboard).
  2. Din tabloul de bord WordPress, accesați postările sau paginile dvs.
  3. Fie creați o postare sau o pagină nouă, fie editați una existentă.
  4. În editorul de blocuri, faceți clic pe butonul +, căutați HTML personalizat, apoi faceți clic pentru a insera un bloc HTML personalizat.
  5. Lipiți codul încorporat în câmpul text furnizat de blocul HTML personalizat.
  6. Opțional: mutați blocul HTML personalizat sau previzualizați modul în care se va afișa butonul dvs. de cumpărare:
    • Pentru a muta blocul HTML personalizat, faceți clic pe butoanele săgeată din bara de instrumente a blocului sau glisați blocul într-o locație nouă.
    • Pentru a previzualiza butonul de cumpărare, faceți clic pe Previzualizare în bara de instrumente a blocului.
  7. Când ați terminat, faceți clic pe butonul Salvare ciornă, Previzualizare sau Publicare pentru postarea sau pagina dvs.

Dacă utilizați Pluginul Editor clasic de la WordPress, atunci, în loc să utilizați un bloc HTML personalizat, schimbați editorul de text din modul Vizual în modul Text și lipiți codul încorporat în editor.

Adăugarea codului încorporat la un șablon WordPress

Dacă tema dvs. WordPress acceptă editorul de site, atunci puteți adăuga un buton de cumpărare încorporat la oricare dintre șabloanele site-ului dvs.

Pași:

  1. În Shopify, creați un buton de cumpărare și copiați codul său încorporat din caseta de dialog Cod încorporat (sau faceți clic pe Copiați codul încorporat în clipboard).
  2. În tabloul de bord WordPress, accesați Editor.
  3. Navigați la șablonul pe care doriți să îl editați.
  4. În editorul de blocuri, faceți clic pe butonul +, căutați HTML personalizat, apoi faceți clic pentru a insera un bloc HTML personalizat.
  5. Lipiți codul încorporat în câmpul text furnizat de blocul HTML personalizat.
  6. Opțional: mutați blocul HTML personalizat sau previzualizați modul în care se va afișa butonul dvs. de cumpărare:
    • Pentru a muta blocul HTML personalizat, faceți clic pe butoanele săgeată din bara de instrumente a blocului sau glisați blocul într-o locație nouă.
    • Pentru a previzualiza butonul de cumpărare, faceți clic pe Previzualizare în bara de instrumente a blocului.
  7. Când ați terminat, faceți clic pe butonul Previzualizare sau Salvare pentru șablon.

Adăugarea codului încorporat pe blogul dvs. Shopify

Notă:

Pași:

Desktop

  1. Din panoul de administrare Shopify, accesați Conținut > Postări pe blog.

  2. Din pagina Postări pe blog, faceți clic pe titlul unei postări pe blog pe care doriți să o editați sau faceți clic pe Adăugare postare pe blog pentru a crea una nouă.

  3. În secțiunea Scrieți postarea pe blog, faceți clic pe Afișare HTML în editorul de text îmbogățit.

  4. Lipiți codul încorporat în câmpul de text principal.

  5. Faceți clic pe Salvare.

Mobil

  1. Din Shopify app, atinge pictograma Meniu.

  2. În meniul Conținut, atingeți pictograma săgeată în jos, apoi atingeți Postări pe blog.

  3. Atingeți postarea pe blog pe care doriți să o editați.

  4. În secțiunea Conținut, atingeți …, apoi atingeți pictograma Editare cod.

  5. Lipiți codul încorporat în câmpul text.

  6. Atingeți Salvare sau ✓.

Adăugarea codului încorporat pe Squarespace

Puteți adăuga cod încorporat la postări individuale în Squarespace și la meniurile de pe pagina de pornire. În unele cazuri, este posibil să doriți să le faceți pe amândouă. De exemplu, puteți încorpora un coș pe pagina de pornire pentru a primi achiziții de la butoanele de cumpărare pe care le încorporați în postări individuale.

Pași:

  1. Din tabloul de bord Squarespace, deschideți pagina web unde doriți să adăugați codul încorporat.
  2. Găsiți elementul de pe pagină unde doriți să se afișeze butonul de cumpărare sau coșul încorporat, mutați cursorul peste zona Conținut pagină, apoi faceți clic pe EDITARE.
  3. Faceți clic pe punctul de inserare unde doriți să adăugați codul încorporat.
  4. În secțiunea Mai multe din caseta de dialog Blocuri de conținut, faceți clic pe Cod.
  5. Din panoul de administrare Shopify, copiați codul încorporat din caseta de dialog Cod încorporat.
  6. Din tabloul de bord Squarespace, lipiți codul încorporat în caseta de dialog COD. Asigurați-vă că este setat câmpul text să primească HTML.
  7. În caseta de dialog EDITARE COD, faceți clic pe APLICARE.
  8. Faceți clic din nou pe SALVARE în editorul de pagină. Deoarece Squarespace dezactivează JavaScript în tabloul său de bord, trebuie să previzualizați pagina separat pentru a confirma că butonul de cumpărare sau coșul încorporat funcționează.

Dacă parcurgeți pașii și butonul dvs. de cumpărare nu se încarcă, atunci este posibil să fie necesar să dezactivați încărcarea Ajax. Pentru mai multe detalii, consultați Activarea sau dezactivarea Ajax.

Adăugarea codului încorporat în Wix

După ce ați creat un buton de cumpărare sau o colecție în panoul de administrare Shopify, îl puteți adăuga pe site-ul dvs. web Wix utilizând editorul de site web Wix.

Dacă doriți să afișați mai mult de un produs pe site-ul dvs. web Wix fără a edita codul încorporat, atunci puteți încorpora o colecție. Puteți crea o colecție nouă în panoul de administrare Shopify pentru produsele pe care doriți să le afișați pe Wix.

Pași:

  1. Din panoul de administrare Shopify, creați un buton de cumpărare pentru un produs sau o colecție, apoi copiați codul său încorporat.
  1. Din contul dvs. Wix, găsiți site-ul pe care doriți să îl editați în secțiunea Site-urile mele, apoi faceți clic pe Editare site.
  2. În editorul de site web Wix, faceți clic pe butonul +, apoi faceți clic pe Mai mult.
  3. Faceți clic pe Cod HTML pentru a adăuga un widget de cod HTML la pagină.
  4. Faceți clic pe Introducere cod.
  5. În caseta de dialog Setări HTML, lipiți codul încorporat pentru butonul de cumpărare sau colecția dvs. în câmpul Adăugați codul aici, apoi faceți clic pe Actualizare.
  6. Redimensionați widgetul de cod HTML pentru a se potrivi cu conținutul său. Dacă creați o încorporare cu un coș, atunci asigurați-vă că fila coșului se afișează în locul potrivit.
  7. După ce ați terminat, faceți clic pe Salvare.

Încorporarea mai multor produse sau colecții

Pași:

  1. Din panoul de administrare Shopify, creați un buton de cumpărare pentru un produs sau o colecție, apoi copiați codul său încorporat.
  2. Lipiți codul într-un editor de cod sau în constructorul de site web Wix. Repetați primii doi pași până când ați creat butoanele de cumpărare de care aveți nevoie.
  3. Editați codurile încorporate pentru a vă asigura că sunt afișate cu alinierea corectă.
  4. Din contul dvs. Wix, găsiți site-ul pe care doriți să îl editați în secțiunea Site-urile mele, apoi faceți clic pe Editare site.
  5. În editorul de site web Wix, faceți clic pe butonul +, apoi faceți clic pe Mai mult.
  6. Faceți clic pe Cod HTML pentru a adăuga un widget de cod HTML la pagină.
  7. Faceți clic pe Introducere cod.
  8. În caseta de dialog Setări HTML, lipiți codul editat pentru butoanele dvs. de cumpărare în câmpul Adăugați codul aici, apoi faceți clic pe Actualizare.
  9. Redimensionați widgetul de cod HTML pentru a se potrivi cu conținutul său. Dacă creați o încorporare cu un coș, atunci asigurați-vă că fila coșului se afișează în locul potrivit.
  10. După ce ați terminat, faceți clic pe Salvare.

Adăugarea separată a etichetelor script

Unele platforme (cum ar fi Unbounce) necesită să lipiți etichetele <script> ale codului încorporat în antetul paginii și restul codului încorporat pe pagina unde doriți să se afișeze butonul de cumpărare.

Pași:

  1. Din codul încorporat care este generat atunci când creați un buton de cumpărare, copiați atât elementul <div>, cât și elementul <script>. De exemplu:
<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>
  1. Deschideți antetul paginii pentru site-ul web unde doriți să încorporați un buton de cumpărare.
  2. Lipiți întregul element <script> în antetul paginii.
  3. Salvați-vă modificările.
  4. Din codul încorporat original din panoul de administrare Shopify, copiați numai elementul <div>. De exemplu:
<div id='product-component-2dd3c8704e6'></div>
  1. Deschideți pagina de pe site-ul dvs. web unde doriți să încorporați un buton de cumpărare.
  2. Lipiți fragmentul de cod <div> în pagină.
  3. Salvați-vă modificările.