Osta-painikkeen koodin lisääminen HTML:ään

Kun olet luonut Osta-painikkeen Shopify Adminissa, olet valmis lisäämään sen omaan verkkosivustoosi tai blogiin.

Upotuskoodin lisääminen verkkosivustosi lähde-HTML:ään tapahtuu hieman eri tavoin riippuen siitä, miten ja missä haluat Osta-painikkeiden ja ostoskorisi näkyvän, sekä siitä, mitä julkaisualustaa ja mitä kyseisen alustan teemaa käytät.

Upotuskoodin lisääminen WordPressiin

Voit lisätä upotuskoodin WordPress-sivuston julkaisuihin, sivuille tai malleihin.

Upotuskoodin lisääminen WordPress-julkaisuun tai -sivulle

  1. Luo Osta-painike Shopifyssa ja kopioi sen upotuskoodi Upotuskoodi-valintaikkunasta (tai valitse Kopioi upotuskoodi leikepöydälle).
  2. Siirry WordPress-dashboardisi kautta julkaisuihin tai sivuille.
  3. Luo uusi julkaisu tai sivu tai muokkaa olemassa olevaa.
  4. Klikkaa lohkoeditorissa + -painiketta, etsi Custom HTMLja lisää sitten mukautettu HTML-lohko klikkaamalla.
  5. Liitä upotuskoodi mukautetun HTML-lohkon tekstikenttään.
  6. Valinnainen: Siirrä mukautettu HTML-lohko tai esikatsele Osta-painikkeen näkymää:

    • Jos haluat siirtää Mukautettu HTML -lohkoa, klikkaa lohkon työkalupalkin nuolipainikkeita tai vedä lohko uuteen paikkaan.
    • Jos haluat esikatsella Osta-painiketta, klikkaa esikatselua lohkotyökalussa.
  7. Kun olet valmis, klikkaa julkaisun tai sivun Tallenna luonnos, Esikatselu tai Julkaise-painiketta.

Jos käytät WordPressin Classic Editor -laajennusta, muuta tekstieditori visuaalisesta tekstitilaan mukautetun HTML-lohkon sijaan ja liitä upotuskoodi editoriin.

Upotuskoodin lisääminen WordPress-malliin

Jos WordPress-teema tukee sivustoeditoria, voit lisätä uupotetun Osta-painikkeen mihin tahansa sivustosi malliin.

Tee näin:

  1. Luo Osta-painike Shopifyssa ja kopioi sen upotuskoodi Upotuskoodi-valintaikkunasta (tai valitse Kopioi upotuskoodi leikepöydälle).
  2. Siirry WordPress-dashboardissa editoriin.
  3. Siirry malliin, jota haluat muokata.
  4. Klikkaa lohkoeditorissa + -painiketta, etsi Custom HTMLja lisää sitten mukautettu HTML-lohko klikkaamalla.
  5. Liitä upotuskoodi mukautetun HTML-lohkon tekstikenttään.
  6. Valinnainen: Siirrä mukautettu HTML-lohko tai esikatsele Osta-painikkeen näkymää:

    • Jos haluat siirtää Mukautettu HTML -lohkoa, klikkaa lohkon työkalupalkin nuolipainikkeita tai vedä lohko uuteen paikkaan.
    • Jos haluat esikatsella Osta-painiketta, klikkaa esikatselua lohkotyökalussa.
  7. Kun olet valmis, klikkaa mallin Esikatselu- tai Tallenna-painiketta.

Upotuskoodin lisääminen Shopify-blogiin

Tee näin:

  1. Klikkaa Blogipostaukset-sivulla sen blogipostauksen nimeä, jota haluat muokata, tai luo uusi blogipostaus klikkaamalla Lisää blogipostaus.
  2. Klikkaa Kirjoita blogipostaus -osiossa rich text editorin kohtaa Näytä HTML.
  3. Liitä upotuskoodi päätekstikenttään.
  4. Klikkaa Tallenna.

Upotuskoodin lisääminen Squarespaceen

Voit lisätä upotuskoodin yksittäisiin Squarespacen julkaisuihin ja etusivulla oleviin valikoihin. Joissakin tapauksissa saatat haluta lisätä koodin molempiin. Voit esimerkiksi sulauttaa ostoskorin etusivulle niin, että voit vastaanottaa ostoksia yksittäisiin julkaisuihin sulautetuista Osta-painikkeista.

Tee näin:

  1. Avaa Squarespacen koontinäytöstäsi verkkosivu, johon haluat lisätä upotuskoodin.
  2. Etsi elementti sivulta, jolla haluat Osta-painikkeen tai sulautetun ostoskorin näkyvän, siirrä kohdistin Page Content (sivun sisältö) -alueen päälle ja klikkaa sitten kohtaa EDIT (muokkaa).
  3. Klikkaa lisäyskohtaa, johon haluat lisätä upotuskoodin.
  4. klikkaa Content Blocks (sisältölohkot) -valintaikkunan osassa More (lisää) kohtaa Code (koodi).
  5. Kopioi upotuskoodi Shopify Adminin Upotuskoodi-valintaikkunasta.
  6. Liitä upotuskoodi Squarespacen koontinäyttössä CODE-valintaikkunaan. Varmista, että tekstikenttä on määritetty vastaanottamaan HTML.
  7. Klikkaa KÄYTÄ MUOKKAA KOODIA -valintaikkunassa.
  8. Klikkaa uudelleen kohtaa SAVE (tallenna) sivun editorissa. Koska Squarespace poistaa JavaScriptin käytöstä koontinäytössä, sinun on esikatseltava sivua erikseen nähdäksesi lisäämäsi Osta-painikkeen tai upotetun ostoskorin.

Jos suoritat toimintavaiheet ja Osta-painikkeesi ei lataudu, sinun on ehkä poistettava Ajaxin lataus käytöstä. Lisätietoja on kohdassa Ajaxin käyttöönotto tai käytöstä poistaminen.

Upotuskoodin lisääminen Wixiin

Kun olet luonut Osta-painikkeen tai kokoelman Shopify Adminissa, voit lisätä sen omaan Wix-verkkosivustoosi Wix Website Editorin avulla.

Jos haluat näyttää enemmän kuin yhden tuotteen Wix-sivustolla muuttamatta upotuskoodia, voit sulauttaa kokoelman. Voit luoda uuden kokoelman Shopify Adminissa tuotteille, joiden haluat näkyvän Wixissä.

Tee näin:

  1. Luo tuotteelle tai kokoelmalle Osta-painike Shopify Adminissa ja kopioi sen upotuskoodi.
  1. Etsi Wix-tililtäsi sivusto, jota haluat muokata My Sites (omat sivustoni) -osiossa ja klikkaa sitten Edit Site (muokkaa sivustoa).
  2. klikkaa Wix Website Editorissa +-painiketta ja valitse sitten More (lisää).
  3. Lisää sivulle HTML-koodipienoisohjelma klikkaamalla kohtaa HTML Code (HTML-koodi).
  4. Valitse Enter Code (kirjoita koodi).
  5. Liitä HTML Settings (HTML-asetukset) -valintaikkunaan Osta-painikkeen tai kokoelman upotuskoodi Add your code here (lisää koodi tähän) -kenttään ja klikkaa sitten kohtaa Update (päivitä).
  6. Muuta HTML-koodipienoisohjelman koko sisällön mukaiseksi. Jos luot sulautuksen, jossa on ostoskori, varmista, että ostoskorisvälilehti näkyy oikeassa paikassa.
  7. Kun olet valmis, klikkaa Tallenna.

Useita tuotteiden tai kokoelmien sulauttaminen

Tee näin:

  1. Luo tuotteelle tai kokoelmalle Osta-painike Shopify Adminissa ja kopioi sen upotuskoodi.
  2. Liitä koodi koodieditoriin tai Wixin verkkosivujen rakennustyökaluun. Toista ensimmäisiä kahta vaihetta, kunnes olet luonut tarvitsemasi Osta-painikkeet.
  3. Muokkaa upotuskoodeja varmistaaksesi, että ne kohdistuvat oikein.
  4. Etsi Wix-tililtäsi sivusto, jota haluat muokata My Sites (omat sivustoni) -osiossa ja klikkaa sitten Edit Site (muokkaa sivustoa).
  5. klikkaa Wix Website Editorissa +-painiketta ja valitse sitten More (lisää).
  6. Lisää sivulle HTML-koodipienoisohjelma klikkaamalla kohtaa HTML Code (HTML-koodi).
  7. Valitse Enter Code (kirjoita koodi).
  8. Liitä HTML Settings (HTML-asetukset) -valintaikkunaan Osta-painikkeiden muokattu koodi Add your code here (lisää koodi tähän) -kenttään ja klikkaa sitten kohtaa Update (päivitä).
  9. Muuta HTML-koodipienoisohjelman koko sisällön mukaiseksi. Jos luot sulautuksen, jossa on ostoskori, varmista, että ostoskorisvälilehti näkyy oikeassa paikassa.
  10. Kun olet valmis, klikkaa Tallenna.

Huomautus: Tarvitsetko apua Wix Editorin käytössä? Ota yhteyttä Wixin tukeen.

Komentosarjan tunnisteiden lisääminen erikseen

Jotkin alustat (kuten Unbounce) edellyttävät, että liität upotuskoodin <script>-tunnisteet sivun ylätunnisteeseen ja loput upotuskoodista sivulle, jossa haluat näyttää Osta-painikkeen.

Tee näin:

  1. Kopioi sekä <div> -elementti että <script> -elementti upotuskoodista, joka muodostettiin Osta-painiketta luotaessa. Esimerkiksi:
<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. Avaa sen verkkosivun ylätunniste, johon haluat sulauttaa Osta-painikkeen.

  2. Liitä koko <script>-elementti sivun ylätunnisteeseen.

  3. Tallenna muutokset.

  4. Kopioi Shopify Adminin alkuperäisestä upotuskoodista vain <div> -elementti. Esimerkiksi:

<div id='product-component-2dd3c8704e6'></div>
  1. Avaa sivustosi verkkosivu, johon haluat sulauttaa Osta-painikkeen.

  2. Liitä sivulle <div>-koodinpätkä.

  3. Tallenna muutokset.

Valmiina aloittamaan Shopifyssa?

Kokeile ilmaiseksi