Sayudha

71 Testing Theme buat Theme Store

Properties2
descriptionCara ngetes theme sebelum submit ke Theme Store, yaitu aset uji (dua CSV produk dari Shopify plus setup manual buat inventori, local pickup, unit pricing, rich media, selling plan, Shop Pay Installments, Follow on Shop) dan checklist review lengkap per area (home, header, footer, tiap section, tiap halaman, link sharing, local pickup, unit pricing, rich media, selling plan) yang dipakai tim review
tagsshopify, theme, theme-store

14 menit baca

Requirements di 70 Theme Store Gambaran dan Requirements bilang apa yang harus ada. Bab ini soal cara ngebuktiinnya sebelum tim review yang nemuin: data uji apa yang harus diimpor, fitur apa yang harus disetup manual, dan checklist edge case yang bakal dicoba reviewer. Checklist ini gak mencakup semua requirements, tapi ngebantu mastiin theme kamu tahan sama kasus ekstrem: judul 60 karakter tanpa spasi, 25 section di home, produk 100 varian, rasio gambar dari 16:9 sampai 1:1. Jalanin semua tes di theme editor dan storefront, dua-duanya.

Apa yang Harus Dites

Tips tambahan: pakai Theme Check (65 Theme Check Pengenalan, Konfigurasi, Commands) waktu develop; tes skor performa dan aksesibilitas rutin pakai Lighthouse CI (68 Theme Inspector dan Lighthouse CI); matiin JavaScript lewat Chrome DevTools buat verifikasi elemen navigasi dan form produk tetap jalan tanpa JS (progressive enhancement dari 54 Best Practices Umum); dan pertimbangkan ngetes theme dengan orang di luar organisasi kamu.

Aset Uji

Buat ngetes kamu butuh data toko yang ngaktifin kasus tertentu. Impor dua CSV ini lewat Products > Import:

  • CSV produk tim review: CSV yang dipakai tim review buat ngetes theme kamu. Berisi produk bernama khusus yang dirujuk checklist, seperti Bowtie (Rich Product Media), Socks (two options), dan Enamel pin (1 option).
  • CSV produk tes performa: CSV yang sama buat audit Lighthouse. Sertakan juga biar toko punya volume produk dan koleksi yang cukup buat tes tertentu (paginasi, koleksi besar).

Karena keterbatasan impor CSV, beberapa data harus diubah dan beberapa fitur disetup manual:

1. Kuantitas Inventori

Kalau toko uji punya beberapa lokasi, kuantitas inventori gak diimpor dari CSV dan semua produk jadi nol. Setup-nya:

  1. Sesuaikan kuantitas semua produk kecuali Bowtie (Rich Product Media), biarkan itu habis. Bikin kuantitas yang bervariasi antar varian.
  2. Update satu produk dengan dua opsi biar tiap varian punya kuantitas dan ketersediaan berbeda, misalnya Socks (two options) dengan tabel ini, sehingga produk itu punya varian habis dan varian gak tersedia (kombinasi yang gak ada, N/A):
              S/M   M/L   Kids
Geometric      0    N/A   N/A
Hotdog         4    N/A   N/A
Dog            3    10    N/A
Cat            5    0     N/A
Plain white   N/A   6     N/A
Paw           N/A   N/A   6

Bedanya penting: varian sold out ada tapi stok 0; varian unavailable gak ada sama sekali. Pemilih varian kamu harus ngebedain keduanya (39 Produk Variants dan High-variant Products).

2. Local Pickup

Buat ngetes banner pickup di halaman produk (49 Delivery Pickup Availability):

  1. Aktifin locations di toko.
  2. Tambahin lima lokasi atau lebih.
  3. Aktifin local pickup.
  4. Nonaktifin opsi local pickup di satu lokasi.
  5. Bikin produk dengan 5 varian, atau pakai Enamel pin (1 option).
  6. Setup ketersediaan tiap varian: Varian 1 tersedia dan ada stok di semua lokasi; Varian 2 cuma di satu lokasi; Varian 3 di dua lokasi, habis di salah satunya; Varian 4 cuma di satu lokasi yang gak nawarin pickup; Varian 5 habis di semua lokasi.

3. Unit Pricing

Unit pricing cuma aktif buat toko di Uni Eropa atau Swiss. Buat ngetes di toko yang ada, ganti alamat toko ke alamat valid di wilayah itu lewat Settings > General. Lalu pakai produk multi-varian dan set unit price berbeda tiap varian (42 Harga Diskon, Currency, Unit Pricing, Installments, B2B).

4. Rich Media

Impor CSV gak ndukung rich media. Pakai produk Bowtie (product rich media) dan tambahin: dua model 3D (ada sample model Shopify), satu video YouTube, satu Vimeo, satu MP4. Set semua varian ke nol biar rich media-nya bisa dipreview di halaman koleksi, karena kalau varian punya kuantitas, gambar product card default ke gambar varian bukan rich media (40 Produk Media).

5. Selling Plans

Selling plan cuma bisa dibikin dan diterapin oleh app. Pasang app subscription buat verifikasi elemen selling plan tampil benar (44 Subscriptions).

6. Shop Pay Installments

Aktif buat toko dengan alamat AS. Pakai produk multi-varian dengan harga bervariasi, misalnya Socks (2 options).

7. Follow on Shop

Pasang Shop sales channel dan aktifin Shopify Payments test mode.

Checklist Review

1. Home Page

Tambahin section berikut, lalu verifikasi semuanya jalan: tiga slideshow; lima featured product, tiga di antaranya produk yang sama; tiga featured collection berbeda; satu collection list; tiga image with text; satu newsletter; satu rich text; satu blog post; dua video (kalau ada); lalu tambah section lain sampai home punya 25 section. Tes ini nangkep section yang ngandelin ID DOM global (duplikat rusak), CSS yang bocor antar instance, dan JavaScript yang cuma inisialisasi instance pertama, masalah yang dibahas di 54 Best Practices Umum.

2. Header

Buat tiap tes, verifikasi: nama toko atau logo tampil dan aksesibel; ikon dan link header tampil dan aksesibel; navigasi berfungsi dan judul menu terlihat penuh.

  • Teks fallback logo: nama toko panjang (30–40 karakter tanpa spasi).
  • Logo: rasio 16:9, 4:3, 3:2, 1:1 dalam portrait dan landscape; PNG background transparan; skala logo; posisi dan alignment berbeda (kalau ada).
  • Navigasi: menu panjang (10+ item); satu level; dua level bersarang; tiga level bersarang; judul item level satu, dua, dan tiga yang panjang (30–60 karakter); mega menu (kalau ada). Lihat 36 Navigasi dan Menu.

Verifikasi teks, ikon, dan gambar footer terlihat penuh dan berfungsi: tambahin lima kolom/block atau jumlah maksimum; beberapa menu; menu panjang (10+ item); item dengan judul panjang (30–60 karakter); semua link sosial. Kalau ada form newsletter: isi teks, submit, tes deteksi dan penanganan error, tes pesan sukses.

4. Section

Announcement bar (teks dan ikon terlihat penuh, link berfungsi, styling link nunjukin bisa diklik): teks polos 60–100 karakter atau batas maksimum; rich text dengan satu, dua, tiga line break dan paragraf 40–50 kata; link internal, eksternal, buka di jendela sama, buka di jendela baru.

Slideshow: tiga section slideshow; jumlah slide maksimum (kalau gak ada batas, 10); ukuran gambar 2048px (retina) dan 1024px (widescreen standar); rasio 16:9, 4:3, 3:2, 1:1 pada 72ppi portrait dan landscape; video (kalau ada); heading, subheading (60 karakter), deskripsi (polos 60–100 karakter atau rich text dengan line break dan paragraf); link internal/eksternal/jendela sama/jendela baru; label tombol satu kata 30 karakter tanpa spasi dan multi-kata 30 karakter; link tombol; autoplay: kalau beberapa slideshow autoplay, masing-masing jalan seperti yang diharapkan, dan kontrol tetap berfungsi saat autoplay.

Featured product (duplikat gak ngerusak section atau halaman, pelanggan bisa nambah produk berbeda ke cart): lima section, tiga produk yang sama; pilih varian berbeda di salah satu duplikat; tambahin salah satu duplikat ke cart; jalanin tes dari checklist halaman produk.

Featured collection: tiga section dengan koleksi ukuran berbeda; jalanin tes dari checklist halaman koleksi.

Collection list (judul koleksi terlihat; koleksi tanpa gambar nampilin produk pertama atau judul koleksi di blok gambar; beberapa section gak rusak): jumlah koleksi maksimum (atau 10); judul panjang; judul satu kata 30 karakter tanpa spasi; judul multi-kata 30 karakter; gambar koleksi dengan rasio 16:9, 4:3, 3:2, 1:1 portrait dan landscape; satu koleksi tanpa gambar.

Image with text (semua teks terlihat; kualitas dan rasio gambar bervariasi didukung; beberapa section gak rusak): tiga section; heading, subheading 60 karakter, deskripsi (polos atau rich text seperti di atas); link; gambar 2048px dan 1024px; rasio 16:9, 4:3, 3:2, 1:1.

Newsletter (semua teks terlihat; form ngeluarin pesan error dan sukses yang benar): isi, submit, error, sukses; deskripsi polos atau rich text; link.

Rich text (semua teks terlihat): heading, subheading 60 karakter, deskripsi, beberapa paragraf minimal 1000 karakter, link.

Blog posts (semua teks terlihat; grid ndukung rasio gambar bervariasi): post dengan rasio 16:9, 4:3, 3:2, 1:1; judul panjang; judul satu kata 30 karakter tanpa spasi; judul multi-kata 30 karakter.

Video (beberapa section gak rusak; kontrol video ada dan berfungsi): YouTube, Vimeo, MP4 (kalau ada).

Section unik theme kamu: jalanin tes yang relevan. Verifikasi tiap section ndukung kualitas dan rasio gambar bervariasi, semua teks terlihat, dan 2–3 instance section yang sama gak rusak; tambahin teks, link, ukuran, dan rasio seperti pola di atas.

5. Halaman

Password (pelanggan bisa masuk dengan password; logo/nama dan pesan password terlihat penuh): nama toko panjang 30–40 karakter tanpa spasi dan dengan tanda hubung; logo rasio 16:9, 4:3, 3:2, 1:1, PNG transparan, skala; form password: isi email, submit, error, sukses; pesan password 500+ karakter; background 2048px/1024px dengan berbagai rasio (kalau ada).

Collection list page (rasio gambar koleksi bervariasi; koleksi tanpa gambar nampilin produk pertama atau judul): judul panjang, satu kata 30 karakter, multi-kata 30 karakter; rasio 16:9, 4:3, 3:2, 1:1; satu koleksi tanpa gambar.

Collection page (semua produk aksesibel; bisa sort dan filter; kombinasi tag filter gak ngerusak halaman; info produk di grid terlihat penuh): group filtering (kalau ada); tag satu kata 30 karakter tanpa spasi; 20+ tag; verifikasi cuma jumlah terbatas produk yang dimuat awal; paginasi terpotong (truncate) di koleksi 5+ halaman; tombol View more (kalau ada); infinite scroll (kalau ada); judul produk satu kata 30 karakter dan multi-kata 30–60 karakter; vendor satu kata 30 karakter dan multi-kata 30–60 karakter; grid dengan rasio 16:9, 4:3, 3:2, 1:1; kalau ada Add to cart di halaman koleksi, tombolnya diganti atau dinonaktifin buat varian habis/gak tersedia; pesan atau badge sold out tampil. Lihat 37 Filtering.

Product page (pelanggan bisa nambah varian terpilih ke cart; info varian berubah dinamis; pelanggan dicegah nambah lebih dari kuantitas tersedia). Jalanin di tiap konfigurasi produk: tanpa varian; diskon; satu opsi; lebih dari satu opsi dengan inventori bervariasi (varian habis dan gak tersedia); tiga opsi; 100 varian; tanpa gambar; media bervariasi (gambar, video, 3D, AR, MP4); dengan unit price. Tes: judul satu kata 30 karakter dan multi-kata 30–60; waktu varian dipilih dari dropdown, yang berikut ter-update dinamis: harga, media, SKU, tombol aksi (Add to cart dan accelerated checkout dinonaktifin buat habis/gak tersedia), pemilih varian (coret atau nonaktifin yang habis/gak tersedia), unit price, banner Shop Pay Installments, banner local pickup, kuantitas inventori (kalau ada); gambar: tanpa gambar, rasio 16:9, 4:3, 3:2, 1:1, PNG, zoom (kalau ada); swatch warna (kalau ada): opsi buat nonaktifin swatch, instruksi jelas cara upload swatch kustom; deskripsi: beberapa paragraf minimal 1000 karakter, link internal/eksternal/jendela sama/baru, gambar (harus tampil seperti di rich text editor); verifikasi pesan error waktu nambah lebih dari stok.

Blog page (semua post aksesibel; rasio gambar bervariasi; judul, excerpt, penulis, tanggal, jumlah komentar terlihat; filter blog jalan dan kombinasi tag gak rusak): grid dengan rasio 16:9, 4:3, 3:2, 1:1; filter tag satu kata 30 karakter dan 20+ tag; blog dengan banyak post: paginasi, verifikasi cuma lima halaman tampil di awal, View more, infinite scroll.

Article page: beberapa paragraf minimal 1000 karakter; link; gambar seperti di RTE; komentar: isi, submit, error, sukses, verifikasi komentar di atas batas tertentu dipaginasi; gambar post dengan rasio 16:9, 4:3, 3:2, 1:1.

Cart (page, modal, atau drawer) (semua produk terlihat penuh; pelanggan bisa ubah kuantitas; diskon otomatis ter-update dinamis): tambahin cukup produk sampai scroll muncul; kuantitas 0 menghapus produk; pesan error waktu melebihi stok; diskon otomatis; cart notes. Lihat 51 Ajax API dan Section Rendering API.

Search page (atribut hasil terlihat penuh): jumlah hasil awal terbatas; paginasi terpotong di 5+ halaman; View more; infinite scroll; filter; tampilan list dan grid (kalau ada); penanganan error, misalnya tanpa hasil.

Pages (konten terlihat penuh): judul satu kata 30 karakter dan multi-kata 30–60; beberapa paragraf minimal 3000 karakter; link; gambar seperti di RTE; ulangi buat semua template page yang ada.

Page dengan contact form (pelanggan bisa ngirim email ke merchant): isi teks; tes field wajib seperti pesan; submit; error; sukses (46 Customer Sign-in, Account Component, Contact Form, Email Consent > Form Kontak).

Gift card page (kode gift card dan nama/logo terlihat penuh): nama toko panjang tanpa spasi dan dengan tanda hubung; logo rasio 16:9, 4:3, 3:2, 1:1, PNG transparan, skala, posisi bervariasi; kode gift card gak boleh terpotong.

Bagikan link toko uji ke berbagai platform media sosial dan verifikasi gambar sharing muncul. Pakai Facebook sharing debugger dan Twitter card validator. Ini ngetes page_image dan tag Open Graph dari 48 SEO Metadata, hreflang, robots.txt > Open Graph dan Media Sosial.

7. Local Pickup

Dengan setup di atas: Varian 1 (tersedia di lima lokasi): banner pickup muncul; klik Check availability at other stores nampilin semua lokasi dan bisa di-scroll buat lihat semua info. Varian 2 (cuma satu lokasi): banner muncul; teks berubah jadi View store information; link-nya ada; klik link cuma nampilin dua lokasi.

8. Unit Pricing

Unit price berubah dinamis waktu ganti varian, dan tampil di: halaman produk, product card di koleksi, cart (drawer/page/popup), dan halaman order pelanggan.

9. Rich Media

3D/AR: model 3D bisa dilihat dan digerakkan di desktop dan mobile; tombol View in your space muncul di mobile; kedua objek AR bisa dilihat di mobile. Video (YouTube, Vimeo, MP4): kontrol aksesibel; mute/unmute; play/pause; media varian tampil waktu varian terkait dipilih. Verifikasi tipe rich media gak ngerusak layout product card di halaman koleksi: YouTube, Vimeo, MP4, model 3D.

10. Selling Plans

Selling plan yang diterapin tampil di halaman cart dan di halaman order pelanggan.

Pola di Balik Checklist

Kalau kamu perhatiin, checklist di atas cuma ngulang beberapa pola yang sama di tiap tempat, dan itu yang harus kamu jadiin kebiasaan waktu ngedesain section apa pun:

  1. Teks ekstrem: satu kata 30 karakter tanpa spasi (ngetes overflow-wrap), 30–60 karakter multi-kata (ngetes wrapping), 60–100 karakter single-line, paragraf 1000–3000 karakter, dan rich text dengan 1–3 line break.
  2. Gambar ekstrem: 2048px dan 1024px, rasio 16:9, 4:3, 3:2, 1:1 dalam portrait dan landscape, PNG transparan, dan tanpa gambar sama sekali (fallback).
  3. Duplikasi: 2–5 instance section yang sama, tiga produk yang sama, sampai 25 section di home.
  4. Volume: 10+ item menu, 20+ tag, 100 varian, 5+ halaman paginasi, cart yang butuh scroll.
  5. Link: internal, eksternal, jendela sama, jendela baru, dengan styling yang jelas bisa diklik.
  6. Form: isi, submit, error, sukses, di newsletter, password, kontak, komentar.
  7. Ketersediaan: habis vs gak tersedia, di pemilih varian, tombol aksi, badge, dan batas kuantitas cart.

Semua ini adalah prinsip antifragile dari 56 Design dan Color System > 3. Antifragile dalam bentuk daftar cek.

Ringkasan

  1. Tes empat hal: fitur wajib (aset uji + checklist), performa (benchmark Lighthouse), aksesibilitas, kompatibilitas browser (BrowserStack); plus Theme Check, Lighthouse CI, matiin JavaScript, dan penguji eksternal.
  2. Impor dua CSV: produk tim review (produk bernama seperti Bowtie, Socks, Enamel pin) dan produk tes performa (volume).
  3. Setup manual: inventori (multi-lokasi bikin semua nol; Bowtie tetap habis; Socks dengan varian habis dan gak tersedia), local pickup (5+ lokasi, satu tanpa pickup, 5 varian dengan sebaran berbeda), unit pricing (alamat EU/Swiss), rich media (2 model 3D + YouTube + Vimeo + MP4, semua varian nol), selling plan (app subscription), Shop Pay Installments (alamat AS), Follow on Shop (Shop channel + test mode).
  4. Home: 25 section termasuk 3 slideshow dan 5 featured product (3 sama). Header/footer: nama 30–40 karakter tanpa spasi, logo 4 rasio + PNG transparan, menu 10+ item tiga level dengan judul 30–60 karakter.
  5. Tiap section: teks polos 60–100 karakter atau rich text dengan line break, paragraf 40–50 kata, link 4 jenis, gambar 2048/1024px 4 rasio, duplikat section, autoplay slideshow, koleksi tanpa gambar.
  6. Halaman: password (pesan 500+), koleksi (20+ tag, paginasi terpotong 5+ halaman, sold out), produk (9 konfigurasi termasuk 100 varian dan tanpa gambar; harga/media/SKU/tombol/selector/unit price/banner ter-update; error melebihi stok), blog (5 halaman awal), article (komentar dipaginasi), cart (scroll, 0 = hapus, diskon otomatis, notes), search (tanpa hasil), page (3000+ karakter), kontak, gift card (kode gak terpotong).
  7. Link sharing (Facebook debugger, Twitter validator), local pickup (5 lokasi vs 1 lokasi → “View store information”), unit pricing di 4 tempat, rich media (3D/AR, video, product card), selling plan di cart dan order.
  8. Polanya: teks ekstrem, gambar ekstrem, duplikasi, volume, link, form, ketersediaan.

Bab selanjutnya kita bahas proses review-nya: cara submit theme lewat Partner Dashboard, apa yang terjadi setelahnya, penolakan yang paling sering terjadi, dan cara nyusun listing Theme Store (nama, deskripsi, screenshot, industri, fitur, harga) yang lolos review dan menjual.

Tampilan Grafik

Tautan Balik