Ohje
Kirjaudu sisään

Osta-painikkeen koodin lisääminen HTML-kieleen

Kun olet luonut Osta-painikkeen Shopifyn ohjausnäkymässä, voit lisätä sen omalle verkkosivullesi tai blogiisi.

Upotuskoodin lisääminen verkkosivusi HTML-lähdekoodiin vaihtelee hieman riippuen siitä, miten ja minne haluat sijoittaa Osta-painikkeet ja ostoskorin, sekä julkaisualustastasi ja joskus myös alustalla käyttämästäsi teemasta.

Tällä sivulla

Upotuskoodin lisääminen WordPressiin

Voit lisätä upotuskoodin WordPress-sivustosi postauksiin, sivuille tai malleihin.

Upotuskoodin lisääminen WordPress-postaukseen tai -sivulle

  1. Luo Osta-painike Shopifyn ohjausnäkymässä ja kopioi sen upotuskoodi Upotuskoodi-valintaikkunasta (tai klikkaa Kopioi upotuskoodi leikepöydälle).
  2. Siirry WordPress-dashboardistasi postauksiisi tai sivuillesi.
  3. Luo joko uusi postaus tai sivu tai muokkaa olemassa olevaa.
  4. Klikkaa lohkoeditorissa +-painiketta, etsi Custom HTML ja lisää sitten Mukautettu HTML -lohko klikkaamalla sitä.
  5. Liitä upotuskoodi Mukautettu HTML -lohkon tekstikenttään.
  6. Valinnainen: siirrä Mukautettu HTML -lohkoa tai esikatsele, miltä Osta-painikkeesi näyttää:
    • Voit siirtää Mukautettu HTML -lohkoa klikkaamalla lohkon työkalupalkin nuolipainikkeita tai vetämällä lohkon uuteen paikkaan.
    • Voit esikatsella Osta-painiketta klikkaamalla lohkon työkalupalkista Esikatselu.
  7. Kun olet valmis, klikkaa postauksen tai sivun Tallenna luonnos-, Esikatsele- tai Julkaise-painiketta.

Jos käytät WordPressin Classic Editor -laajennusta, älä käytä Mukautettu HTML -lohkoa vaan vaihda tekstieditori Visuaalinen-tilasta Teksti-tilaan ja liitä upotuskoodi editoriin.

Upotuskoodin lisääminen WordPress-malliin

Jos WordPress-teemasi tukee sivustoeditoria, voit lisätä sulautetun Osta-painikkeen mihin tahansa sivustosi malleista.

Vaiheet:

  1. Luo Osta-painike Shopifyn ohjausnäkymässä ja kopioi sen upotuskoodi Upotuskoodi-valintaikkunasta (tai klikkaa Kopioi upotuskoodi leikepöydälle).
  2. Siirry WordPress-dashboardissasi Editoriin.
  3. Siirry malliin, jota haluat muokata.
  4. Klikkaa lohkoeditorissa +-painiketta, etsi Custom HTML ja lisää sitten Mukautettu HTML -lohko klikkaamalla sitä.
  5. Liitä upotuskoodi Mukautettu HTML -lohkon tekstikenttään.
  6. Valinnainen: siirrä Mukautettu HTML -lohkoa tai esikatsele, miltä Osta-painikkeesi näyttää:
    • Voit siirtää Mukautettu HTML -lohkoa klikkaamalla lohkon työkalupalkin nuolipainikkeita tai vetämällä lohkon uuteen paikkaan.
    • Voit esikatsella Osta-painiketta klikkaamalla lohkon työkalupalkista Esikatselu.
  7. Kun olet valmis, klikkaa mallin Esikatsele- tai Tallenna-painiketta.

Upotuskoodin lisääminen Shopify-blogiin

Huomautus:

Vaiheet:

Tietokone

  1. Siirry Shopifyn ohjausnäkymässä kohtaan Sisältö > Blogipostaukset.

  2. Klikkaa Blogipostaukset-sivulla sen blogipostauksen nimeä, jota haluat muokata, tai luo uusi postaus klikkaamalla Lisää blogipostaus.

  3. Klikkaa Kirjoita blogipostauksesi -osiossa rich text editorin Näytä HTML -painiketta.

  4. Liitä upotuskoodi päätekstikenttään.

  5. Klikkaa Tallenna.

Mobiili

  1. Napauta Shopify-sovelluksessa Menu -kuvaketta.

  2. Napauta Sisältö-valikossa nuoli alas -kuvaketta ja napauta sitten Blogipostaukset.

  3. Napauta blogipostausta, jota haluat muokata.

  4. Napauta Sisältö-osiossa … ja napauta sitten Muokkaa koodia -kuvaketta.

  5. Liitä upotuskoodi tekstikenttään.

  6. Napauta Tallenna tai ✓.

Upotuskoodin lisääminen Squarespaceen

Voit lisätä upotuskoodin Squarespacessa yksittäisiin postauksiin ja etusivusi valikoihin. Joissakin tapauksissa saatat haluta tehdä molemmat. Voit esimerkiksi upottaa ostoskorin etusivullesi vastaanottamaan ostoksia, jotka on tehty yksittäisiin postauksiin upotetuilla Osta-painikkeilla.

Vaiheet:

  1. Avaa Squarespace-dashboardistasi verkkosivu, johon haluat lisätä upotuskoodin.
  2. Etsi sivulta elementti, jossa haluat Osta-painikkeen tai sulautetun ostoskorin näkyvän, siirrä kohdistin Sivun sisältö -alueen päälle ja klikkaa sitten MUOKKAA.
  3. Klikkaa lisäyskohtaa, johon haluat lisätä upotuskoodin.
  4. Klikkaa Sisältölohkot-valintaikkunan Lisää-osiossa Koodi.
  5. Kopioi upotuskoodi Shopifyn ohjausnäkymän Upotuskoodi-valintaikkunasta.
  6. Liitä upotuskoodi Squarespace-dashboardin KOODI-valintaikkunaan. Varmista, että tekstikentän asetuksena on HTML.
  7. Napsauta KÄYTÄ-painiketta MUOKKAA KOODIA -valintaikkunassa.
  8. Napsauta uudelleen TALLENNA-painiketta sivueditorissa. Koska Squarespace poistaa JavaScriptin käytöstä dashboardissaan, sinun täytyy esikatsella sivusi erikseen varmistaaksesi, että Osta-painike tai sulautettu ostoskori toimii.

Jos suoritat vaiheet, eikä Osta-painike lataudu, sinun on ehkä poistettava Ajax-lataus käytöstä. Lisätietoja on kohdassa Ota Ajax käyttöön tai poista se käytöstä.

Upotuskoodin lisääminen Wixiin

Kun olet luonut Osta-painikkeen tai kokoelman Shopifyn ohjausnäkymässä, voit lisätä sen Wix-verkkosivullesi Wix-verkkosivueditorilla.

Jos haluat näyttää useamman kuin yhden tuotteen Wix-verkkosivullasi muokkaamatta upotuskoodia, voit upottaa kokoelman. Voit luoda uuden kokoelman Shopifyn ohjausnäkymässä niitä tuotteita varten, jotka haluat näyttää Wixissä.

Vaiheet:

  1. Luo Osta-painike tuotteelle tai kokoelmalle Shopifyn ohjausnäkymässä ja kopioi sitten sen upotuskoodi.
  1. Etsi Wix-tililtäsi Omat sivustot -osiosta sivusto, jota haluat muokata, ja napsauta sitten Muokkaa sivustoa.
  2. Napsauta Wix-verkkosivueditorissa +-painiketta ja napsauta sitten Lisää.
  3. Napsauta HTML-koodi lisätäksesi sivulle HTML-koodin pienohjelman.
  4. Napsauta Syötä koodi.
  5. Liitä Osta-painikkeen tai kokoelman upotuskoodi HTML-asetukset-valintaikkunan Lisää koodisi tähän -kenttään ja napsauta sitten Päivitä.
  6. Muuta HTML-koodin pienohjelman kokoa niin, että se vastaa sen sisältöä. Jos olet luomassa upotusta, jossa on ostoskori, varmista, että ostoskorin välilehti näkyy oikeassa paikassa.
  7. Kun olet valmis, napsauta Tallenna.

Usean tuotteen tai kokoelman upottaminen

Vaiheet:

  1. Luo Osta-painike tuotteelle tai kokoelmalle Shopifyn ohjausnäkymässä ja kopioi sitten sen upotuskoodi.
  2. Liitä koodi koodieditoriin tai Wixin verkkosivujen rakennustyökaluun. Toista kaksi ensimmäistä vaihetta, kunnes olet luonut tarvitsemasi Osta-painikkeet.
  3. Muokkaa upotuskoodeja varmistaaksesi, että ne näkyvät oikein tasattuina.
  4. Etsi Wix-tililtäsi Omat sivustot -osiosta sivusto, jota haluat muokata, ja napsauta sitten Muokkaa sivustoa.
  5. Napsauta Wix-verkkosivueditorissa +-painiketta ja napsauta sitten Lisää.
  6. Napsauta HTML-koodi lisätäksesi sivulle HTML-koodin pienohjelman.
  7. Napsauta Syötä koodi.
  8. Liitä Osta-painikkeidesi muokattu koodi HTML-asetukset-valintaikkunan Lisää koodisi tähän -kenttään ja napsauta sitten Päivitä.
  9. Muuta HTML-koodin pienohjelman kokoa niin, että se vastaa sen sisältöä. Jos olet luomassa upotusta, jossa on ostoskori, varmista, että ostoskorin välilehti näkyy oikeassa paikassa.
  10. Kun olet valmis, napsauta 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 sille sivulle, jolla haluat Osta-painikkeen näkyvän.

Vaiheet:

  1. Kopioi Osta-painiketta luotaessa luodusta upotuskoodista sekä <div>-elementti että <script>-elementti. Esimerkki:
<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 upottaa Osta-painikkeen.
  2. Liitä koko <script>-elementti sivun ylätunnisteeseen.
  3. Tallenna muutokset.
  4. Kopioi Shopifyn ohjausnäkymän alkuperäisestä upotuskoodista vain <div>-elementti. Esimerkki:
<div id='product-component-2dd3c8704e6'></div>
  1. Avaa verkkosivustoltasi se sivu, johon haluat upottaa Osta-painikkeen.
  2. Liitä <div>-koodinpätkä sivulle.
  3. Tallenna muutokset.