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 innebygget kode på nettstedets kilde-HTML er litt forskjellig avhengig av hvordan og hvor du vil at kjøpsknapper og handlekurven skal vises på publiseringsplattformen, og av og til på temaet du bruker på plattformen.

Merk

Hvis du trenger hjelp med å legge til innbyggingskode for publiseringsplattformer utenfor Shopify (for eksempel Squarespace eller WordPress) kan du kontakte leverandøren av nettstedet eller publiseringsplattformen direkte for brukerstøtte.

Legge til innbyggingskode i WordPress

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

Merk

Innebygde Kjøp-knapper er kompatible med selvdrevne WordPress.org-nettsteder og med enkelte abonnementer som tilbys av 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 lese 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 for egendefinert HTML 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.

Steg:

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 for egendefinert HTML 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.

Steg:

Datamaskin

1. Fra Shopify-administratoren går du til Nettbutikk > Blogginnlegg.

iPhone

1. Fra Shopify-appen trykker du på Butikk.
2. I Salgskanal-seksjonen trykker du på Nettbutikk.
3. Trykk på Blogginnlegg.

Android

1. Fra Shopify-appen trykker du på Butikk.
2. I Salgskanal-seksjonen trykker du på Nettbutikk.
3. Trykk på Blogginnlegg.

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

Legge til innebyggingskode i Squarespace

Advarsel

Noen av de avanserte tilpasningene 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.

Steg:

1. Fra Squarespace instrumentbordet åpner du nettstedet der du vil legge til den innebygde koden.
2. Finn elementet på siden der du vil at Kjøp-knappen eller den innebygde handlekurven skal vises. Flytt markøren over sideinnholdsområdet, 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 igjen i sideredigeringsprogrammet. Ettersom Squarespace deaktiverer JavaScript i instrumentbordet, må du forhåndsvise siden for seg selv for å se Kjøp-knappen eller den innebygde handlekurven du har lagt til.

Hvis du fullfører stegene og Kjøp-knappen ikke lastes inn, må du kanskje deaktivere Ajax-lastningen. For å se flere detaljer, gå til Aktiver eller deaktiver Ajax.

Merk

Hvis du legger til en innebygd handlekurv i en meny på Squarespace-hjemmesiden, mottar den bestillinger fra Kjøp-knapper som du har lagt inn på individuelle innlegg.

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 vil bygge inn 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 bygger inn mer enn én Kjøp-knapp på Wix-nettstedet uten å redigere innbyggingskoden, vil kunder som prøver å kjøpe mer enn ett produkt se en separat handlekurv 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.

Steg:

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 omdirigeringen i samme fane-alternativet på grunn av Wix' begrensninger.

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ørrelse på HTML-kode-kontrollprogrammet for å tilpasse innholdet. Hvis du oppretter en innebygging med en handlekurv, må du sørge for at handlekurv-fanen vises på riktig sted.
7. Når du er ferdig, klikker du på Lagre.

Bygg inn flere produkter eller samlinger

Steg:

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ørrelse på HTML-kode-kontrollprogrammet for å tilpasse innholdet. Hvis du oppretter en innebygging med en handlekurv, må du sørge for at handlekurv-fanen vises på riktig sted.
10. Når du er ferdig, klikker du på Lagre.

Merk

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

Legg til skripttagger separat

Noen plattformer (som Unbounce) krever at du limer inn den innebygde <script>-kodens tagger i sideoverskriften og resten av den innebygde koden på siden der du vil at Kjøp-knappen skal stå.

Steg:

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.