Dodawanie kodu przycisku zakupu do HTML

Po utworzeniu przycisku zakupu w panelu administracyjnym Shopify możesz go dodać do własnej strony internetowej lub bloga.

Proces dodawania kodu osadzania do kodu źródłowego HTML Twojej witryny jest nieco inny w zależności od tego, w jaki sposób i w jakim miejscu mają się pojawiać przyciski zakupu i koszyk na platformie publikowania, a czasem w szablonie, którego używasz na tej platformie.

Dodawanie kodu osadzania do bloga WordPress.org

Możesz dodać kod osadzania do pojedynczych postów i do menu na stronie głównej swojego bloga WordPress.org.

Dodawanie kodu osadzania do posta WordPress

  1. W Shopify utwórz przycisk zakupu i skopiuj jego kod osadzania z okna dialogowego Kod osadzania (lub kliknij opcję Kopiuj kod osadzania do schowka).
  2. Z pulpitu WordPress przejdź do swoich postów.
  3. Utwórz nowy post lub Edytuj istniejący post, w którym chcesz wyświetlić przycisk zakupu.
  4. W zależności od wersji WordPress, której używasz, wykonaj jedną z następujących czynności:

    • Zmień edytor tekstu w poście z trybu Wizualny na Tekstowy.
    • W edytorze bloku kliknij przycisk +, Wyszukaj Custom HTML, a następnie kliknij niestandardowy kod HTML.
  5. Wklej kod osadzania do pola tekstowego w miejscu, w którym ma się pojawić przycisk zakupu lub kolekcja.

  6. Po zakończeniu kliknij Zapisz wersję roboczą, Podgląd lub Publikuj.

Dodawanie kodu osadzania w menu WordPress

Kroki:

  1. Na pulpicie WordPress kliknij opcję Wygląd.
  2. Kliknij przycisk Dostosuj, aby otworzyć Edytor szablonów, a następnie kliknij Widżety.
  3. Kliknij nazwę obszaru, w którym chcesz dodać przycisk zakupu lub niestandardowy kod koszyka.
  4. Otwórz istniejący widżet Tekst lub kliknij Dodaj widżet, a następnie kliknij Tekst.
  5. Wklej kod osadzania do głównego pola tekstowego w widżecie Tekst.
  6. Zapisz zmiany.

Dodawanie kodu osadzania do bloga Shopify

Kroki:

  1. Na stronie Posty na blogu kliknij tytuł posta na blogu, który chcesz edytować lub kliknij Dodaj post na blogu, aby utworzyć nowy. 4. W sekcji Zapisz post na blogu kliknij opcję Wyświetl HTML w edytorze tekstu sformatowanego.
    Wyświetl przycisk edytora HTML
    5. Wklej swój kod osadzania w głównym polu tekstowym. 6. Kliknij Zapisz.

Dodawanie kodu osadzania do Squarespace

Możesz dodać kod osadzania do pojedynczych postów w Squarespace oraz do menu na stronie głównej. W niektórych przypadkach można wykonać obie czynności. Na przykład, możesz osadzić koszyk na stronie głównej, aby otrzymywać zakupy za pomocą przycisków zakupu osadzonych w pojedynczych postach.

Kroki:

  1. Na pulpicie Squarespace otwórz stronę internetową, na której chcesz dodać kod osadzania.
  2. Znajdź element na stronie, na której ma się pojawić przycisk zakupu lub osadzony koszyk, przenieś kursor na obszar Zawartość strony, a następnie kliknij Edytuj.
  3. Kliknij punkt wstawiania, w którym chcesz dodać kod osadzania.
  4. W sekcji Więcej okna dialogowego Bloki zawartości kliknij opcję Kod.
  5. W panelu administracyjnym Shopify skopiuj kod osadzania z okna dialogowego Kod osadzania.
  6. Na pulpicie Squarespace wklej kod osadzania do okna dialogowego Kod. Upewnij się, że pole tekstowe jest ustawione na odbiór HTML.
  7. Kliknij Zastosuj w oknie dialogowym Edytuj kod.
  8. Kliknij opcję Zapisz ponownie w edytorze stron. Ponieważ Squarespace wyłącza JavaScript na pulpicie, musisz osobno wyświetlić podgląd swojej strony, aby zobaczyć przycisk zakupu lub osadzony koszyk, który dodałeś(-aś).

Jeśli wykonasz kroki i przycisk zakupu nie ładuje się, być może musisz wyłączyć ładowanie AJAX. Aby wyświetlić więcej szczegółów, przejdź do opcji Włącz lub wyłącz AJAX.

Dodawanie kodu osadzania do Wix

Po utworzeniu przycisku zakupu lub kolekcji w panelu administracyjnym Shopify możesz dodać go do strony internetowej Wix za pomocą edytora stron internetowych Wix.

Jeśli chcesz wyświetlić więcej niż jeden produkt na stronie internetowej Wix bez edycji kodu osadzania, możesz osadzić kolekcję. Możesz utworzyć nową kolekcję w swoim panelu administracyjnym Shopify dla produktów, które chcesz wyświetlić na Wix.

Kroki:

  1. W panelu administracyjnym Shopify Utwórz przycisk zakupu dla produktu lub kolekcji, a następnie skopiuj jego kod osadzania.
  1. Na koncie Wix znajdź witrynę, którą chcesz edytować w sekcji Moje witryny, a następnie kliknij Edytuj witrynę.
  2. W edytorze stron internetowych Wix kliknij przycisk +, a następnie kliknij Więcej.
  3. Kliknij Kod HTML, aby dodać widżet kodu HTML do strony.
  4. Kliknij Wprowadź kod.
  5. W oknie dialogowym Ustawienia HTML wklej kod osadzania dla przycisku zakupu lub kolekcji w polu Dodaj swój kod tutaj, a następnie kliknij Aktualizuj.
  6. Zmień rozmiar widżetu kodu HTML, aby pasował do jego zawartości. Jeśli tworzysz osadzony z koszykiem, upewnij się, że karta koszyka pojawia się we właściwym miejscu.
  7. Po zakończeniu kliknij Zapisz.

Osadzanie wielu produktów lub kolekcji

Kroki:

  1. W panelu administracyjnym Shopify Utwórz przycisk zakupu dla produktu lub kolekcji, a następnie skopiuj jego kod osadzania.
  2. Wklej kod do edytora kodu lub kreatora witryn Wix. Powtórz dwa pierwsze kroki, dopóki nie utworzysz przycisków zakupu, których potrzebujesz.
  3. Edytuj kody osadzania, aby upewnić się, że są wyświetlane we właściwym ustawieniu.
  4. Na koncie Wix znajdź witrynę, którą chcesz edytować w sekcji Moje witryny, a następnie kliknij Edytuj witrynę.
  5. W edytorze stron internetowych Wix kliknij przycisk +, a następnie kliknij Więcej.
  6. Kliknij Kod HTML, aby dodać widżet kodu HTML do strony.
  7. Kliknij Wprowadź kod.
  8. W oknie dialogowym Ustawienia HTML wklej edytowany kod dla przycisków zakupu w polu Dodaj swój kod tutaj, a następnie kliknij opcję Aktualizuj.
  9. Zmień rozmiar widżetu kodu HTML, aby pasował do jego zawartości. Jeśli tworzysz osadzony z koszykiem, upewnij się, że karta koszyka pojawia się we właściwym miejscu.
  10. Po zakończeniu kliknij Zapisz.

Dodawanie osobno tagów skryptu

Niektóre platformy (np. Unbounce) wymagają wklejenia tagów kodu osadzania <script> w nagłówku strony oraz pozostałej części kodu osadzania na stronie, na której ma pojawić się przycisk zakupu.

Kroki:

  1. Z kodu osadzania, który jest generowany po utworzeniu przycisku zakupu, skopiuj zarówno element <div>, jak i element <script>. Na przykład:
<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. Otwórz nagłówek strony dla strony internetowej, na której chcesz osadzić przycisk zakupu.

  2. Wklej cały element <script> w nagłówku strony.

  3. Zapisz zmiany.

  4. Z oryginalnego kodu osadzania w panelu administracyjnym Shopify skopiuj tylko element <div>. Na przykład:

<div id='product-component-2dd3c8704e6'></div>
  1. Otwórz stronę w swojej witrynie, w której chcesz osadzić przycisk zakupu.

  2. Wklej fragment kodu <div> na stronę.

  3. Zapisz zmiany.

Gotowy(-a) do rozpoczęcia sprzedaży za pomocą Shopify?

Wypróbuj za darmo