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

Kun olet luonut osto-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 WordPress.org-blogiin

Voit lisätä upotuskoodin yksittäisiin julkaisuihin ja WordPress.org-blogin kotisivun valikkoon.

Upotuskoodin lisääminen WordPress.org-julkaisuun

  1. Luo Osta-painike Shopifyssa ja kopioi sen upotuskoodi Upotuskoodi-valintaikkunasta (tai valitse Kopioi upotuskoodi leikepöydälle).
  2. Siirry WordPress-dashboarissa julkaisuihisi.
  3. Luo uusi julkaisu tai muokkaa olemassa olevaa julkaisua siellä, missä haluat näyttää Osta-painikkeen.
  4. Suorita jokin seuraavista vaiheista käyttämäsi WordPress-versiosta riippuen:

    • Vaihda postin tekstieditori visuaalisesta tilasta tekstitilaan.
    • klikkaa lohkoeditorissa + -painiketta, etsi kohta Custom HTML ja valitse sitten Mukautettu HTML.
  5. Liitä upotuskoodi sen kohdan tekstikenttään, jossa haluat näyttää Osta-painikkeen tai kokoelman.

  6. Kun olet valmis, klikkaa Tallenna luonnos, Esikatselutai Julkaise.

Upotuskoodin lisääminen Wordpress-valikkoon

Toimintovaiheet:

  1. klikkaa WordPress-koontinäytössä Ulkoasu-painiketta.
  2. Avaa teemaeditori napauttamalla kohtaa Mukauta ja valitse sitten Vimpaimet.
  3. klikkaa sen alueen nimeä, johon haluat lisätä Osta-painikkeen tai mukautetun ostoskorikoodin.
  4. Avaa olemassa oleva tekstivimpain tai valitse Lisää vimpain ja klikkaa sitten kohtaa Teksti.
  5. Liitä upotuskoodi tekstivimpaimen päätekstikenttään.
  6. Tallenna muutokset.

Upotuskoodin lisääminen Shopify-blogiin

Toimintovaiheet:

  1. klikkaa Blogijulkaisut-sivulla sen blogijulkaisun nimeä, jota haluat muokata, tai luo uusi blogijulkaisu valitsemalla Lisää blogijulkaisu. 4. klikkaa Kirjoita blogijulkaisu -osiossa rich text editorin kohtaa Näytä HTML.
    Näytä HTML-editorin painike
    5. Liitä upotuskoodi päätekstikenttään. 6. Valitse Tallenna.

Upotuskoodin lisääminen Squarespaceen

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

Toimintovaiheet:

  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 työvaiheet 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ä.

Toimintovaiheet:

  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 napauttamalla 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

Toimintovaiheet:

  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 napauttamalla 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.

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.

Toimintovaiheet:

  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.

Oletko valmis aloittamaan myynnin Shopify-palvelussa?

Kokeile sitä ilmaiseksi