Legge til Kjøp-knapp-kode i HTML

Når du har opprettet en Kjøp-knapp i Shopify-administrator, er du klar til å legge den til på nettstedet eller bloggen din.

Prosessen med å legge til innbyggingskode i kilde-HTML-koden til nettstedet ditt varierer litt avhengig av hvordan og hvor du vil at Kjøp-knappene og handlekurven skal vises, publiseringsplattformen din og noen ganger temaet du bruker på den plattformen.

Legge til innbyggingskode i WordPress

Du kan legge til innbyggingskode i innlegg, på sider eller i maler på WordPress-nettstedet ditt.

Legg til innbyggingskode i et WordPress-innlegg eller på en side

1. Opprett en Kjøp-knapp i Shopify, og kopier innbyggingskoden fra dialogboksen Innbyggingskode (eller klikk på Kopier innbyggingskode til utklippstavlen).
2. Gå til innleggene eller sidene dine fra WordPress-instrumentbordet.
3. Opprett et nytt innlegg eller en ny side, eller rediger et eksisterende.
4. Klikk på +-knappen i blokkredigeringen, søk etter Egendefinert HTML, og klikk deretter for å sette inn en blokk for Egendefinert HTML.
5. Lim inn innbyggingskoden i tekstfeltet som følger med Egendefinert HTML-blokken.
6. Valgfritt: Flytt Egendefinert HTML-blokken eller forhåndsvis hvordan Kjøp-knappen vises:
   • For å flytte Egendefinert HTML-blokken, klikker du på pilknappene på blokkens verktøylinje, eller drar blokken til en ny plassering.
   • For å forhåndsvise Kjøp-knappen, klikker du på Forhåndsvisning på verktøylinjen for blokken.
7. Når du er ferdig, klikker du på knappen Lagre utkast, Forhåndsvisning eller Publiser for innlegget eller siden.

Hvis du bruker WordPress' Classic Editor-plugin, må du, i stedet for å bruke en Egendefinert HTML-blokk, endre tekstredigeringen fra Visuell- til Tekst-modus og lime inn innbyggingskoden i redigeringsprogrammet.

Legg til innbyggingskode i en WordPress-mal

Hvis WordPress-temaet ditt støtter nettstedsredigeringen, kan du legge til en integrert Kjøp-knapp i hvilken som helst av malene for nettstedet ditt.

Trinn:

1. Opprett en Kjøp-knapp i Shopify, og kopier innbyggingskoden fra dialogboksen Innbyggingskode (eller klikk på Kopier innbyggingskode til utklippstavlen).
2. Gå til Redigeringsprogram fra WordPress-instrumentbordet.
3. Naviger til malen du vil redigere.
4. Klikk på +-knappen i blokkredigeringen, søk etter Egendefinert HTML, og klikk deretter for å sette inn en blokk for Egendefinert HTML.
5. Lim inn innbyggingskoden i tekstfeltet som følger med Egendefinert HTML-blokken.
6. Valgfritt: Flytt Egendefinert HTML-blokken eller forhåndsvis hvordan Kjøp-knappen vises:
   • For å flytte Egendefinert HTML-blokken, klikker du på pilknappene på blokkens verktøylinje, eller drar blokken til en ny plassering.
   • For å forhåndsvise Kjøp-knappen, klikker du på Forhåndsvisning på verktøylinjen for blokken.
7. Når du er ferdig, klikker du på knappen Forhåndsvisning eller Lagre for malen.

Legge til innbyggingskode i Shopify-bloggen din

Trinn:

Legge til innbyggingskode i Squarespace

Du kan legge til innbyggingskode i enkeltinnlegg i Squarespace og i menyene på startsiden. I noen tilfeller kan det være lurt å gjøre begge deler. Du kan for eksempel bygge inn en handlekurv på startsiden for å motta kjøp fra Kjøp-knapper som du bygger inn i enkeltinnlegg.

Trinn:

1. Åpne nettsiden der du vil legge til innbyggingskoden fra Squarespace-instrumentbordet.
2. Finn elementet på siden der du vil at Kjøp-knappen eller den innebygde handlekurven skal vises, flytt markøren over Sideinnhold-området, og klikk deretter på Rediger.
3. Klikk på innsettingspunktet der du vil legge til innbyggingskoden.
4. I Mer-seksjonen i dialogboksen Innholdsblokker, klikker du på Kode.
5. Kopier innbyggingskoden fra dialogboksen Innbyggingskode i Shopify-administrator.
6. Lim inn innbyggingskoden i Kode-dialogboksen fra Squarespace-instrumentbordet. Sørg for at tekstfeltet er angitt til å motta HTML.
7. Klikk på BRUK i dialogboksen REDIGER KODE.
8. Klikk på LAGRE igjen i redigeringsprogrammet for siden. Siden Squarespace deaktiverer JavaScript i instrumentbordet sitt, må du forhåndsvise siden separat for å bekrefte at Kjøp-knappen eller den innebygde handlekurven fungerer.

Hvis du fullfører trinnene og Kjøp-knappen ikke lastes inn, må du kanskje slå av Ajax-innlasting. Se Aktiver eller deaktiver Ajax for mer informasjon.

Legge til innbyggingskode i Wix

Når du har opprettet en Kjøp-knapp eller samling i Shopify-administrator, kan du legge den til på Wix-nettstedet ditt ved hjelp av Wix Website Editor.

Hvis du vil vise mer enn ett produkt på Wix-nettstedet ditt uten å redigere innbyggingskoden, kan du bygge inn en samling. Du kan opprette en ny samling i Shopify-administrator for produktene du vil vise på Wix.

Trinn:

1. I Shopify-administrator, opprett en Kjøp-knapp for et produkt eller en samling og kopier deretter innbyggingskoden.

2. Fra Wix-kontoen din, finn nettstedet du vil redigere i seksjonen Mine nettsteder og klikk deretter på Rediger nettsted.
3. Klikk på +-knappen i Wix Website Editor, og klikk deretter på Mer.
4. Klikk på HTML-kode for å legge til en widget for HTML-kode på siden.
5. Klikk på Angi kode.
6. I dialogboksen HTML-innstillinger limer du inn innbyggingskoden for Kjøp-knappen eller samlingen i feltet Legg til koden din her og klikker deretter på Oppdater.
7. Endre størrelsen på widgeten for HTML-kode slik at den passer til innholdet. Hvis du oppretter en innbygging med en handlekurv, må du sørge for at handlekurvfanen vises på riktig sted.
8. Når du er ferdig, klikker du på Lagre.

Bygg inn flere produkter eller samlinger

Trinn:

1. I Shopify-administrator, opprett en Kjøp-knapp for et produkt eller en samling og kopier deretter innbyggingskoden.
2. Lim inn koden i et koderedigeringsprogram eller i Wix-nettstedsbyggeren. Gjenta de to første trinnene til du har opprettet de Kjøp-knappene du trenger.
3. Rediger innbyggingskodene for å sørge for at de vises med riktig justering.
4. Fra Wix-kontoen din, finn nettstedet du vil redigere i seksjonen Mine nettsteder og klikk deretter på Rediger nettsted.
5. Klikk på +-knappen i Wix Website Editor, og klikk deretter på Mer.
6. Klikk på HTML-kode for å legge til en widget for HTML-kode på siden.
7. Klikk på Angi kode.
8. I dialogboksen HTML-innstillinger limer du inn den redigerte koden for Kjøp-knappene i feltet Legg til koden din her og klikker deretter på Oppdater.
9. Endre størrelsen på widgeten for HTML-kode slik at den passer til innholdet. Hvis du oppretter en innbygging med en handlekurv, må du sørge for at handlekurvfanen vises på riktig sted.
10. Når du er ferdig, klikker du på Lagre.

Legg til skript-tagger separat

Enkelte plattformer (for eksempel Unbounce) krever at du limer inn innbyggingskodens <script>-tagger i sidehodet, og resten av innbyggingskoden på siden der du vil at Kjøp-knappen skal vises.

Trinn:

1. Fra innbyggingskoden som genereres når du oppretter en Kjøp-knapp, kopierer du både <div>-elementet og <script>-elementet. For eksempel:

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

2. Åpne sidehodet for nettstedet der du vil bygge inn en Kjøp-knapp.
3. Lim inn hele <script>-elementet i sidehodet.
4. Lagre endringene.
5. Fra den opprinnelige innbyggingskoden i Shopify-administrator kopierer du bare <div>-elementet. For eksempel:

<div id='product-component-2dd3c8704e6'></div>

6. Åpne siden på nettstedet der du vil bygge inn en Kjøp-knapp.
7. Lim inn <div>-kodebiten på siden.
8. Lagre endringene.