Wyświetlanie znaczka Shop Promise na stronie produktu

Znaczek Shop Promise jest wyświetlany obok dat dostawy i na stronach produktów dla kwalifikujących się dostaw, których termin realizacji na terenie Stanów Zjednoczonych wynosi maksymalnie pięć dni kalendarzowych. Ten znaczek informuje klientów, że dostawa ich zamówienia jest szybka i niezawodna.

Po zatwierdzeniu wniosku o aktywację usługi Shop Promise przejdź do strony produktu za pomocą edytora szablonów, aby potwierdzić, że znaczek Shop Promise wyświetla się poprawnie.

Jeśli znaczek nie wyświetla się poprawnie, musisz ręcznie umieścić moduł Shop Promise.

Ręcznie umieść moduł Shop Promise

Jeśli potrafisz odczytywać i edytować kod szablonu, możesz ustalić miejsca, w których należy wprowadzić zmiany i zaktualizować stronę produktu.

Ustal, gdzie należy wprowadzić zmiany

Kod modułu Shop Promise musi zostać uwzględniony w formularzu produktu na stronie produktu. Powinien wyglądać mniej więcej tak: {%- form 'product', product -%}. Moduł Shop Promise można znajdować się w różnych lokalizacjach w zależności od szablonu. Oto typowe lokalizacje:

  • main-product.liquid
  • product-form.liquid
  • product-template.liquid
  • product.liquid

Zaktualizuj stronę produktu

Kroki:

Pulpit
  1. W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.
  2. Znajdź temat, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij Edytuj kod.
  3. Otwórz odpowiedni plik.
  4. Znajdź linię zawierającą {%- if block.settings.show_dynamic_checkout -%} lub {{ form | payment_button }}.
  5. Utwórz nową linię bezpośrednio pod {%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%} i wklej w tej linii następujące informacje:
<div class="delivery-promise__promise-container"></div>
  1. 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>
iPhone
  1. W aplikacji Shopify naciśnij przycisk .
  2. W sekcji Kanały sprzedaży naciśnij Sklep online.
  3. Naciśnij Zarządzaj szablonami.
  4. Znajdź temat, który chcesz edytować, naciśnij przycisk ..., aby otworzyć menu czynności, a następnie naciśnij Edytuj kod.
  5. Otwórz odpowiedni plik.
  6. Znajdź linię zawierającą {%- if block.settings.show_dynamic_checkout -%} lub {{ form | payment_button }}.
  7. Utwórz nową linię bezpośrednio pod {%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%} i wklej w tej linii następujące informacje:
<div class="delivery-promise__promise-container"></div>
  1. Naciśnij 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>
Android
  1. W aplikacji Shopify naciśnij przycisk .
  2. W sekcji Kanały sprzedaży naciśnij Sklep online.
  3. Naciśnij Zarządzaj szablonami.
  4. Znajdź temat, który chcesz edytować, naciśnij przycisk ..., aby otworzyć menu czynności, a następnie naciśnij Edytuj kod.
  5. Otwórz odpowiedni plik.
  6. Znajdź linię zawierającą {%- if block.settings.show_dynamic_checkout -%} lub {{ form | payment_button }}.
  7. Utwórz nową linię bezpośrednio pod {%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%} i wklej w tej linii następujące informacje:
<div class="delivery-promise__promise-container"></div>
  1. Naciśnij 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>

Ręcznie zastąp szablon modułu Shop Promise

Moduł Shop Promise ma ciemny i jasny szablon. Moduł automatycznie wykorzystuje szablon, który ma najwyższy współczynnik kontrastu w porównaniu z kolorem tła strony produktu.

Jeśli nie masz problemu z czytaniem i edytowaniem kodu szablonu, możesz zastąpić wybrany szablon modułu, dodając atrybut danych do elementu zakotwiczenia używanego do ręcznego ustawiania modułu Shop Promise.

Zanim dokonasz zmian, zduplikuj swój szablon i edytuj go, aby zmiany można było łatwo cofnąć.

Kroki:

Pulpit
  1. Postępuj zgodnie z instrukcjami, aby ręcznie umieścić moduł Shop Promise na stronie produktu, a następnie pozostaw edytor szablonów otwarty.
  2. Dodaj atrybut danych szablonu do nowo utworzonego elementu zakotwiczonego, ustawionego jako ciemny lub jasny.
  3. Kliknij opcję Zapisz.

Wynik powinien wyglądać podobnie do:

<div class="delivery-promise__promise-container" data-theme="dark"></div>

Lub

<div class="delivery-promise__promise-container" data-theme="light"></div>
iPhone
  1. Postępuj zgodnie z instrukcjami, aby ręcznie umieścić moduł Shop Promise na stronie produktu, a następnie pozostaw edytor szablonów otwarty.
  2. Dodaj atrybut danych szablonu do nowo utworzonego elementu zakotwiczonego, ustawionego jako ciemny lub jasny.
  3. Naciśnij Zapisz.

Wynik powinien wyglądać podobnie do:

<div class="delivery-promise__promise-container" data-theme="dark"></div>

Lub

<div class="delivery-promise__promise-container" data-theme="light"></div>
Android
  1. Postępuj zgodnie z instrukcjami, aby ręcznie umieścić moduł Shop Promise na stronie produktu, a następnie pozostaw edytor szablonów otwarty.
  2. Dodaj atrybut danych szablonu do nowo utworzonego elementu zakotwiczonego, ustawionego jako ciemny lub jasny.
  3. Naciśnij Zapisz.

Wynik powinien wyglądać podobnie do:

<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 w module Promise

Jeśli Twój szablon obsługuje bloki niestandardowe, możesz użyć niestandardowego bloku Liquid, aby dodać moduł Shop Promise do strony produktu bez edytowania kodu szablonu.

Kroki dodawania modułu Promise przy użyciu niestandardowego bloku Liquid:

Pulpit
  1. W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.
  2. Wyszukaj szablon, który chcesz edytować, a następnie kliknij opcję Dostosuj.
  3. Przejdź do strony produktu za pomocą selektora szablonów na górnym pasku menu.
  4. W menu paska bocznego znajdź sekcję Informacje o produkcie.
  5. Kliknij Dodaj blok i wybierz Niestandardowy Liquid z listy dostępnych bloków.
  6. W polu tekstowym niestandardowego kodu Liquid wklej następujący kod:
<div class="delivery-promise__promise-container"></div>
  1. Umieść blok, przeciągając go w żądane miejsce, zazwyczaj poniżej bloku przycisków zakupu.
  2. Kliknij Zapisz, aby wprowadzić zmiany.

Jeśli chcesz określić preferencje szablonu (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>
iPhone
  1. W aplikacji Shopify naciśnij Sklep online.
  2. Naciśnij Zarządzaj szablonami.
  3. Znajdź swój aktywny szablon i naciśnij Dostosuj.
  4. Przejdź do strony produktu za pomocą selektora szablonów u góry.
  5. Naciśnij sekcję Informacje o produkcie.
  6. Naciśnij Dodaj blok i wybierz opcję Niestandardowy Liquid.
  7. W polu tekstowym niestandardowego kodu Liquid wklej następujący kod:
<div class="delivery-promise__promise-container"></div>
  1. Umieść blok, przeciągając go w żądane miejsce, zazwyczaj poniżej bloku przycisków zakupu.
  2. Naciśnij opcję Zapisz, aby zastosować zmiany.

Jeśli chcesz określić preferencje szablonu (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>
Android
  1. W aplikacji Shopify naciśnij Sklep online.
  2. Naciśnij Zarządzaj szablonami.
  3. Znajdź swój aktywny szablon i naciśnij Dostosuj.
  4. Przejdź do strony produktu za pomocą selektora szablonów u góry.
  5. Naciśnij sekcję Informacje o produkcie.
  6. Naciśnij Dodaj blok i wybierz opcję Niestandardowy Liquid.
  7. W polu tekstowym niestandardowego kodu Liquid wklej następujący kod:
<div class="delivery-promise__promise-container"></div>
  1. Umieść blok, przeciągając go w żądane miejsce, zazwyczaj poniżej bloku przycisków zakupu.
  2. Naciśnij opcję Zapisz, aby zastosować zmiany.

Jeśli chcesz określić preferencje szablonu (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>
Nie możesz znaleźć odpowiedzi, których szukasz? Jesteśmy tutaj, aby Ci pomóc.