Pridanie kódu tlačidla Kúpiť do HTML

Po vytvorení tlačidla Kúpiť v administrátorovi Shopify ho môžete pridať na svoje vlastné webové sídlo alebo blog.

Proces pridávania kódu na vloženie do zdrojového HTML vášho webového sídla sa trochu líši v závislosti od toho, ako a kde sa majú tlačidlo Kúpiť a košík zobrazovať, od vašej publikačnej platformy a niekedy aj od témy, ktorú na danej platforme používate.

Pridanie kódu na vloženie do platformy WordPress

Kód na vloženie môžete pridať do príspevkov, stránok alebo šablón na svojom webovom sídle v platforme WordPress.

Pridanie kódu na vloženie do príspevku alebo stránky v platforme WordPress

1. V službe Shopify vytvorte tlačidlo Kúpiť a skopírujte jeho kód na vloženie z dialógového okna Kód na vloženie (alebo kliknite na Skopírovať kód na vloženie do schránky).
2. Z panela platformy WordPress prejdite na svoje príspevky alebo stránky.
3. Vytvorte nový príspevok alebo stránku, prípadne upravte existujúce.
4. V editore blokov kliknite na tlačidlo +, vyhľadajte položku Vlastné HTML a potom kliknutím vložte blok Vlastné HTML.
5. Vložte kód na vloženie do textového poľa, ktoré poskytuje blok Vlastné HTML.
6. Voliteľné: Presuňte blok Vlastné HTML alebo si zobrazte ukážku toho, ako sa bude tlačidlo Kúpiť zobrazovať:
   • Ak chcete presunúť blok Vlastné HTML, kliknite na tlačidlá šípok na lište nástrojov bloku alebo potiahnite blok na nové miesto.
   • Ak si chcete zobraziť ukážku tlačidla Kúpiť, kliknite na Náhľad na lište nástrojov bloku.
7. Po dokončení kliknite na tlačidlo Uložiť koncept, Náhľad alebo Publikovať pri danom príspevku alebo stránke.

Ak vo WordPresse používate doplnok Classic Editor, namiesto bloku Vlastné HTML prepnite textový editor z režimu Visual do režimu Text a kód na vloženie prilepte do editora.

Pridanie kódu na vloženie do šablóny vo WordPresse

Ak vaša téma vo WordPresse podporuje editor webového sídla, vložené tlačidlo Kúpiť môžete pridať do ktorejkoľvek šablóny na svojom webovom sídle.

Postup:

1. V službe Shopify vytvorte tlačidlo Kúpiť a skopírujte jeho kód na vloženie z dialógového okna Kód na vloženie (alebo kliknite na Skopírovať kód na vloženie do schránky).
2. Na paneli WordPress prejdite na možnosť Editor.
3. Prejdite na šablónu, ktorú chcete upraviť.
4. V editore blokov kliknite na tlačidlo +, vyhľadajte položku Vlastné HTML a potom kliknutím vložte blok Vlastné HTML.
5. Vložte kód na vloženie do textového poľa, ktoré poskytuje blok Vlastné HTML.
6. Voliteľné: Presuňte blok Vlastné HTML alebo si zobrazte ukážku toho, ako sa bude tlačidlo Kúpiť zobrazovať:
   • Ak chcete presunúť blok Vlastné HTML, kliknite na tlačidlá šípok na lište nástrojov bloku alebo potiahnite blok na nové miesto.
   • Ak si chcete zobraziť ukážku tlačidla Kúpiť, kliknite na Náhľad na lište nástrojov bloku.
7. Po dokončení kliknite pri šablóne na tlačidlo Náhľad alebo Uložiť.

Pridanie kódu na vloženie do blogu na platforme Shopify

Postup:

Pridanie kódu na vloženie do služby Squarespace

Kód na vloženie môžete pridať do jednotlivých príspevkov v Squarespace a do ponúk na domovskej stránke. V niektorých prípadoch možno budete chcieť urobiť oboje. Na domovskú stránku môžete napríklad vložiť košík, do ktorého sa budú prijímať nákupy z tlačidiel Kúpiť vložených do jednotlivých príspevkov.

Postup:

1. Na paneli Squarespace otvorte webovú stránku, na ktorú chcete pridať kód na vloženie.
2. Nájdite prvok na stránke, kde sa má zobraziť tlačidlo Kúpiť alebo vložený košík, presuňte kurzor na oblasť Page Content a kliknite na EDIT.
3. Kliknite na miesto vloženia, kam chcete pridať kód na vloženie.
4. V dialógovom okne Content Blocks v sekcii More kliknite na Code.
5. V administrátorovi Shopify skopírujte kód na vloženie z dialógového okna Kód na vloženie.
6. Na paneli Squarespace prilepte kód na vloženie do dialógového okna CODE. Uistite sa, že textové pole je nastavené na príjem formátu HTML.
7. V dialógovom okne EDIT CODE kliknite na APPLY.
8. V editore stránky znova kliknite na SAVE. Keďže platforma Squarespace má na svojom paneli vypnutý JavaScript, musíte si zobraziť samostatný náhľad stránky a overiť tak, či tlačidlo Kúpiť alebo vložený košík funguje.

Ak ste dokončili všetky kroky a tlačidlo Kúpiť sa nenačítava, možno budete musieť vypnúť načítavanie cez Ajax. Ďalšie podrobnosti nájdete v časti Zapnutie alebo vypnutie technológie Ajax.

Pridanie kódu na vloženie do platformy Wix

Po vytvorení tlačidla Kúpiť alebo kolekcie v administrátorovi Shopify ho môžete pridať na svoje webové sídlo Wix pomocou editora webových stránok platformy Wix.

Ak chcete na svojom webovom sídle Wix zobraziť viac ako jeden produkt bez úpravy kódu na vloženie, môžete vložiť kolekciu. Pre produkty, ktoré chcete zobraziť na platforme Wix, si môžete vytvoriť novú kolekciu v administrátorovi Shopify.

Postup:

1. V administrátorovi Shopify vytvorte tlačidlo Kúpiť pre produkt alebo kolekciu a následne skopírujte jeho kód na vloženie.

2. Vo svojom účte Wix nájdite v sekcii My Sites webové sídlo, ktoré chcete upraviť, a následne kliknite na Edit Site.
3. V editore webových stránok platformy Wix kliknite na tlačidlo + a potom kliknite na More.
4. Kliknutím na HTML Code pridáte na stránku widget s kódom HTML.
5. Kliknite na Enter Code.
6. V dialógovom okne HTML Settings prilepte kód na vloženie tlačidla Kúpiť alebo kolekcie do poľa Add your code here a potom kliknite na Update.
7. Zmeňte veľkosť widgetu s kódom HTML tak, aby sa do neho zmestil obsah. Ak vytvárate vloženie s košíkom, uistite sa, že karta košíka sa zobrazuje na správnom mieste.
8. Po dokončení kliknite na Save.

Vloženie viacerých produktov alebo kolekcií

Postup:

1. V administrátorovi Shopify vytvorte tlačidlo Kúpiť pre produkt alebo kolekciu a následne skopírujte jeho kód na vloženie.
2. Prilepte kód do editora kódu alebo do nástroja na tvorbu webových stránok platformy Wix. Opakujte prvé dva kroky, kým nevytvoríte všetky potrebné tlačidlá Kúpiť.
3. Upravte kódy na vloženie, aby ste sa uistili, že sa zobrazujú v správnom zarovnaní.
4. Vo svojom účte Wix nájdite v sekcii My Sites webové sídlo, ktoré chcete upraviť, a následne kliknite na Edit Site.
5. V editore webových stránok platformy Wix kliknite na tlačidlo + a potom kliknite na More.
6. Kliknutím na HTML Code pridáte na stránku widget s kódom HTML.
7. Kliknite na Enter Code.
8. V dialógovom okne Nastavenia HTML vložte upravený kód pre tlačidlá Kúpiť do poľa Sem pridajte svoj kód a potom kliknite na Aktualizovať.
9. Zmeňte veľkosť widgetu s kódom HTML tak, aby sa do neho zmestil obsah. Ak vytvárate vloženie s košíkom, uistite sa, že karta košíka sa zobrazuje na správnom mieste.
10. Po dokončení kliknite na Save.

Samostatné pridanie tagov skriptu

Niektoré platformy (napríklad Unbounce) vyžadujú, aby ste tagy <script> z kódu na vloženie vložili do hlavičky stránky a zvyšok kódu na vloženie na stránku, na ktorej chcete zobraziť tlačidlo Kúpiť.

Postup:

1. Z kódu na vloženie vygenerovaného pri vytvorení tlačidla Kúpiť skopírujte prvok <div> aj prvok <script>. Napríklad:

<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. Otvorte hlavičku stránky webového sídla, kam chcete vložiť tlačidlo Kúpiť.
3. Vložte celý prvok <script> do hlavičky stránky.
4. Uložte zmeny.
5. Z pôvodného kódu na vloženie vo svojom administrátorovi Shopify skopírujte len prvok <div>. Napríklad:

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

6. Otvorte stránku na svojom webovom sídle, kam chcete vložiť tlačidlo Kúpiť.
7. Vložte úryvok kódu <div> na stránku.
8. Uložte zmeny.