Bantuan
Masuk

Menampilkan Shop Promise di halaman produk Anda

Lencana Shop Promise ditampilkan di samping tanggal pengiriman dan di halaman produk untuk pengiriman yang memenuhi syarat yang diperkirakan akan sampai di dalam negeri di Amerika Serikat dalam lima hari kalender atau kurang. Lencana ini memberi tahu pelanggan bahwa pesanan mereka mencakup pengiriman yang cepat dan andal.

Setelah Anda mengaktifkan Shop Promise, Anda harus membuka halaman produk menggunakan editor tema untuk mengonfirmasi bahwa lencana Shop Promise ditampilkan dengan benar.

Jika lencana tidak ditampilkan dengan benar, pastikan toko Anda telah mengaktifkan tombol checkout dipercepat. Anda juga memiliki beberapa opsi untuk menyesuaikan tampilan lencana Shop Promise.

Di halaman ini

Memosisikan modul Shop Promise secara manual

Jika Anda terbiasa membaca dan mengedit kode tema, Anda dapat mengidentifikasi tempat untuk membuat perubahan dan memperbarui halaman produk.

Mengidentifikasi tempat untuk membuat perubahan

Kode untuk modul Shop Promise perlu disertakan dalam formulir produk di halaman produk, yang akan terlihat seperti {%- form 'product', product -%}. Modul Shop Promise dapat ditemukan di berbagai lokasi, tergantung pada tema Anda. Berikut ini adalah lokasi umum:

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

Perbarui halaman produk

Langkah-langkah:

Desktop

  1. Dari admin Shopify Anda, buka Toko Online > Tema.

  2. Temukan tema yang ingin Anda edit, klik ikon Menu horizontal untuk membuka menu tindakan, lalu klik Edit kode.

  3. Buka file yang relevan.

  4. Temukan baris yang berisi {%- if block.settings.show_dynamic_checkout -%} atau {{ form | payment_button }}.

  5. Buat baris baru tepat di bawah {%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%} dan tempelkan yang berikut ini di baris tersebut:

<div class="delivery-promise__promise-container"></div>
  1. Klik Simpan.

Hasilnya akan terlihat seperti berikut:

{%- if block.settings.show_dynamic_checkout -%}
  {{ form | payment_button }}
{%- endif -%}
<div class="delivery-promise__promise-container"></div>
Seluler

  1. Dari aplikasi Shopify, ketuk ikon Menu.

  2. Di bagian Saluran penjualan, ketuk Toko Online > Kelola semua tema.

  3. Temukan tema yang ingin Anda edit, ketuk tombol ... untuk membuka menu tindakan, lalu ketuk Edit kode.

  4. Buka file yang relevan.

  5. Temukan baris yang berisi {%- if block.settings.show_dynamic_checkout -%} atau {{ form | payment_button }}.

  6. Buat baris baru tepat di bawah {%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%} dan tempelkan yang berikut ini di baris tersebut:

<div class="delivery-promise__promise-container"></div>
  1. Ketuk Simpan atau ✓.

Hasilnya akan terlihat seperti berikut:

{%- if block.settings.show_dynamic_checkout -%}
  {{ form | payment_button }}
{%- endif -%}
<div class="delivery-promise__promise-container"></div>

Mengganti tema modul Shop Promise secara manual

Modul Shop Promise memiliki tema gelap dan terang. Modul ini secara otomatis menggunakan tema mana pun yang memiliki rasio kontras tertinggi dibandingkan dengan warna latar belakang halaman produk.

Jika Anda terbiasa membaca dan mengedit kode tema, Anda dapat mengganti tema modul yang dipilih dengan menambahkan atribut data ke elemen anchor yang digunakan untuk memosisikan modul Shop Promise secara manual.

Sebelum Anda membuat perubahan apa pun, duplikasikan tema Anda dan edit tema duplikatnya, agar Anda dapat dengan mudah mengembalikan perubahan apa pun.

Langkah-langkah:

Desktop
  1. Ikuti petunjuk untuk memosisikan modul Shop Promise secara manual di halaman produk Anda, lalu biarkan editor tema tetap terbuka.
  2. Tambahkan atribut data tema ke elemen anchor yang baru Anda buat, yang diatur ke dark atau light.
  3. Klik Simpan.

Hasilnya akan terlihat seperti salah satu dari yang berikut:

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

Atau

<div class="delivery-promise__promise-container" data-theme="light"></div>
Seluler
  1. Ikuti petunjuk untuk memosisikan modul Shop Promise secara manual di halaman produk Anda, lalu biarkan editor tema tetap terbuka.
  2. Tambahkan atribut data tema ke elemen anchor yang baru Anda buat, yang diatur ke dark atau light.
  3. Ketuk Simpan.

Hasilnya akan terlihat seperti salah satu dari yang berikut:

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

Atau

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

Menambahkan HTML kustom atau liquid untuk modul Promise

Jika tema Anda mendukung blok kustom, maka Anda dapat menggunakan blok Liquid Kustom untuk menambahkan modul Shop Promise ke halaman produk Anda tanpa mengedit kode tema.

Langkah-langkah untuk menambahkan modul Promise menggunakan blok Liquid kustom:

Desktop

  1. Dari admin Shopify Anda, buka Toko Online > Tema.

  2. Temukan tema yang ingin Anda edit, lalu klik Edit tema.

  3. Buka halaman produk menggunakan pemilih templat di bilah menu atas.

  4. Di menu sidebar, temukan bagian Informasi produk.

  5. Klik Tambahkan blok dan pilih Liquid kustom dari daftar blok yang tersedia.

  6. Di kolom teks Liquid kustom, tempelkan kode berikut:

<div class="delivery-promise__promise-container"></div>
  1. Posisikan blok dengan menyeretnya ke lokasi yang diinginkan, biasanya di bawah blok tombol Beli.
  2. Klik Simpan untuk menerapkan perubahan Anda.

Jika Anda ingin menentukan preferensi tema (gelap atau terang), gunakan salah satu dari yang berikut sebagai gantinya:

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

Atau

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

  1. Dari aplikasi Shopify, ketuk ikon Menu.

  2. Di bagian Saluran penjualan, ketuk Toko Online > Kelola semua tema.

  3. Temukan tema aktif Anda dan ketuk Edit tema.

  4. Buka halaman produk menggunakan pemilih templat di bagian atas.

  5. Ketuk bagian Informasi produk.

  6. Ketuk Tambah blok, lalu pilih Liquid Kustom.

  7. Di kolom teks Liquid kustom, tempelkan kode berikut:

<div class="delivery-promise__promise-container"></div>
  1. Posisikan blok dengan menyeretnya ke lokasi yang diinginkan, biasanya di bawah blok tombol Beli.
  2. Ketuk Simpan untuk menerapkan perubahan.

Jika Anda ingin menentukan preferensi tema (gelap atau terang), gunakan salah satu dari yang berikut sebagai gantinya:

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

Atau

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

Bahasa yang didukung untuk lencana Shop Promise

Lihat tabel berikut untuk mengetahui bahasa yang dapat digunakan untuk menampilkan lencana Shop Promise. Jika bahasa toko Anda tidak didukung, lencana Shop Promise akan ditampilkan dalam bahasa Inggris.

Bahasa yang dapat digunakan untuk menampilkan lencana Shop Promise.
Tionghoa (Sederhana)Tionghoa (Tradisional)KroasiaCeko
DenmarkBelandaInggrisFinlandia
PrancisJermanYunaniHindi
HungariaIndonesiaItaliaJepang
KoreaLituaniaMelayuNorwegia (Bokmål)
PolandiaPortugis (Brasil)Portugis (Portugal)Rumania
RusiaSlowakiaSloveniaSpanyol
SwediaThaiTurkiVietnam