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.

Huomaa

Jos tarvitset apua upotuskoodin lisäämisessä Shopifyn ulkopuoliseen julkaisualustaan (kuten Squarespaceen tai WordPressiin), pyydä tukea suoraan sivuston tarjoajalta tai julkaisualustalta.

Upotuskoodin lisääminen WordPressiin

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

Huomaa

Upotetut Osta-painikkeet ovat yhteensopivia itse isännöityjen WordPress.org-sivustojen ja tiettyjen WordPress.com-sopimusten kanssa. Alla olevat ohjeet on kirjoitettu uusia WordPress-versioita varten. Sivustoosi asennettu versio voi olla erilainen. Lisätietoja WordPress-versioista on WordPress-tukisivustolla.

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, miten Osta-painikkeesi näkyy:

   • 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 Pluginia, 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, miten Osta-painikkeesi näkyy:

   • 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

Huomaa

Osta-painike luo erillisen ostoskorin. Jos asiakas siirtyy toiselle sivulle verkkokaupassasi, tuote ei enää näy ostoskorissa. Voit muokata Osta-painiketta, niin että se vie suoraan kassalle.

Huomaa: #### Tee näin:

Tietokone

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

iPhone

1. Napauta Shopify-sovelluksessa …-painiketta.
2. Napauta myyntikanavat -osiossa Verkkokauppa.
3. Napauta Blogipostaukset.

Android

1. Napauta Shopify-sovelluksessa …-painiketta.
2. Napauta myyntikanavat -osiossa Verkkokauppa.
3. Napauta Blogipostaukset.

## Upotuskoodin lisääminen Squarespaceen

Huomio

Jotkin Squarespacen edistyneet lisämukautukset ovat teemakohtaisia. Nämä mukautukset eivät ole Shopifyn tukemia.

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 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 sivun editorissa uudelleen SAVE (tallenna). Koska Squarespace poistaa JavaScriptin käytöstä koontinäytössä, sinun on esikatseltava sivua erikseen, jotta voit varmistaa, että lisäämäsi Osta-painike tai upotettu ostoskori toimii.

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

Huomaa

Jos lisäät sulautetun ostoskorin Squarespacen etusivulla olevaan valikkoon, se vastaanottaa tilauksia Osta-painikkeista, joita voit sulauttaa yksittäisiin julkaisuihin.

Upotuskoodin lisääminen Wixiin

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

Huomio

Jos haluat upottaa useiden tuotteiden tai kokoelmien Osta-painikkeita, sinun on muokattava upotuskoodia, ennen kuin lisäät sen Wixin HTML-koodipienoisohjelmaan. Jos upotat useamman kuin yhden Osta-painikkeen Wixin verkkosivulle muuttamatta upotuskoodia, asiakkaat, jotka yrittävät ostaa useamman kuin yhden tuotteen, näkevät erilliset ostoskorit jokaista tuotetta varten.

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.

Huomaa

Kun luot Osta-painikkeen Wix-verkkosivustolle, et voi käyttää Uudelleenohjausta samalla välilehdellä Wixin rajoitusten vuoksi.

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 kokoa sisältöön sopivaksi. 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 kokoa sisältöön sopivaksi. Jos luot sulautuksen, jossa on ostoskori, varmista, että ostoskorisvälilehti näkyy oikeassa paikassa.
10. Kun olet valmis, klikkaa Tallenna.

Huomaa

Tarvitsetko apua Wix Editorin käytössä? Ota yhteyttä Wix-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, jolla haluat Osta-painikkeen näkyvän.

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.