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.

Legge til intregrert kode i en WordPress.org-blogg

Du kan legge til integrert kode i individuelle innlegg og til menyen på hjemmesiden til WordPress.org-bloggen.

Legge til innebygget kode til et WordPress-innlegg

  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 innleggene dine i WordPress instrumentbord.
  3. Opprett et nytt innlegg eller rediger et eksisterende innlegg der du vil vise en Kjøp-knapp.
  4. Alt etter som hvilken WordPress-versjon du bruker, må du fullføre et av de følgende stegene:

    • I innlegget endrer du redigeringsprogrammet fra visuell modus til tekst-modus.
    • I blokkredigeringsprogrammet klikker du på +-knappen, søker etter Custom HTML og klikker på Egendefinert HTML.
  5. Lim inn den innebygde koden i tekstfeltet på stedet der du vil at Kjøp-knappen eller samlingen skal stå.

  6. Når du er ferdig, klikker du på Lagre utkast, Forhåndsvis eller Publiser.

Legg til innebygget kode i en WordPress-meny

Trinn:

  1. Fra WordPress' instrumentbord klikker du på Utseende.
  2. Klikk på Tilpass for å åpne temaredigereren, og klikk deretter på Kontrollprogram.
  3. Klikk på navnet til området der du vil legge til Kjøp-knappen eller den egendefinerte handlekurvkoden.
  4. Åpne et eksisterende tekst-kontrollprogram eller klikk på Legg til et kontrollprogram, og klikk deretter på Tekst.
  5. Lim inn den innebygde koden i hovedtekst-feltet i tekst-kontrollprogrammet.
  6. Lagre endringene.

Legge til innebyggingskode i Shopify-bloggen din

Trinn:

  1. Fra blogginnlegg-siden klikker du på tittelen til blogginnlegget du vil redigere eller klikker på Legg til blogginnlegg for å opprette et nytt innlegg. 4. I Skriv blogginnlegg-seksjonen klikker du på Vis HTML i redigeringsprogrammet for rik tekst.
    Vis knapp for HTML-redigering
    5. Lim inn den innebygde koden i hovedteksten. 6. Klikk på Lagre.

Legge til innebyggingskode i Squarespace

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

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.

OBS: Hvis du vil bygge inn Kjøp-knapper for flere produkter eller samlinger, må du redigere den innebygde koden før du legger den til i Wix HTML code-kontrollprogrammet. Hvis du bygger inn flere enn én Kjøp-knapp på Wix-nettstedet uten å redigere den innebygde koden, vil kunder som prøver å kjøpe flere enn ett produkt, se en separat handlekurv for hvert enkelt 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.
  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

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

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

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.

Er du klar til å begynne å selge med Shopify?

Prøv det gratis