Edycja lub usuwanie przycisku zakupu lub osadzonego koszyka

Ta strona została wydrukowana dnia Apr 19, 2024. Aby zapoznać się z aktualną wersją, odwiedź https://help.shopify.com/pl/manual/online-sales-channels/buy-button/legacy-edit-delete.

Przyciski zakupu i koszyki są generowane na podstawie kodu osadzania, który dodajesz do kodu źródłowego HTML strony internetowej. Jeśli chcesz zmienić wygląd lub zachowanie przycisku lub koszyka na stronie internetowej, musisz zmienić powiązany kod osadzania.

Na tej stronie

Usuwanie przycisku zakupu, osadzonej kolekcji lub osadzonego koszyka

Aby usunąć istniejący przycisk zakupu, kolekcję lub osadzony koszyk:

  1. Otwórz kod źródłowy HTML strony internetowej zawierającej przycisk zakupu, osadzoną kolekcję lub osadzony koszyk.

  2. Usuń cały kod osadzania z kodu źródłowego HTML. Kod osadzania będzie wyglądał jak poniższy kod dla przycisku zakupu.

 

<div data-embed_type="product" data-shop="yourstorename.myshopify.com" data-product_name="Product Name" data-product_handle="product-name" data-has_image="true" data-display_size="compact" data-redirect_to="checkout" data-buy_button_text="Buy now" data-buy_button_out_of_stock_text="Out of Stock" data-buy_button_product_unavailable_text="Unavailable" data-button_background_color="7db461" data-button_text_color="ffffff" data-product_modal="false" data-product_title_color="000000" data-next_page_button_text="Next page"></div>

<script type="text/javascript">
document.getElementById(&#39;ShopifyEmbedScript&#39;) || document.write(&#39;<script type="text/javascript" src="https://widgets.shopifyapps.com/assets/widgets/embed/client.js" id="ShopifyEmbedScript">&lt;\/script&gt;&#39;);
</script><noscript><a href="https://yourstorename.myshopify.com/cart/1590898625:1" target="_blank">Kup swój produkt</a></noscript>
  1. Zapisz zmiany.

Edycja przycisku zakupu

Aby zmienić wygląd lub ustawienia istniejącego przycisku zakupu, musisz edytować zawartość jego głównego tagu div w kodzie osadzania, który pojawia się w kodzie źródłowym HTML:

 

<div data-embed_type="product" data-shop="yourstorename.myshopify.com" data-product_name="Product Name" data-product_handle="product-name" data-has_image="true" data-display_size="compact" data-redirect_to="checkout" data-buy_button_text="Buy now" data-buy_button_out_of_stock_text="Out of Stock" data-buy_button_product_unavailable_text="Unavailable" data-button_background_color="7db461" data-button_text_color="ffffff" data-product_modal="false" data-product_title_color="000000" data-next_page_button_text="Next page"></div>

Każda funkcja osadzonego przycisku zakupu jest sterowana przez oddzielny atrybut w głównym tagu div. Możesz dodawać, usuwać lub aktualizować te atrybuty bezpośrednio w kodzie źródłowym HTML.

Na przykład, jeśli chcesz, aby istniejący przycisk zakupu przekierowywał użytkownika na stronę produktu zamiast na stronę realizacji zakupu:

  1. Otwórz HTML strony zawierającej przycisk zakupu, który chcesz zmienić.

  2. Znajdź atrybut data-redirect_to w głównym tagu div kodu osadzania przycisku zakupu: 

    data-redirect_to="realizacja zakupu"

  3. Zmień wartość atrybutu na produkt 

    : data-redirect_to = "produkt"

  4. Zapisz zmiany.

Główny tag przycisku zakupu div ma wiele atrybutów, które możesz edytować:

Atrybuty tagu edytowalnego przycisku zakupu
Atrybut Wartość Domyślne
data-shop Domena myshopify (np. storename.myshopify.com) podłączona do przycisku. Twoja domena Shopify
data-product_handle Uchwyt polecanego produktu, który jest oparty na tytule produktu. Każdy z Twoich produktów ma unikalny uchwyt w Shopify. Uchwyt polecanego produktu
data-embed_type Rozróżnia pomiędzy kodem osadzania dla przycisków zakupu, osadzonymi kolekcjami i osadzonymi koszykami. Możliwe wartości to produkt, koszyk i kolekcja. produkt
data-display_size Maksymalna szerokość całego osadzenia (nie przycisku). Może być kompaktowa (230px) lub regularna (450px). Dotyczy tylko pojedynczego przycisku zakupu produktu. kompaktowa
data-has_image Niezależnie od tego, czy jest to w pełni osadzony produkt (prawda), czy tylko przycisk zakupu (fałsz). prawda
data-redirect_to Miejsce, do którego odsyła przycisk zakupu. Może być to kasa, produkt lub koszyk. Jeśli chcesz, aby przycisk zakupu łączył się z osadzonym koszykiem na tej samej stronie data-redirect_to musi być koszykiem. realizacja zakupu
data-product_modal Wyzwala wyświetlenie okna modalnego produktu po kliknięciu produktu. Jeśli wartością data-redirect_to jest okno modalne, ten atrybut musi mieć wartość prawda, w innym przypadku powinien mieć wartość fałsz. fałsz
data-buy_button_text Tekst wyświetlany na przycisku zakupu. Kup teraz
data-button_background_color Kod szesnastkowy koloru przycisku zakupu, bez #. Mogą być to trzy znaki szesnastkowe lub sześć. 7db461
data-button_text_color Kod szesnastkowy koloru tekstu na przycisku zakupu, bez #. Mogą być to trzy znaki szesnastkowe lub sześć. ffffff
data-background_color Kolor tła obszaru otaczającego przycisk zakupu. Może być to kod szesnastkowy (zgodnie z powyższymi zasadami) lub transparentny. Jeśli jest transparentny, to do zawartości osadzenia nie zastosowano wypełnienia. transparentny
data-show_product_price Nadpisz, aby określić, czy chcesz wyświetlać cenę produktu. Możliwe wartości prawda lub fałsz. Bieżąca wartość data-has_image
data-show_product_title Nadpisz, aby określić, czy chcesz wyświetlić tytuł produktu. Możliwe wartości prawda lub fałsz. Bieżąca wartość data-has_image
data-buy_button_out_of_stock_text Tekst pojawiający się po wyczerpaniu zapasu produktu. Zapas wyczerpany
data-buy_button_product_unavailable_text Tekst, który pojawia się, gdy produkt jest niedostępny. Niedostępne
data-product_title_color Kod szesnastkowy koloru tekstu tytułu produktu, bez #. Mogą być to trzy znaki szesnastkowe lub sześć. 000000

Edycja koszyka strony internetowej

Jeśli chcesz zmienić wygląd lub zachowanie koszyka strony internetowej, musisz dodać osobny fragment kodu HTML, a następnie edytować jego atrybuty. Każdy atrybut steruje inną częścią tego, jak wygląda koszyk lub jak działa.

Aby edytować Koszyk strony internetowej:

  1. Otwórz HTML strony zawierającej koszyk, który chcesz edytować.

  2. Wklej następujący kod:

<div data-sticky="true" data-embed_type="cart" data-shop="your-shop-name.myshopify.com"></div>
<script type="text/javascript">document.getElementById('ShopifyEmbedScript') || document.write('<script type="text/javascript" src="https://widgets.shopifyapps.com/assets/widgets/embed/client.js" id="ShopifyEmbedScript"><\/script>');</script>

  1. Zamień your-shop-name.myshopify.com na adres Twojego sklepu myshopify.com .

  2. Dodaj odpowiednie atrybuty do głównego tagu koszyka div i zmień go, aby uwzględnić wymaganą wartość. Na przykład, jeśli chcesz zmienić tekst, który pojawia się na górze koszyka, musisz dodać data-cart_title="your text" do głównego tagu div we fragmencie kodu. Wynik wygląda następująco:

<div data-sticky="true" data-embed_type="cart" data-shop="your-shop-name.myshopify.com" data-cart_title="your text">
  1. Po zakończeniu Zapisz zmiany.

Atrybuty koszyka

Istnieje wiele atrybutów, których można użyć do dostosowania koszyka strony internetowej:

Atrybuty dostosowywania koszyka
Atrybut Wartość Domyślne
data-shop Odpowiednia domena myshopify (np. storename.myshopify.com). Twoja domena Shopify
data-embed_type Rozróżnia pomiędzy kodem osadzania dla przycisków zakupu, osadzonymi kolekcjami i osadzonymi koszykami. Możliwe wartości to produkt, koszyk i kolekcja. koszyk
data-checkout_button_text Tekst wyświetlany na przycisku, który prowadzi do strony realizacji zakupu z poziomu koszyka (nie przycisku koszyka). Realizacja zakupu
data-button_text_color Kod szesnastkowy koloru tekstu na przycisku koszyka, bez #. Mogą być to trzy znaki szesnastkowe lub sześć. ffffff
data-button_background_color Kod szesnastkowy koloru przycisku koszyka, bez #. Mogą być to trzy znaki szesnastkowe lub sześć. 7db461
data-background_color Kolor tła obszaru otaczającego osadzony koszyk. Może być to kod szesnastkowy (zgodnie z powyższymi zasadami) lub transparentny. Jeśli jest transparentny, to do zawartości osadzenia nie zastosowano wypełnienia. transparentny
data-text_color Kod szesnastkowy koloru tekstu na przycisku koszyka, bez #. Mogą być to trzy znaki szesnastkowe lub sześć. 000000
data-accent_color Kod szesnastkowy koloru obramowania, które pojawia się wokół koszyka, bez #. Mogą być to trzy znaki szesnastkowe lub sześć. 000000
data-cart_title Tekst wyświetlany na górze osadzonego koszyka po otwarciu na stronie. Twój koszyk
data-cart_total_text Tekst wyświetlany obok łącznej kwoty w osadzonym koszyku. Suma
data-discount_notice_text Powiadomienie o rabacie, które pojawia się w osadzonym koszyku. Kody wysyłki i rabatu są dodawane przy realizacji zakupu.
data-sticky Wskazuje, czy przycisk pojawia się w znaczniku czy znajduje się z boku strony. Ostatnio wbudowane osadzone koszyki mają tę wartość ustawioną na prawda w danych wyjściowych kodu osadzania. fałsz
data-empty_cart_text Tekst, który pojawia się, jeśli koszyk jest pusty. Twój koszyk jest pusty
data-next_page_button_text Tekst wyświetlany na przycisku Następna strona w osadzonej kolekcji. Następna strona

Edycja osadzonej kolekcji

Kod osadzania dla osadzonej kolekcji zawiera dwa elementy div. Pierwszy div zawiera kod osadzonego koszyka, a drugi div zawiera kod dla osadzonych przycisków zakupu, które przyjmują formę przycisku okna modalnego dla każdego produktu w kolekcji.

Drugi element div zawiera również następujące atrybuty:

Definicja atrybutów w kodzie przycisku zakupu
Atrybut Wartość Domyślne
data-collection_handle Uchwyt polecanej kolekcji, który jest oparty na tytule kolekcji. Każda z Twoich kolekcji ma unikalny uchwyt w Shopify. Uchwyt polecanej kolekcji
data-embed_type Rozróżnia pomiędzy kodem osadzania dla przycisków zakupu, osadzonymi kolekcjami i osadzonymi koszykami. Możliwe wartości to produkt, koszyk i kolekcja. kolekcja

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

Wypróbuj za darmo