45 Pre-orders dan Try Before You Buy

Kabar baiknya: kalau kamu udah ngerjain 44 Subscriptions, 90% pekerjaan bab ini udah selesai. Pre-order dan TBYB pakai mekanisme selling plan yang persis sama. Yang beda cuma makna-nya, dan itu ngubah cara nampilinnya.

Pre-order dan Try Before You Buy (TBYB) itu transaksi di mana pembayaran atau pengiriman gak terjadi saat pembelian. Contoh: pembeli pre-order produk, bayar nol di muka, produk dikirim sebulan kemudian, dan baru ditagih waktu dikirim. Atau TBYB: produk dikirim dulu, pembeli nyoba seminggu, baru bayar kalau mau simpan.

Shopify nyebut keduanya deferred purchase options (opsi pembelian tertunda). Merchant nawarinnya lewat app pre-order/TBYB, dan syarat kelayakannya sama kaya langganan.

Cara Kerjanya

Sama persis dengan langganan: app bikin selling plan group (“Pre-order”) berisi selling plan yang dihubungin ke produk dan varian. Plan-nya nentuin berapa yang dibayar saat pembelian (deposit 25%, deposit tetap $50,atau$0). Merchant bisa nawarin plan opsional atau mewajibkannya (“pre-order-only” buat produk yang belum rilis).

Bedanya sama langganan ada di dua properti selling_plan dari 14 Objects Produk dan Koleksi > 3. selling_plan:

1. recurring_deliveries = false. Gak ada pengiriman berulang.
2. checkout_charge yang bisa dikonfigurasi: percentage (bayar sekian persen di muka) atau price (bayar nominal tetap). Di langganan ini selalu 100%.

Dan di alokasinya, selling_plan_allocation.checkout_charge_amount (yang dibayar sekarang) dan remaining_balance_charge_amount (sisanya) jadi bermakna.

Implementasi: Sama dengan Langganan

Lima komponennya identik dengan 44 Subscriptions:

1. Pemilih selling plan di form produk dengan hidden input name="selling_plan". Kode Liquid-nya sama persis dengan contoh di 44 Subscriptions > Pemilih di Halaman Produk, cuma badge-nya “Pre-order” atau “Try before you buy” bukan “Subscription”.
2. JavaScript selling-plans-integration.js, sama persis.
3. Tampilan di cart lewat line_item.selling_plan_allocation.selling_plan.name, dan pemilih opsional lewat /cart/change.js.
4. Checkout charge di cart, dan di sini bagian yang beda maknanya.
5. Tampilan di halaman order.

Jadi kalau theme kamu udah ndukung langganan dengan bener, produk pre-order dari app manapun otomatis jalan. Yang perlu kamu tambahin cuma tampilan checkout charge yang bener dan penyesuaian UX.

Checkout Charge: Inti Perbedaannya

Karena pre-order dan TBYB ngubah berapa yang dibayar di muka, pembeli harus tau berapa yang bakal ditagih saat checkout. Ini bukan opsional, ini soal kepercayaan dan hukum.

selling_plan.checkout_charge punya dua tipe:

1. percentage: persen dari harga penuh yang dibayar di muka. value 25 = deposit 25%. value 0 = TBYB, gak bayar apa-apa.
2. price: nominal tetap dalam subunit. value 5000 = deposit $50.

Contoh nampilin harga baris sesuai tipenya:

{% if item.selling_plan_allocation %}
  {%- assign checkout_charge = item.selling_plan_allocation.selling_plan.checkout_charge -%}
  {% if checkout_charge.value_type == 'percentage' %}
    {{ item.original_price | times: checkout_charge.value | divided_by: 100 | money }}
  {% else %}
    {{ checkout_charge.value | money }}
  {% endif %}
{% else %}
  {{ item.original_price | money }}
{% endif %}

Atau lebih singkat dan udah ngitung kuantitas:

{% if item.selling_plan_allocation %}
  <p>Total: {{ item.final_line_price | money }}</p>
  <p>Due today: {{ item.selling_plan_allocation.checkout_charge_amount | times: item.quantity | money }}</p>
  {% if item.selling_plan_allocation.remaining_balance_charge_amount > 0 %}
    <p>Due later: {{ item.selling_plan_allocation.remaining_balance_charge_amount | times: item.quantity | money }}</p>
  {% endif %}
{% else %}
  <p>{{ item.final_line_price | money }}</p>
{% endif %}

Perhatiin: di cart pre-order, kamu nampilin dua angka, harga penuh dan yang dibayar sekarang. Di langganan cuma satu karena sama.

❌ cuma nampilin deposit, pembeli gak sadar total harganya

{{ item.selling_plan_allocation.checkout_charge_amount | money }}

✅ harga penuh dan yang dibayar sekarang

{{ item.final_line_price | money }} (pay {{ item.selling_plan_allocation.checkout_charge_amount | times: item.quantity | money }} today)

Total cart juga perlu perhatian: cart.total_price itu harga penuh, bukan yang ditagih saat checkout. Kalau cart berisi pre-order dengan deposit, tampilin “Due today” yang dijumlahin dari checkout_charge_amount tiap item, di samping total, biar angka di cart cocok sama yang muncul di checkout.

Pedoman UX Pre-order dan TBYB

Prinsipnya beda dari langganan karena gak ada penghematan yang dijual, yang dijual kejelasan.

1. Prinsip

1. Jelas dan terbuka soal info penting: pembeli langsung paham opsinya dan bisa milih (“try now, pay later”).
2. Kejelasan soal uang: berapa yang dibayar saat checkout, total harga produk, kapan sisa tagihan ditagih (kalau ada), dan kapan metode pembayaran mereka ditagih.
3. Kejelasan soal waktu pengiriman: kalau bisa tanggal pasti, kalau gak, rentang kapan produk sampai, atau durasi masa percobaan TBYB.
4. Integrasi mulus sama design system theme.
5. Bahasa yang jelas dan ngacu ke syarat pembelian sebenarnya: “pre-order”, “back-order”, “TBYB”.

Info opsi pembelian sebaiknya tampil di semua tempat produk muncul (halaman produk, koleksi, pencarian, featured, quick view), selalu dengan info relevan: jumlah deposit, perkiraan tanggal pengiriman, atau lama masa percobaan.

2. Harga di Form Produk

1. Harga: price, harga penuh produk dari plan yang dipilih.
2. Badge pre-order: dari selling_plan_group.name, biar pembeli langsung tau ini pre-order, bukan beli biasa.

Pola harga yang paling penting buat dipahami: pre-order dan TBYB gak datang dengan penghematan. Pre-order sering butuh deposit, dan Shopify ngelarang keras styling yang nyaranin taktik hemat, kaya harga coret, buat nampilin harga penuh vs deposit. Harga coret berarti “diskon” di kepala pembeli, dan deposit bukan diskon. Tampilin harga penuh aja di komponen harga utama, dan tampilin deposit di tempat lain di halaman.

❌ menyesatkan, deposit kelihatan kaya harga diskon

<s>{{ variant.price | money }}</s> {{ allocation.checkout_charge_amount | money }}

✅ harga penuh, deposit dijelasin terpisah

{{ variant.price | money }}
<p class="deposit-note">Pay {{ allocation.checkout_charge_amount | money }} today, {{ allocation.remaining_balance_charge_amount | money }} when it ships</p>

Komponen harga utama harus selalu nampilin total biaya item, diupdate waktu plan atau varian berubah, dengan badge pre-order/TBYB yang sesuai biar pembeli tau ini bukan pembelian biasa.

3. Pemilih Plan

Hampir sama dengan langganan, dengan istilah yang beda:

1. Label “Purchase options” (bukan “subscriptions”), dari product.selling_plan_groups. Tampil kalau ada beli sekali + minimal satu grup, atau gak ada beli sekali tapi ada banyak grup tipe berbeda. Gak tampil kalau gak ada grup, atau plan wajib dengan satu grup (nama grup tetap tampil tanpa radio).
2. Beli sekali (requires_selling_plan == false): dipilih default, lipat grup yang gak dipilih waktu berinteraksi, nonaktifin grup yang gak tersedia buat varian, layout vertikal, pakai radio bukan tombol.
3. Nama grup (selling_plan_group.name): selalu tampil, harus nyatain manfaatnya, misalnya “Pre-order”.
4. Nilai opsi (selling_plan_option.value): jangan tulis harga pasti (“$50 deposit”) karena salah waktu mata uang berganti, persen boleh (“25% deposit”).

Jumlah opsi: ≤4 radio, >4 dropdown. Waktu varian berganti: lepas dan nonaktifin opsi yang gak tersedia, tapi jangan nonaktifin tombol submit, biarin diklik, cegah, scroll ke masalahnya, tampilin pesan.

4. Detail Plan

Deskripsi plan (selling_plan.description): tempat merchant nulis syarat pengiriman tertunda. Jangan tulis harga pasti (“$100 deposit”). Pertimbangkan link ke kebijakan pengembalian atau penagihan, karena pre-order dan TBYB punya aturan refund dan pembatalan yang lebih rumit dari pembelian biasa. Di sini juga tempat yang tepat buat tanggal pengiriman (“Ships by March 15”) atau durasi percobaan (“14-day trial”).

5. Call to Action

Tombol utama harus mencerminkan tipe pembelian walaupun cuma ada satu opsi: “Pre-order now”, “Try now, pay later”. Bedanya sama langganan: kalau toko punya accelerated checkout (43 Accelerated Checkout), ganti label di tombol accelerated buat opsi tertunda, dan biarin tombol Add to cart apa adanya. Kalau gak ada accelerated checkout, tombol Add to cart yang diganti.

6. Cart

Tiap item pre-order/TBYB nampilin detail terpenting:

1. Pre-order: pembeli harus paham tanggal pemenuhan dan info pembayaran: jumlah deposit dan pembayaran mendatang.
2. TBYB: pembeli harus lihat lama masa percobaan. Harganya harus sama dengan di halaman produk.

Elemen di halaman cart dan notifikasi cart:

1. Info plan: selling_plan.name apa adanya, tanpa daftar nilai opsi.
2. Harga: price, harga penuh, biar pembeli diingatkan total biayanya.
3. Harga saat checkout (cuma di halaman cart, bukan notifikasi): selling_plan.checkout_charge.value. Buat pre-order biasanya deposit, buat TBYB biasanya $0 biar jelas gak ada yang dibayar sekarang.

Nama plan yang bagus buat pembelian tertunda: nyatain tipe opsinya, dan jumlah deposit serta tanggal jatuh tempo biar pembeli punya referensi sepanjang perjalanan belanja. Tapi hati-hati sama aturan mata uang: nominal di nama plan gak ikut konversi, jadi kalau toko multi mata uang, pakai persen. Dan tanpa teks marketing, karena tampil di cart, checkout, order, dan admin.

7. Order

Di detail order pelanggan, sama dengan cart: info plan, harga penuh, dan harga saat checkout (checkout_charge.value), biar pembeli bisa lihat lagi berapa yang udah dibayar dan berapa sisanya.

8. Mata Uang dan Pembulatan

Sama dengan langganan: harga yang ditulis di string gak ikut konversi mata uang dan pembulatan, jadi bisa salah dan menyesatkan. Properti harga dari Liquid dan JSON udah mencerminkan mata uang sesi pembeli dan aturan pembulatan, jadi selalu ambil angka dari sana.

Ringkasan

1. Pre-order dan TBYB = pembelian tertunda: pembayaran atau pengiriman gak terjadi saat beli. Pakai selling plan yang sama dengan langganan, bedanya recurring_deliveries false dan checkout_charge bisa dikonfigurasi (percentage atau price).
2. Implementasinya identik dengan 44 Subscriptions: pemilih dengan input selling_plan, JavaScript yang sama, tampilan selling_plan.name di cart dan order.
3. Checkout charge wajib ditampilin: checkout_charge_amount (dibayar sekarang) dan remaining_balance_charge_amount (sisanya) di samping harga penuh, dan total “Due today” di cart biar cocok sama checkout.
4. Jangan pakai harga coret buat deposit vs harga penuh, itu bukan diskon. Komponen harga utama selalu harga penuh plus badge.
5. UX pemilih: label “Purchase options”, beli sekali default, radio vertikal, nama grup selalu tampil, nilai opsi tanpa nominal uang, ≤4 radio/>4 dropdown, jangan nonaktifin submit.
6. Detail plan: deskripsi berisi tanggal pengiriman atau durasi percobaan dan link kebijakan pengembalian/penagihan.
7. CTA mencerminkan tipe pembelian (“Pre-order now”), diganti di tombol accelerated checkout kalau ada, Add to cart tetap.
8. Cart dan order: nama plan, harga penuh, harga saat checkout (deposit atau $0). Nama plan nyatain tipe, deposit, dan jatuh tempo, tanpa marketing, hati-hati nominal di toko multi mata uang.

---

Bab selanjutnya kita pindah ke pelanggan: cara login dan akun pelanggan baru, komponen akun yang disematkan ke theme, form kontak, dan persetujuan email marketing.