Wyświetlanie Shop Promise na stronie produktu
Znaczek Shop Promise jest wyświetlany obok dat dostawy i na stronach produktów w przypadku kwalifikujących się dostaw, których szacowany czas doręczenia na terenie Stanów Zjednoczonych wynosi pięć lub mniej dni kalendarzowych. Ten znaczek informuje klientów, że ich zamówienie obejmuje szybką i niezawodną dostawę.
Po aktywacji Shop Promise przejdź do strony produktu za pomocą edytora szablonów, aby potwierdzić, że znaczek Shop Promise jest wyświetlany prawidłowo.
Jeśli znaczek nie jest wyświetlany prawidłowo, upewnij się, że w Twoim sklepie są aktywowane przyciski przyspieszonej realizacji zakupu. Masz również kilka opcji dostosowania sposobu wyświetlania znaczka Shop Promise.
Na tej stronie
Ręczne pozycjonowanie modułu Shop Promise
Jeśli potrafisz czytać i edytować kod szablonu, możesz zidentyfikować miejsca, w których należy wprowadzić zmiany i zaktualizować stronę produktu.
Zidentyfikuj miejsca, w których należy wprowadzić zmiany
Kod modułu Shop Promise musi być zawarty w formularzu produktu na stronie produktu, co powinno wyglądać podobnie do {%- form 'product', product -%}. Moduł Shop Promise można znaleźć w różnych lokalizacjach w zależności od szablonu. Poniżej przedstawiono typowe lokalizacje:
main-product.liquidproduct-form.liquidproduct-template.liquidproduct.liquid
Zaktualizuj stronę produktu
Kroki:
Komputer stacjonarny
W panelu administracyjnym Shopify przejdź do opcji Sklep online > Szablony.
Znajdź szablon, który chcesz edytować, kliknij ikonę
, aby otworzyć menu czynności, a następnie kliknij opcję Edytuj kod.
Otwórz odpowiedni plik.
Znajdź wiersz zawierający
{%- if block.settings.show_dynamic_checkout -%}lub{{ form | payment_button }}.Utwórz nowy wiersz bezpośrednio pod wierszem
{%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%}i wklej w nim następujący kod:
<div class="delivery-promise__promise-container"></div>- Kliknij opcję Zapisz.
Wynik powinien być podobny do następującego:
{%- if block.settings.show_dynamic_checkout -%}
{{ form | payment_button }}
{%- endif -%}
<div class="delivery-promise__promise-container"></div>Urządzenia mobilne
W Shopify app naciśnij ikonę
.
W sekcji Kanały sprzedaży naciśnij Sklep online > Zarządzaj wszystkimi motywami.
Znajdź szablon, który chcesz edytować, naciśnij przycisk …, aby otworzyć menu czynności, a następnie naciśnij opcję Edytuj kod.
Otwórz odpowiedni plik.
Znajdź wiersz zawierający
{%- if block.settings.show_dynamic_checkout -%}lub{{ form | payment_button }}.Utwórz nowy wiersz bezpośrednio pod wierszem
{%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%}i wklej w nim następujący kod:
<div class="delivery-promise__promise-container"></div>- Naciśnij przycisk Zapisz lub ✓.
Wynik powinien być podobny do następującego:
{%- if block.settings.show_dynamic_checkout -%}
{{ form | payment_button }}
{%- endif -%}
<div class="delivery-promise__promise-container"></div>Ręczne nadpisywanie motywu modułu Shop Promise
Moduł Shop Promise ma ciemny i jasny motyw. Moduł automatycznie używa motywu o wyższym współczynniku kontrastu w porównaniu z kolorem tła strony produktu.
Jeśli potrafisz czytać i edytować kod szablonu, możesz nadpisać wybrany motyw modułu, dodając atrybut danych do elementu kotwicy używanego do ręcznego pozycjonowania modułu Shop Promise.
Przed wprowadzeniem jakichkolwiek zmian utwórz duplikat szablonu i edytuj duplikat, aby móc łatwo cofnąć wszelkie zmiany.
Kroki:
Komputer stacjonarny
- Postępuj zgodnie z instrukcjami, aby ręcznie spozycjonować moduł Shop Promise na stronie produktu, a następnie pozostaw edytor szablonów otwarty.
- Do nowo utworzonego elementu kotwicy dodaj atrybut danych motywu, ustawiając go na dark lub light.
- Kliknij opcję Zapisz.
Wynik powinien być podobny do jednego z następujących:
<div class="delivery-promise__promise-container" data-theme="dark"></div>Lub
<div class="delivery-promise__promise-container" data-theme="light"></div>Urządzenia mobilne
- Postępuj zgodnie z instrukcjami, aby ręcznie spozycjonować moduł Shop Promise na stronie produktu, a następnie pozostaw edytor szablonów otwarty.
- Do nowo utworzonego elementu kotwicy dodaj atrybut danych motywu, ustawiając go na dark lub light.
- Naciśnij Zapisz.
Wynik powinien być podobny do jednego z następujących:
<div class="delivery-promise__promise-container" data-theme="dark"></div>Lub
<div class="delivery-promise__promise-container" data-theme="light"></div>Dodawanie niestandardowego kodu HTML lub Liquid dla modułu Promise
Jeśli Twój szablon obsługuje bloki niestandardowe, możesz użyć bloku niestandardowego Liquid, aby dodać moduł Shop Promise do strony produktu bez edytowania kodu szablonu.
Kroki, aby dodać moduł Promise za pomocą bloku niestandardowego Liquid:
Komputer stacjonarny
W panelu administracyjnym Shopify przejdź do opcji Sklep online > Szablony.
Znajdź szablon, który chcesz edytować, i kliknij Edytuj szablon.
Przejdź do strony produktu za pomocą selektora szablonów na górnym pasku menu.
W menu paska bocznego znajdź sekcję Informacje o produkcie.
Kliknij Dodaj blok i wybierz niestandardowy Liquid z listy dostępnych bloków.
W polu tekstowym niestandardowego Liquid wklej następujący kod:
<div class="delivery-promise__promise-container"></div>- Umieść blok w wybranym miejscu, przeciągając go, zazwyczaj pod blokiem z przyciskami zakupu.
- Kliknij Zapisz, aby zastosować zmiany.
Jeśli chcesz określić preferencję motywu (ciemny lub jasny), użyj jednego z poniższych kodów:
<div class="delivery-promise__promise-container" data-theme="dark"></div>Lub
<div class="delivery-promise__promise-container" data-theme="light"></div>Urządzenia mobilne
W Shopify app naciśnij ikonę
.
W sekcji Kanały sprzedaży naciśnij Sklep online > Zarządzaj wszystkimi motywami.
Znajdź swój aktywny szablon i naciśnij opcję Edytuj szablon.
Przejdź do strony produktu, używając selektora szablonów u góry strony.
Naciśnij sekcję Informacje o produkcie.
Naciśnij opcję Dodaj blok i wybierz Custom Liquid.
W polu tekstowym niestandardowego Liquid wklej następujący kod:
<div class="delivery-promise__promise-container"></div>- Umieść blok w wybranym miejscu, przeciągając go, zazwyczaj pod blokiem z przyciskami zakupu.
- Naciśnij przycisk Zapisz, aby zastosować zmiany.
Jeśli chcesz określić preferencję motywu (ciemny lub jasny), użyj jednego z poniższych kodów:
<div class="delivery-promise__promise-container" data-theme="dark"></div>Lub
<div class="delivery-promise__promise-container" data-theme="light"></div>Obsługiwane języki dla znaczka Shop Promise
W poniższej tabeli przedstawiono języki, w których może być wyświetlany znaczek Shop Promise. Jeśli język sklepu nie jest obsługiwany, znaczek Shop Promise jest wyświetlany w języku angielskim.
| Chiński (uproszczony) | Chiński (tradycyjny) | Chorwacki | Czeski |
| Duński | Holenderski | Angielski | Fiński |
| Francuski | Niemiecki | Grecki | Hindi |
| Węgierski | Indonezyjski | Włoski | Japoński |
| Koreański | Litewski | Malajski | Norweski (Bokmål) |
| Polski | Portugalski (Brazylia) | Portugalski (Portugalia) | Rumuński |
| Rosyjski | Słowacki | Słoweński | Hiszpański |
| Szwedzki | Tajski | Turecki | Wietnamski |