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.

Uwaga

Jeśli potrzebujesz pomocy przy dodawaniu kodu osadzania na platformie wydawniczej poza Shopify (np. Squarespace lub WordPress), skontaktuj się bezpośrednio z dostawcą witryny internetowej lub platformą wydawniczą, aby uzyskać pomoc techniczną.

Dodawanie kodu osadzania do WordPress

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

Uwaga

Osadzone przyciski zakupu są kompatybilne z samodzielnie hostowanymi stronami WordPress.org oraz z niektórymi planami oferowanymi przez WordPress.com. Poniższe dokumenty są napisane z myślą o najnowszych wersjach WordPress. Wersja zainstalowana w Twojej witrynie może być inna. Możesz dowiedzieć się więcej o wersjach WordPress na stronie pomocy technicznej 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ące.
4. W edytorze bloków kliknij przycisk +, wyszukaj Niestandardowy HTML, a następnie kliknij, aby wstawić blok niestandardowego kodu HTML.
5. Wklej kod osadzania do pola tekstowego podanego przez blok niestandardowego kodu HTML.

6. Opcjonalnie: Przenieś blok niestandardowy HTML lub wyświetl podgląd sposobu wyświetlania przycisku zakupu:

   • Aby przenieść blok niestandardowego kodu HTML, kliknij przyciski ze strzałkami na pasku narzędzi bloku lub przeciągnij blok do nowej lokalizacji.
   • Aby wyświetlić podgląd przycisku zakupu, kliknij Podgląd na pasku narzędzi bloku.

7. Następnie kliknij przycisk Zapisz wersję roboczą, Podgląd lub Publikuj dla swojego posta lub strony.

Jeśli używasz wtyczki klasycznego edytora WordPress, zamiast używać bloku niestandardowego kodu HTML, zmień edytor tekstu z trybu wizualnego na tekstowy i wklej kod osadzania w edytorze.

Dodaj kod osadzania do szablonu WordPress

Jeśli szablon WordPress obsługuje edytor witryn, możesz dodać osadzony przycisk zakupu do dowolnego z szablonów 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 obszaru Edytor.
3. Przejdź do szablonu, który chcesz edytować.
4. W edytorze bloków kliknij przycisk +, wyszukaj Niestandardowy HTML, a następnie kliknij, aby wstawić blok niestandardowego kodu HTML.
5. Wklej kod osadzania do pola tekstowego podanego przez blok niestandardowego kodu HTML.

6. Opcjonalnie: Przenieś blok niestandardowy HTML lub wyświetl podgląd sposobu wyświetlania przycisku zakupu:

   • Aby przenieść blok niestandardowego kodu HTML, kliknij przyciski ze strzałkami na pasku narzędzi bloku lub przeciągnij blok do nowej lokalizacji.
   • Aby wyświetlić podgląd przycisku zakupu, kliknij Podgląd na pasku narzędzi bloku.

7. Następnie kliknij przycisk Podgląd lub Zapisz dla szablonu.

Dodawanie kodu osadzania do bloga Shopify

Uwaga

Przycisk zakupu tworzy osobny koszyk. Jeśli klient przejdzie do innej strony w Twoim sklepie online, pozycja nie pojawi się już w koszyku. Możesz edytować przycisk zakupu, aby przejść bezpośrednio do realizacji zakupu.

Uwaga: #### Kroki:

Pulpit

1. Z poziomu panelu administracyjnego Shopify przejdź do opcji Sklep online > Posty na blogu.
2. Na stronie Posty na blogu kliknij tytuł posta na blogu, który chcesz edytować, lub kliknij opcję Dodaj post na blogu, aby utworzyć nowy.
3. W sekcji Napisz post na blogu kliknij opcję Wyświetl HTML w edytorze tekstu sformatowanego.
4. Wklej swój kod osadzania w głównym polu tekstowym.
5. Kliknij opcję Zapisz.

iPhone

1. W aplikacji Shopify naciśnij przycisk ….
2. W sekcji Kanały sprzedaży naciśnij Sklep online.
3. Naciśnij Posty na blogu.

Android

1. W aplikacji Shopify naciśnij przycisk ….
2. W sekcji Kanały sprzedaży naciśnij Sklep online.
3. Naciśnij Posty na blogu.

## Dodawanie kodu osadzania do Squarespace

Uwaga

Niektóre zaawansowane dostosowania w Squarespace są specyficzne dla szablonu. Te dostosowania nie są obsługiwane przez Shopify.

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ę wyświetlać 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 ponownie opcję ZAPISZ w edytorze stron. Ponieważ Squarespace wyłącza JavaScript na pulpicie, musisz osobno wyświetlić podgląd swojej strony, aby potwierdzić, że przycisk zakupu lub osadzony koszyk działa prawidłowo.

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

Uwaga

Jeśli dodasz osadzony koszyk do menu na stronie głównej Squarespace, otrzyma on zamówienia z przycisków zakupu, które osadzasz w poszczególnych postach.

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.

Uwaga

Jeśli chcesz osadzić przyciski zakupu dla wielu produktów lub kolekcji, musisz edytować kod osadzania przed dodaniem go do widżetu kodu HTML Wix. Jeśli osadzisz więcej niż jeden przycisk zakupu na swojej stronie internetowej Wix bez edycji kodu osadzania, klienci próbujący kupić więcej niż jeden produkt zobaczą osobne koszyki dla każdego produktu.

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.

Uwaga

Po utworzeniu przycisku zakupu dla strony internetowej WIX nie można użyć przekierowania na tej samej karcie z powodu ograniczeń WiX.

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 osadzenie z koszykiem, upewnij się, że karta koszyka wyświetla 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 osadzenie z koszykiem, upewnij się, że karta koszyka wyświetla się we właściwym miejscu.
10. Po zakończeniu kliknij Zapisz.

Uwaga

Potrzebujesz pomocy z edytorem Wix? Skontaktuj się z Pomocą techniczną Wix.

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 się wyświetlać 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.