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 innbyggingskode i WordPress
Du kan legge til innbyggingskode i innlegg, sider eller maler på WordPress-nettstedet.
Legg til innbyggingskode i et WordPress-innlegg eller på en side
- 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).
- Gå til innlegg eller sider fra WordPress-instrumentbordet.
- Du kan enten opprette et nytt innlegg eller en ny side, eller redigere et eksisterende.
- Klikk +-knappen i redigeringsverktøyet for blokker, søk etter Egendefinert HTML og klikk for å sette inn en blokk med egendefinert HTML.
- Lim inn innbyggingskode i tekstfeltet for blokken Egendefinert HTML.
-
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.
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:
- 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).
- Gå til Redigeringsverktøyet i WordPress-instrumentbordet.
- Gå til malen du vil redigere.
- Klikk +-knappen i redigeringsverktøyet for blokker, søk etter Egendefinert HTML og klikk for å sette inn en blokk med egendefinert HTML.
- Lim inn innbyggingskode i tekstfeltet for blokken Egendefinert HTML.
-
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.
Når du er ferdig klikker du på knappen Forhåndsvis eller Lagre for malen.
Legge til innebyggingskode i Shopify-bloggen din
Steg:
- Fra Shopify-administratoren går du til Nettbutikk > Blogginnlegg.
- Fra Shopify-appen trykker du på Butikk.
- I Salgskanal-seksjonen trykker du på Nettbutikk.
- Trykk på Blogginnlegg.
- Fra Shopify-appen trykker du på Butikk.
- I Salgskanal-seksjonen trykker du på Nettbutikk.
- Trykk på Blogginnlegg.
- Fra siden Blogginnlegg klikker du tittelen til et blogginnlegg du vil redigere, eller klikker Legg til blogginnlegg for å opprette et nytt.
- I Skriv blogginnlegget-seksjonen klikker du Vis HTML i redigeringsprogrammet for rik tekst.
- Lim inn innbyggingskoden i hovedtekstfeltet.
- 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.
Steg:
- Fra Squarespace instrumentbordet åpner du nettstedet der du vil legge til den innebygde koden.
- 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.
- Klikk på det punktet der du vil legge til den innebygde koden.
- I Mer-seksjonen av dialogboksen Innholdsblokker klikker du på Kode.
- Kopier den innebygde koden fra dialogen Bygg inn kode i Shopify-administrator.
- Fra Squarespace-instrumentbordet limer du inn den innebygde koden i kode-dialogboksen. Sørg for at tekstfeltet stilles inn til å motta HTML.
- Klikk på Legg til i Rediger kode-dialogboksen.
- 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.
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:
- Fra Shopify-administrator oppretter du en Kjøp-knapp for et produkt eller en samling, og kopierer deretter den innebygde koden.
- Finn nettstedet du vil redigere i Mine områder-delen op Wix-kontoen din, og klikk deretter på Rediger nettsted.
- I Wix-nettsteds redigereren klikker du på
+
-knappen og deretter på Mer. - Klikk på HTML-kode for å legge til et HTML code-kontrollprogram på siden.
- Klikk på Angi kode.
- 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.
- 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.
- Når du er ferdig, klikker du på Lagre.
Bygg inn flere produkter eller samlinger
Steg:
- Fra Shopify-administrator oppretter du en Kjøp-knapp for et produkt eller en samling, og kopierer deretter den innebygde koden.
- 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.
- Rediger innebyggingskodene for å sikre at de vises i riktig innretting.
- Finn nettstedet du vil redigere i Mine områder-delen op Wix-kontoen din, og klikk deretter på Rediger nettsted.
- I Wix-nettsteds redigereren klikker du på
+
-knappen og deretter på Mer. - Klikk på HTML-kode for å legge til et HTML code-kontrollprogram på siden.
- Klikk på Angi kode.
- I HTML-innstillinger-dialogen limer du inn den redigerte koden for Kjøp-knappene i Legg til koden her-feltet. Deretter klikker du Oppdater.
- 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.
- 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å.
Steg:
- 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>
Åpne sideoverskriften for nettstedet der du vil bygge inn en Kjøp-knapp.
Lim inn hele
<script>
-elementet i sideoverskriften.Lagre endringene.
Fra den opprinnelige innebyggingskoden i Shopify administrator kopierer du bare
<div>
-elementet. For eksempel:
<div id='product-component-2dd3c8704e6'></div>
Åpne siden på nettstedet der du vil bygge inn en Kjøp-knapp.
Lim inn
<div>
-kodebiten på siden.Lagre endringene.