Legger til Kjøps-knappkode til HTML

Når du har opprettet en Kjøp-knapp i Shopify-administrator, er du klar til å legge den til ditt eget nettsted eller blogg.

Prosessen med å legge til innbyggingskode i nettstedets kilde-HTML-kode varierer avhengig av hvordan og hvor du ønsker å legge kjøp-knapper og handlekurv, av publiseringsplattformen og av og til av temaet du bruker på plattformen.

Merk

Hvis du trenger hjelp med å legge til innbyggingskode på publiseringsplattformer utenfor Shopify, som Squarespace eller Wordpress, må du kontakte leverandøren av nettstedet eller publiseringsplattformen direkte for å få hjelp.

Legge til innbyggingskode i WordPress

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

Merk

Integrerte kjøp-knapper er kompatible med selvdrevne nettsteder på WordPress.org og med enkelte abonnementer fra WordPress.com. Dokumentasjonen nedenfor er skrevet med tanke på nylige WordPress-versjoner. Versjonen som er installert på nettstedet ditt kan avvike fra dette. Du kan finne ut mer om WordPress-versjoner på WordPress' støttenettsted.

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

1. I Shopify oppretter du en Kjøp-knapp og kopierer den innebygde koden fra den innebygde kodedialogboksen(eller klikker på Kopier innebygget kode til utklippstavlen).

2. Gå til innlegg eller sider fra WordPress-instrumentbordet.

3. Du kan enten opprette et nytt innlegg eller en ny side, eller redigere et eksisterende.

4. Klikk +-knappen i redigeringsverktøyet for blokker, søk etter Egendefinert HTML og klikk for å sette inn en blokk med egendefinert HTML.

5. Lim inn innbyggingskode i tekstfeltet for blokken Egendefinert HTML.

6. Valgfritt: Flytt blokken med egendefinert HTML-kode, eller forhåndsvis hvordan kjøp-knappen vil se ut:

   • For å flytte blokken for egendefinert HTML kan du klikke på pilknappene i verktøylinjen for blokken, eller dra blokken til en ny plassering.
   • Klikk på Forhåndsvis i verktøylinjen for blokken for å forhåndsvise Kjøp-knappen.

7. Når du er ferdig klikker du knappen Lagre utkast, Forhåndsvis eller Publiser for innlegget eller siden.

Hvis du bruker Wordpress' integrasjon for det klassiske redigeringsverktøyet endrer du tekstredigeringsverktøyet fra Visuelt til Tekst i stedet for å bruke en blokk for egendefinert HTML, og limer inn innbyggingskoden i redigeringsverktøyet.

Legg til innbyggingskode i en WordPress-mal

Hvis WordPress-temaet støtter redigeringsverktøyet for nettsteder kan du legge til en integrert Kjøp-knapp i alle maler på nettstedet.

Trinn:

1. I Shopify oppretter du en Kjøp-knapp og kopierer den innebygde koden fra den innebygde kodedialogboksen(eller klikker på Kopier innebygget kode til utklippstavlen).

2. Gå til Redigeringsverktøyet i WordPress-instrumentbordet.

3. Gå til malen du vil redigere.

4. Klikk +-knappen i redigeringsverktøyet for blokker, søk etter Egendefinert HTML og klikk for å sette inn en blokk med egendefinert HTML.

5. Lim inn innbyggingskode i tekstfeltet for blokken Egendefinert HTML.

6. Valgfritt: Flytt blokken med egendefinert HTML-kode, eller forhåndsvis hvordan kjøp-knappen vil se ut:

   • For å flytte blokken for egendefinert HTML kan du klikke på pilknappene i verktøylinjen for blokken, eller dra blokken til en ny plassering.
   • Klikk på Forhåndsvis i verktøylinjen for blokken for å forhåndsvise Kjøp-knappen.

7. Når du er ferdig klikker du på knappen Forhåndsvis eller Lagre for malen.

Legge til innebyggingskode i Shopify-bloggen din

Merk

Kjøp-knappen oppretter en separat handlekurv. Hvis kunden går til en annen side i nettbutikken, vises ikke lenger varen i handlekurven. Du kan redigere kjøp-knappen for å gå direkte til kassen.

Merk:

Trinn:

Datamaskin

1. Fra Shopify-administratoren går du til Nettbutikk > Blogginnlegg.
2. Fra siden Blogginnlegg klikker du tittelen til et blogginnlegg du vil redigere, eller klikker Legg til blogginnlegg for å opprette et nytt.
3. I Skriv blogginnlegget-seksjonen klikker du Vis HTML i redigeringsprogrammet for rik tekst.
4. Lim inn innbyggingskoden i hovedtekstfeltet.
5. Klikk på Lagre.

iPhone

1. Trykk på …-knappen fra Shopify-appen.
2. I Salgskanaler-seksjonen trykker du på Nettbutikk.
3. Trykk på Blogginnlegg.

Android

1. Trykk på …-knappen fra Shopify-appen.
2. I Salgskanaler-seksjonen trykker du på Nettbutikk.
3. Trykk på Blogginnlegg.

Legge til innebyggingskode i Squarespace

Advarsel

Noen avanserte tilpasninger i Squarespace er temaspesifikke. Disse tilpasningene støttes ikke av Shopify.

Du kan legge til en innebyggingskode på individuelle innlegg i Squarespace og til menyene på hjemmesiden din. I noen tilfeller vil du kanskje gjøre begge deler. Du kan for eksempel bygge inn en handlekurv på hjemmesiden for å motta kjøp fra Kjøp-knapper du bygger inn i individuelle innlegg.

Trinn:

1. Fra Squarespace instrumentbordet åpner du nettstedet der du vil legge til den innebygde koden.
2. Finn elementet på siden der du ønsker at kjøp-knappen eller den innebygde handlekurven skal vises, flytt musepekeren over området Sideinnhold og klikk på REDIGER.
3. Klikk på det punktet der du vil legge til den innebygde koden.
4. I Mer-seksjonen av dialogboksen Innholdsblokker klikker du på Kode.
5. Kopier den innebygde koden fra dialogen Bygg inn kode i Shopify-administrator.
6. Fra Squarespace-instrumentbordet limer du inn den innebygde koden i kode-dialogboksen. Sørg for at tekstfeltet stilles inn til å motta HTML.
7. Klikk på Legg til i Rediger kode-dialogboksen.
8. Klikk på LAGRE på nytt i sideredigeringsprogrammet. Fordi Squarespace deaktiverer JavaScript i instrumentbordet, må du forhåndsvise siden separat for å sjekke at kjøp-knappen eller den innebygde handlekurven fungerer.

Hvis du fullfører trinnene og kjøp-knappen ikke lastes inn, kan det hende du må deaktivere Ajax-innlasting. For mer informasjon kan du se Aktivere eller deaktivere Ajax.

Merk

Hvis du legger til en innebygd handlekurv i en meny på Squarespace-startsiden, mottar den bestillinger fra kjøp-knapper du integrerer i enkeltinnlegg.

Legge til innebyggingskode i Wix

Etter at du har opprettet en Kjøp-knapp eller en samling i Shopify-administrator, kan du legge den til på Wix-nettstedet ved hjelp av Wix redaktør for nettsted.

Advarsel

Hvis du ønsker å integrere kjøp-knapper for flere produkter eller samlinger, må du redigere innbyggingskoden før du legger den til i Wix-kontrollprogrammet for HTML-kode. Hvis du integrerer mer enn én kjøp-knapp på Wix-nettstedet uten å redigere innbyggingskoden, vil kunder som forsøker å kjøpe mer enn ett produkt ha separate handlekurver for hvert produkt.

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

Trinn:

1. Fra Shopify-administrator oppretter du en Kjøp-knapp for et produkt eller en samling, og kopierer deretter den innebygde koden.

Merk

Når du oppretter en kjøp-knapp for et Wix-nettsted, kan du ikke bruke alternativet Omdiriger i samme fane på grunn av begrensninger hos Wix.

1. Finn nettstedet du vil redigere i Mine områder-delen op Wix-kontoen din, og klikk deretter på Rediger nettsted.
2. I Wix-nettsteds redigereren klikker du på +-knappen og deretter på Mer.
3. Klikk på HTML-kode for å legge til et HTML code-kontrollprogram på siden.
4. Klikk på Angi kode.
5. I HTML-innstillinger-dialogen limer du inn den innebygde koden for Kjøp-knappen eller -samlingen i Legg til koden her-feltet. Deretter klikker du på Oppdater.
6. Endre størrelsen på kontrollprogrammet for HTML-kode slik at det passer innholdet. Hvis du oppretter en integrering med en handlekurv, må du sikre at handlekurvfanen vises på riktig sted.
7. Når du er ferdig, klikker du på Lagre.

Bygg inn flere produkter eller samlinger

Trinn:

1. Fra Shopify-administrator oppretter du en Kjøp-knapp for et produkt eller en samling, og kopierer deretter den innebygde koden.
2. Lim inn koden i et koderedigeringsprogram eller i Wix' nettstedsbygger. Gjenta de to første trinnene til du har opprettet de Kjøp-knappene du trenger.
3. Rediger innebyggingskodene for å sikre at de vises i riktig innretting.
4. Finn nettstedet du vil redigere i Mine områder-delen op Wix-kontoen din, og klikk deretter på Rediger nettsted.
5. I Wix-nettsteds redigereren klikker du på +-knappen og deretter på Mer.
6. Klikk på HTML-kode for å legge til et HTML code-kontrollprogram på siden.
7. Klikk på Angi kode.
8. I HTML-innstillinger-dialogen limer du inn den redigerte koden for Kjøp-knappene i Legg til koden her-feltet. Deretter klikker du Oppdater.
9. Endre størrelsen på kontrollprogrammet for HTML-kode slik at det passer innholdet. Hvis du oppretter en integrering med en handlekurv, må du sikre at handlekurvfanen vises på riktig sted.
10. Når du er ferdig, klikker du på Lagre.

Merk

Trenger du hjelp med Wix Editor? Kontakt Wix-brukerstøtte.

Legg til skripttagger separat

Noen plattformer (som Unbounce) krever at du limer inn innbyggingskodens <script>-tagger i sideoverskriften, og resten av innbyggingskoden på siden der du ønsker at kjøp-knappen skal vises.

Trinn:

1. Fra den innebygde koden 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>

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

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

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