Uaktualnij stronę realizacji zakupu online

Możesz dostosować swoją realizację zakupu online, aby rozszerzyć swoją markę, zmienić obsługę wiadomości, prezentować oferty i wprowadzić inne ulepszenia w zakresie obsługi klienta. Aby upewnić się, że dostosowania są zgodne ze zmianami wprowadzanymi przez Shopify, musisz okresowo aktualizować stronę realizacji zakupu.

Aby przygotować się do tego uaktualnienia, musisz wykonać następujące czynności:

  1. Wyświetl podgląd nowej strony realizacji zakupu i przetestuj środowisko realizacji zakupu widoczne dla klienta. W zależności od przeprowadzonych dostosowań strony realizacji zakupu uaktualnienie może wymagać wprowadzenia zmian w pliku checkout.liquid.
  2. Gdy będziesz zadowolony(-a) ze zmian, uaktualnij swój sklep, aby korzystać z nowej realizacji zakupu Shopify.

Wyświetl podgląd strony realizacji zakupu i sprawdź jej poprawność

Przed uaktualnieniem sklepu w celu korzystania z nowej wersji realizacji zakupu nie zapomnij wyświetlić podglądu zmian.

Kroki:

  1. W panelu administracyjnym Shopify przejdź do strony Uaktualnienie realizacji zakupu, a następnie kliknij Podgląd realizacji zakupu.
  2. Wybierz bieżący temat z listy, a następnie kliknij Podgląd.
  3. Utwórz testowy proces realizacji zakupu, przechodząc przez proces realizacji zakupu jako klient.

Jeśli podczas tych testów znajdziesz jakiekolwiek błędy, niektóre z dostosowań realizacji zakupu mogą powodować konflikt z ulepszeniami w nowej wersji. Jeśli tak jest, musisz wprowadzić zmiany w pliku checkout.liquid przed uaktualnieniem.

Rozwiązywanie błędów

Kroki:

  1. W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.
  2. Kliknij opcję Czynności, a następnie Duplikuj.
  3. W opcji Więcej szablonów znajdź swój zduplikowany szablon, a następnie kliknij opcje: Czynności > Edytuj kod. Wprowadź zmiany i przetestuj je przy użyciu tej zduplikowanej i niepublikowanej wersji szablonu.
  1. Otwórz plik checkout.liquid.

  2. Wyświetl podgląd pliku checkout.liquid z powielonego szablonu przy użyciu nowej realizacji zakupu Shopify:

    1. Przejdź do strony Uaktualnianie realizacji zakupu w panelu administracyjnym Shopify, kliknij opcję Podgląd realizacji zakupu, a następnie wybierz zduplikowany szablon.
    2. Wykonaj zamówienia testowe w podglądzie.

Jeśli pojawią się błędy lub problemy dotyczące wyglądu strony realizacji zakupu, należy edytować plik checkout.liquid, aby je rozwiązać.

Uaktualnienie do nowej strony realizacji zakupu Shopify

Uaktualnienie strony realizacji zakupu to proces dwuetapowy, który wymaga uaktualnienia strony realizacji zakupu Shopify i zastąpienia bieżącego, opublikowanego szablonu zduplikowaną kopią, która zawiera zmiany.

Na dokonanie uaktualnienia wybierz porę dnia, w której nie są prowadzone intensywne prace (np. wcześnie rano, późny wieczór lub weekend), aby zminimalizować potencjalne zakłócenia.

Kroki:

  1. Na stronie Uaktualnienie strony realizacji zakupu kliknij opcję Uaktualnij stronę realizacji zakupu (przycisk ten znajduje się na dole strony).

  2. Jeśli napotkano błędy podczas pierwszego podglądu szablonu, najpierw upewnij się, że zostały one rozwiązane (zob. Rozwiązywanie błędów powyżej). Następnie opublikuj zaktualizowany powielony szablon:

    1. W opcji Sklep online kliknij Szablony.
    2. Znajdź zduplikowany szablon i kliknij opcje: Czynność > Publikuj.

Strona realizacji zakupu jest uaktualniona, a zduplikowany szablon jest teraz bieżącym szablonem.

Nowości w zakresie realizacji zakupu Shopify

Nowa wersja realizacji zakupu Shopify zawiera następujące zmiany i nowe funkcje:

Subskrypcje

Do strony realizacji zakupu Shopify dodano wiele sekcji, dzięki którym możesz oferować produkty subskrypcyjne przy zachowaniu swoich dostosowań strony realizacji zakupu. Sekcje te umożliwią Ci sprzedawanie produktów subskrypcyjnych i przetwarzanie okresowych płatności bezpośrednio na stronie realizacji zakupu Shopify.

Po zakończeniu uaktualniania funkcji realizacji zakupu możesz oferować subskrypcje, dodając aplikację subskrypcyjną ze sklepu Shopify App Store, lub stworzyć niestandardową aplikację z nowymi interfejsami API dla subskrypcji.

Dowiedz się więcej o subskrypcjach w Centrum Pomocy Shopify.

  • Gdy subskrypcje są włączone, metody wysyłki używane na potrzeby subskrypcji są wyświetlane oddzielnie od metod stosowanych przypadku zakupów jednorazowych.
  • .product_description_variant Span.product_description_selling_plan pojawia się jako dodatkowa właściwość pozycji, jeśli istnieje subskrypcja związana z produktem.
  • Opłata cykliczna z towarzyszącą etykietką narzędzia pojawia się pod sumą w podsumowaniu zamówienia.
  • Opcje wysyłki subskrypcji są wyświetlane, gdy zamówienie zawiera produkt subskrypcyjny.

Sprzedaż droższych produktów

W sklepie Shopify App Store dostępne są nowe aplikacje obsługujące sprzedaż droższych produktów, które można wykorzystać po zakupie dokonanym przez klienta. Aplikacje prezentują klientom oferty po dokonaniu przez nich zakupu bezpośrednio na stronie realizacji zakupu Shopify i modyfikują złożone zamówienie, aby uwzględnić sprzedany droższy produkt bez ponownego wprowadzania informacji dotyczących rozliczenia lub wysyłki.

To uaktualnienie strony realizacji zakupu obejmuje zmiany w plikach realizacji zakupu, które umożliwiają pozakupową sprzedaż droższych produktów na dostosowanej stronie realizacji zakupu.

Dowiedz się więcej o sprzedaży droższych produktów po zakupie.

  • Gdy prawidłowa aplikacja do obsługi pozakupowej zostanie zainstalowana w panelu administracyjnym Shopify, klienci będą otrzymywać oferty po dokonaniu zakupu.

Dawanie napiwków podczas realizacji zakupu

Opcji napiwków można użyć, aby umożliwić klientom uwzględnienie napiwku w zamówieniu online, lub aby zamiast napiwków przyjmować darowizny. Po włączeniu opcji napiwków na etapie realizacji zakupu Metoda płatności pojawia się sekcja Dodaj napiwek. Sekcja Dodaj napiwek zawiera trzy wstępnie wybrane opcje napiwków dodatkowo oprócz pola wprowadzania niestandardowej kwoty napiwku.

Dowiedz się więcej o oferowaniu opcji napiwków.

  • Po włączeniu opcji napiwków na etapie realizacji zakupu Metoda płatności pojawia się sekcja Dodaj napiwek.

Odbiór i dostawa lokalna

Lokalny odbiór i dostawa to nowe metody dostawy, które umożliwiają klientom odbieranie zamówień lokalnie. Gdy te metody dostawy są włączone, klienci mogą wybrać lokalny odbiór lub dostawę na etapie realizacji zakupu dotyczącym wysyłki.

Dowiedz się, jak włączyć lokalny odbiór i lokalną dostawę.

  • Dodatkowe pola dotyczące dostawy lokalnej pojawiają się, gdy lokalna dostawa jest włączona i została wybrana przez klienta.
  • Jeśli włączony jest odbiór lokalny, sekcja metody dostawy jest wyświetlana klientowi na stronie Informacje w kasie. Jeśli wysyłka jest niedostępna, wyświetlane są tylko informacje o odbiorze.
  • Metody dostawy są wyświetlane jako oddzielne karty. - Po wybraniu opcji Wyślij klienci są proszeni o podanie informacji o wysyłce. Po kliknięciu przycisku Przejdź do wysyłki wyświetlane są dostępne metody wysyłki.

    • Po wybraniu opcji Odbierz wyświetla się listę lokalizacji odbioru. Klienci klikają przycisk dla wybranej lokalizacji odbioru, a następnie opcję Przejdź do płatności.
  • Jeśli klienci wybiorą opcję Odbierz na etapie realizacji zakupu Wysyłka, informacje o wysyłce nie zostaną zebrane. Klienci muszą wprowadzić informacje rozliczeniowe na etapie realizacji zakupu Płatność.

  • Instrukcje dotyczące dostawy lokalnej pojawiają się na stronie statusu zamówienia. Można je edytować, wybierając w panelu administracyjnym Shopify menu: Ustawienia > Wysyłka i dostawa. W sekcji Odbiór lokalny znajdź lokalizację, którą chcesz edytować, i kliknij opcję Zarządzaj.

  • Strona statusu zamówienia została zaktualizowana tak, by wyświetlany był na niej postęp w realizacji dostaw i odbiorów. Wiadomości wyświetlają się, gdy: - zamówienie zostało przygotowane i jest gotowe do dostarczenia.

    • dostawa została zrealizowana. Ta wiadomość zawiera również link do ponownego zamówienia tych samych pozycji.
    • zamówienie do odbioru zostało potwierdzone ze wskazaniem, że klient otrzyma wiadomość e-mail, gdy będzie ono gotowe do odbioru.
    • zamówienie do odbioru jest gotowe do odbioru.
    • zamówienie do odbioru zostało odebrane.

Dodatkowe pola międzynarodowe

W niektórych krajach obowiązują specyficzne przepisy dotyczące wysyłki, których musisz przestrzegać, aby Twoje przesyłki dotarły do Twoich klientów. W przypadku krajów ze specyficznymi przepisami dotyczącymi wysyłki dostępne są teraz dodatkowe pola. Te nowe pola pojawiają się na etapie realizacji zakupu Metoda płatności.

Dowiedz się więcej o dodatkowych polach międzynarodowych.

  • Dodatkowe pola realizacji zakupu są wyświetlane tylko klientom w Brazylii, Korei Południowej, Włoszech i Chinach.

Przycisk Śledź zamówienie za pomocą aplikacji Shop

Przycisk Śledź zamówienie za pomocą aplikacji Shop w statusie zamówienia i na stronach z podziękowaniem został zaktualizowany i ma teraz nowy wygląd.

Dowiedz się więcej o aplikacji Shop.

  • Dodano przycisk tekstowy, który zachęca klientów do śledzenia zakupów w aplikacji Shop.
  • Dodano parametry umożliwiające wyświetlanie śledzenia procesu Shop Pay.
  • Renderowanie dla przycisku Śledź zamówienie za pomocą aplikacji Shop w następujących przypadkach: - próba dostarczenia
    • potwierdzenie
    • dostarczono
    • nie powiodło się
    • w drodze
    • wysyłka niemożliwa
    • wydano do doręczenia

Aktualizacje strony statusu zamówienia

Dokonano kilku aktualizacji strony statusu zamówienia.

  • Dla informacji o karcie prezentowej utworzono dedykowaną sekcję, która wyświetla się po zakupie karty prezentowej.
  • Dodano informacje o subskrypcji.
  • Klasa icon-svg--align-text-bottom została usunięta.
  • data-step="thank-you" zmieniono na data-step="thank_you". Jeśli wykorzystujesz ten atrybut do identyfikacji strony realizacji zakupu, na której znajduje się klient, zamiast niego używaj obiektu JavaScript Shopify.Checkout.page.
  • Dodano kartę statusu zamówienia.

Ogólne zmiany pliku

  • div.content-box__row ma teraz role="table".
  • Jeśli klient znajduje się na etapie podziękowania i ma pakiet QR, dodaje się show_qr.js.
  • Dodano kontrolę, aby upewnić się, że klient ma dostęp do strony realizacji zakupu.
  • Karty prezentowe są teraz wyświetlane z checkouts/order_status/gift_cards.
  • Kierunek danych kontaktowych został ustalony za pomocą enforce_content_directionality.
  • Informacje o wysyłce zostały przeniesione do checkouts/web/checkouts/contact_information/pickup.
  • Możliwe jest teraz wyświetlanie wielu linii wysyłki na pasku bocznym podsumowania zamówienia.
  • tr.total-line będą wyświetlane tylko w przypadku istnienia zaktualizowanych sum.
  • Obsługiwane są teraz ogólne linie płatności.
  • Możliwa jest teraz zmiana waluty podczas realizacji zakupu.
  • #payment-gateway-subfields ma teraz klasy: - .radio-wrapper content-box__row .content-box__row--secondary

    • .card-fields-container
  • Etykietka narzędzia karty kredytowej została skorygowana i jest teraz w div.field__icon.

  • Etykieta Aria została usunięta z pełnego opisu stawek wysyłki.

  • Pola formularza stawek wysyłki zostały przeniesione do checkouts/web/checkouts/shipping_method/shipping_rate_additional_fields.

Szkielety/Statusy ładowania

Statusy ładowania stron realizacji zakupu zostały zaktualizowane tak, by podczas ładowania stron dodawane były widoczne szkielety lub selektywnie ukrywane były niektóre elementy, aż do zakończenia ładowania. Zmiany te optymalizują czas ładowania.

  • Obiekty ukryte podczas ładowania: - del.total-recap__original-price

    • .total-line__price span.payment-due__currency
    • span.order-summary__emphasis
  • Obiekty, które wyświetlają szkielet podczas ładowania: - Span.total-recap__final-price

    • .product__price del.order-summary__small-text
    • .product__price del.order-summary__emphasis
    • .total-line__price span.payment-due__price
    • .total-line__price span.order-summary__emphasis
    • .total-line__price span.visually-hidden
    • .total-line__price.total-line--subtotal span.order-summary__emphasis

Komunikaty o błędach

Do funkcji realizacji zakupu dodano nowe komunikaty o błędach.

  • W polu adresu dodano ostrzeżenie dotyczące numeru domu.
  • Ostrzeżenie informujące, że nie ma dostępnych stawek wysyłki dla koszyka, miejsca docelowego lub kraju, zostało podzielone na dwa różne komunikaty ostrzegawcze: jeden komunikat ostrzegawczy informujący, że nie ma dostępnych stawek dla koszyka lub miejsca docelowego i oddzielne ostrzeżenie informujące, że nie ma dostępnych stawek dla danego kraju.
  • Do strony realizacji zakupu dodano baner ostrzegawczy wyświetlany podczas próby dokonania zakupu w sklepie w fazie rozwoju.
  • Dodano powiadomienie, które pojawia się, gdy klientowi nie zostanie naliczona płatność podczas realizacji zakupu.
  • Dodano baner ostrzegawczy informujący o błędzie zmiany uwierzytelnienia.
  • Dodano komunikat o błędzie wyświetlany w przypadku niedostępności metod wysyłki na etapie realizacji zakupu Wysyłka.

Zmiany atrybutów danych

Usunięto skrypt trekkie z następujących obiektów:

  • Continue_shipping_button
  • Get_shipping_updates_button
  • Shipping_updates_handle_field
  • Shipping_updates_submit_button
  • Change_shipping_address_link
  • breadcrumb_cart_link
  • apply_discount_button
  • Have_an_account_login_link
  • Email_or_phone_field
  • Email_field
  • buyer_accepts_marketing_field
  • Change_billing_address_link
  • Change_contact_method_link
  • Change_payment_method_link
  • Change_pickup_method_link
  • Change_shipping_address_link
  • Pola wprowadzania na stronie realizacji zakupu: - {type}_address_field
    • {type}_firstname_field
    • {type}_lastname_field
    • {type}_company_field
    • {type}_address1_google_autocomplete_field
    • {type}_address1_field
    • {type}_address2_field
    • {type}_city_field
    • {type}_country_field
    • {type}_province_field
    • {type}_zip_google_autocomplete_field
    • {type}_phone_field

Ulepszenia dostępności

Wprowadzono kilka zmian do realizacji zakupu, aby zapewnić zgodność ze standardami dostępności stron internetowych. Ułatwia to nawigację w procesie realizacji zakupu klientom korzystającym z technologii ułatwień dostępu, takich jak czytniki ekranu.

  • Dodano role="list" w ul dla: - u.breadcrumb

    • ul.payment-method-list
    • ul.os-timeline
    • ul.policy-list
  • Etykietka narzędzia została usunięta z aria-labelledby w telephone_field.

  • W aplikacji Shop etykieta wejściowa została zmieniona, aby wskazywała na telefon.

  • Dodano nagłówki h3 podczas oczekiwania na podatki.

  • Dodano nagłówki h3 podczas przekierowywania.

  • Podczas ładowania metod wysyłki tag p został zmieniony na tag h3.

  • Funkcja autouzupełniania odnosi się teraz do mobile tel zamiast phone.

  • Zaktualizowano div[data-processing-order], dodając role="region".

  • Zaktualizowano div[data-announce-change] o: - dodano role="region"

    • ustawiono aria-labelledby, aby pasował do identyfikatora elementu nagłówka
    • ustawiono aria-describedby aby pasował do identyfikatora elementu kontenera zawartości
  • Zaktualizowano div.content-box blank-slate o: - dodano role="region"

    • ustawiono aria-labelledby, aby pasował do identyfikatora elementu nagłówka
  • Siatka Express Checkout została ulepszona w celu wykorzystania elementów ul i li zamiast div.

  • Zaktualizowano Podsumowanie zamówienia: - większa przejrzystość ceny sprzedaży i ceny regularnej

    • zmieniono zakres na tag dl
    • zmieniono tag del na tagi dt i dd.
  • Zaktualizowano szczegółów metod płatności: - span.radio__label__accessory zmieniono na div.radio__label__accessory

    • span.visually-hidden zmieniono na h3.visually-hidden
    • span.payment-icon-list__more zmieniono na li.payment-icon-list__more
    • span.content-box__small-text zmieniono na small.content-box__small-text

Powiązane linki

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

Wypróbuj za darmo