Dodawanie kodu przycisku zakupu do kodu HTML

Gdy utworzysz przycisk zakupu w panelu administracyjnym Shopify, możesz go dodać do swojej strony internetowej lub bloga.

Proces dodawania kodu osadzania do źródłowego kodu HTML Twojej strony internetowej wygląda nieco inaczej w zależności od tego, w jaki sposób i w jakim miejscu mają być wyświetlane przyciski zakupu i koszyk, a także od platformy publikacyjnej oraz, w niektórych przypadkach, od używanego na niej szablonu.

Dodawanie kodu osadzania do WordPressa

Możesz dodać kod osadzania do postów, stron lub szablonów w witrynie WordPress.

Dodaj kod osadzania do posta lub strony 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 lub stron.
3. Utwórz nowy post lub stronę albo edytuj istniejący(-ą).
4. W edytorze bloków kliknij przycisk +, wyszukaj opcję Niestandardowy kod HTML, a następnie kliknij ją, aby wstawić blok Niestandardowy kod HTML.
5. Wklej kod osadzania w polu tekstowym udostępnionym przez blok Niestandardowy kod HTML.
6. Opcjonalnie: Przesuń blok Niestandardowy kod HTML lub wyświetl podgląd przycisku zakupu:
   • Aby przesunąć blok Niestandardowy kod HTML, kliknij przyciski strzałek na pasku narzędzi bloku lub przeciągnij blok w nowe miejsce.
   • Aby wyświetlić podgląd przycisku zakupu, kliknij opcję Podgląd na pasku narzędzi bloku.
7. Gdy skończysz, kliknij przycisk Zapisz wersję roboczą, Podgląd lub Opublikuj dla swojego posta lub strony.

Jeśli korzystasz z wtyczki Classic Editor WordPressa, zamiast używać bloku Niestandardowy kod HTML, zmień edytor tekstu z trybu Wizualny na Tekstowy i wklej kod osadzania w edytorze.

Dodaj kod osadzania do szablonu WordPress

Jeśli Twój szablon WordPress obsługuje edytor witryny, możesz dodać osadzony przycisk zakupu do dowolnego szablonu witryny.

Kroki:

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. Na pulpicie WordPress przejdź do Edytora.
3. Przejdź do szablonu, który chcesz edytować.
4. W edytorze bloków kliknij przycisk +, wyszukaj opcję Niestandardowy kod HTML, a następnie kliknij ją, aby wstawić blok Niestandardowy kod HTML.
5. Wklej kod osadzania w polu tekstowym udostępnionym przez blok Niestandardowy kod HTML.
6. Opcjonalnie: Przesuń blok Niestandardowy kod HTML lub wyświetl podgląd przycisku zakupu:
   • Aby przesunąć blok Niestandardowy kod HTML, kliknij przyciski strzałek na pasku narzędzi bloku lub przeciągnij blok w nowe miejsce.
   • Aby wyświetlić podgląd przycisku zakupu, kliknij opcję Podgląd na pasku narzędzi bloku.
7. Gdy skończysz, kliknij przycisk Podgląd lub Zapisz dla szablonu.

Dodawanie kodu osadzania do bloga Shopify

Kroki:

Dodawanie kodu osadzania do Squarespace

Możesz dodawać kod osadzania do pojedynczych postów w Squarespace i do menu na stronie głównej. W niektórych przypadkach możesz zrobić jedno i drugie. Możesz na przykład osadzić koszyk na stronie głównej, aby umożliwić realizację zakupów za pomocą przycisków zakupu osadzonych w poszczególnych postach.

Kroki:

1. Z pulpitu Squarespace otwórz stronę WWW, do której chcesz dodać kod osadzania.
2. Znajdź element na stronie, w którym ma być wyświetlany przycisk zakupu lub osadzony koszyk, najedź kursorem na obszar Zawartość strony, a następnie kliknij opcję EDYTUJ.
3. Kliknij punkt wstawiania, w którym chcesz dodać kod osadzania.
4. W sekcji Więcej okna dialogowego Bloki treści kliknij opcję Kod.
5. Z panelu administracyjnego Shopify skopiuj kod osadzania z okna dialogowego Kod osadzania.
6. Na pulpicie Squarespace wklej kod osadzania do okna dialogowego KOD. Upewnij się, że dla pola tekstowego ustawiona jest opcja HTML.
7. Kliknij przycisk ZASTOSUJ w oknie dialogowym EDYTUJ KOD.
8. Kliknij ponownie ZAPISZ w edytorze stron. Ponieważ platforma Squarespace wyłącza obsługę JavaScript na swoim pulpicie, musisz wyświetlić podgląd strony oddzielnie, aby potwierdzić, że przycisk zakupu lub osadzony koszyk działają.

Jeśli wykonasz te kroki, a przycisk zakupu nie będzie się ładować, konieczne może być wyłączenie ładowania Ajax. Aby uzyskać więcej informacji, zapoznaj się z sekcją Włączanie lub wyłączanie Ajax.

Dodawanie kodu osadzania do Wix

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

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

Kroki:

1. W panelu administracyjnym Shopify utwórz przycisk zakupu dla produktu lub kolekcji, a następnie skopiuj jego kod osadzania.

2. Na koncie Wix w sekcji Moje strony znajdź witrynę, którą chcesz edytować, a następnie kliknij opcję Edytuj witrynę.
3. W edytorze stron internetowych Wix kliknij przycisk +, a następnie kliknij opcję Więcej.
4. Kliknij opcję Kod HTML, aby dodać do strony widżet kodu HTML.
5. Kliknij opcję Wprowadź kod.
6. W oknie dialogowym Ustawienia HTML wklej kod osadzania przycisku zakupu lub kolekcji w polu Dodaj swój kod tutaj, a następnie kliknij przycisk Aktualizuj.
7. Zmień rozmiar widżetu kodu HTML, aby dopasować go do jego zawartości. Jeśli tworzysz osadzenie z koszykiem, upewnij się, że karta koszyka jest wyświetlana we właściwym miejscu.
8. Gdy skończysz, kliknij przycisk 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 stron internetowych Wix. Powtarzaj pierwsze dwa kroki, aż utworzysz wszystkie potrzebne przyciski zakupu.
3. Edytuj kody osadzania, aby upewnić się, że są wyświetlane z prawidłowym wyrównaniem.
4. Na koncie Wix w sekcji Moje strony znajdź witrynę, którą chcesz edytować, a następnie kliknij opcję Edytuj witrynę.
5. W edytorze stron internetowych Wix kliknij przycisk +, a następnie kliknij opcję Więcej.
6. Kliknij opcję Kod HTML, aby dodać do strony widżet kodu HTML.
7. Kliknij opcję Wprowadź kod.
8. W oknie dialogowym Ustawienia HTML wklej edytowany kod przycisków zakupu w polu Dodaj swój kod tutaj, a następnie kliknij przycisk Aktualizuj.
9. Zmień rozmiar widżetu kodu HTML, aby dopasować go do jego zawartości. Jeśli tworzysz osadzenie z koszykiem, upewnij się, że karta koszyka jest wyświetlana we właściwym miejscu.
10. Gdy skończysz, kliknij przycisk Zapisz.

Dodawanie tagów skryptu oddzielnie

Niektóre platformy (takie jak Unbounce) wymagają wklejenia tagów <script> z kodu osadzania w nagłówku strony, a reszty kodu osadzania na stronie, na której ma być wyświetlany przycisk zakupu.

Kroki:

1. Z kodu osadzania wygenerowanego podczas tworzenia 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>

2. Otwórz nagłówek strony dla strony internetowej, na której chcesz osadzić przycisk zakupu.
3. Wklej cały element <script> w nagłówku strony.
4. Zapisz zmiany.
5. Z oryginalnego kodu osadzania w panelu administracyjnym Shopify skopiuj tylko element <div>. Na przykład:

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

6. Otwórz stronę w swojej witrynie internetowej, na której chcesz osadzić przycisk zakupu.
7. Wklej fragment kodu <div> na stronie.
8. Zapisz zmiany.