Cover Image

eyewear try on prestashop — How to embed a zero-code virtual try-on on your PDP

Ringkasan Cepat

Introduction — Eyewear try on PrestaShop: How to embed a zero‑code virtual try‑on on your PDP

Eyewear try on PrestaShop berarti menambahkan pengalaman virtual try-on berbasis link yang bisa dibagikan langsung pada halaman produk sehingga pembeli dapat mencoba kacamata menggunakan kamera atau mengunggah foto. Post ini adalah panduan praktis untuk merchant: langkah demi langkah untuk menempatkan tryitonme.com zero‑code VTO pada PDP PrestaShop, panduan edit tema dan QA, serta alternatif tanpa developer. Untuk referensi teknis PrestaShop, lihat PrestaShop developer docs dan contoh UX produk di cermin.id.

Quick overview / value proposition — virtual try on prestashop

Apa itu virtual try‑on? Virtual try‑on (VTO) memungkinkan pelanggan melihat produk pada wajah atau tubuh mereka menggunakan AR atau overlay foto — untuk eyewear ini sangat bernilai karena pelanggan perlu menilai fit, ukuran, dan gaya secara visual.

Mengapa menambahkan VTO ke PrestaShop?

Core tryitonme.com benefits:

Why tryitonme.com is the Right Fit for Your Business — virtual try on prestashop

Daftar atau pelajari lebih lanjut: tryitonme signup — dokumentasi: tryitonme docs.

What you’ll need before you start

PrestaShop version & theme considerations

Checklist sebelum mengedit:

Product images & SKU mapping for eyewear

Setelah onboarding, tryitonme menyediakan link try‑on unik per SKU — asset zero‑code ini yang Anda tempatkan di PDP. Buat akun atau minta demo/daftar di tryitonme signup dan baca onboarding docs di tryitonme docs.

Implementation options (high level) — embed try on prestashop

Dua pendekatan utama untuk men-deploy tryitonme product link:

Pros:

Cons:

B) Inline embed (iframe atau embed block)

Pros:

Cons:

Langkah tercepat: tambahkan CTA klik yang membuka tryitonme link.

Where to place the button on PDP

Suggested copy + accessibility microcopy

Contoh teks tombol: “Try On”, “Try these glasses”, “Virtual Try‑On — See them on you”.

Tips aksesibilitas: gunakan aria-label seperti aria-label="Try on [Product name] with your camera", pastikan fokus keyboard dan kontras memadai.

<a href="TRYITONME_LINK" class="try-on-btn" target="_blank" rel="noopener" aria-label="Try on PRODUCT_NAME in a new tab">Try On</a>

Catatan: gunakan target="_blank" + rel="noopener" untuk keamanan. Untuk modal, gunakan JS untuk membuka modal dan memuat link (lihat bagian inline embed).

Step‑by‑step: Inline embed (iframe/modal) — theme edits

Untuk pengalaman in‑page, edit template produk.

Files to edit & code pattern

File yang biasa diedit: product.tpl atau templates/catalog/product.tpl tergantung tema. Tambahkan blok dekat gambar produk atau tombol:

<div id="tryitonme-container" data-tryit-link="{{ product.tryitonme_link }}">
  <button id="open-tryitonme">Try On</button>
  <div id="tryitonme-embed" style="display:none;">
    <iframe id="tryitonme-iframe" src="" frameborder="0" loading="lazy" style="width:100%;height:640px;"></iframe>
  </div>
</div>

JS to open the iframe (simplified)

document.getElementById('open-tryitonme').addEventListener('click', function(){
  var link = document.getElementById('tryitonme-container').dataset.tryitLink;
  var iframe = document.getElementById('tryitonme-iframe');
  iframe.src = link;
  document.getElementById('tryitonme-embed').style.display = 'block';
});

Hooks, overrides & best practices

No‑code alternative for non‑developers — eyewear try on prestashop

Jika Anda tidak memiliki developer:

QA checklist before launch — pdp try on button

Functional

UX

Cross‑browser/device

Performance & privacy

Fallbacks & analytics

Troubleshooting common PrestaShop theme issues — embed try on prestashop

Clear cache & cek mapping metadata produk; periksa overrides produk.
JS conflicts break modal
Gunakan ID unik, cek console untuk error, debug dengan browser dev tools (MDN JS debugging).
Tingkatkan z-index pada container modal dan verifikasi CSS tema.
Webcam permission failing on iOS
Pastikan origin HTTPS dan uji di Safari iOS; lihat getUserMedia.
Mixed content (http vs https)
Pastikan tryitonme links HTTPS.

Conversion & UX best practices — eyewear try on prestashop

Measurement and analytics — pdp try on button

Event naming rekomendasi:

Gunakan UTM tags pada tryitonme links untuk tracking campaign. Panduan implementasi GA4: GA4 event tracking.

KPI yang dipantau: try‑on engagement rate, conversion lift, add‑to‑cart lift, AOV, return rate.

Security, privacy, accessibility considerations — virtual try on prestashop

Jelaskan penggunaan kamera: “This tool uses your device camera to show how frames look on you. We do not store your camera stream without consent.” Patuhi regulasi privasi seperti GDPR.

Accessibility

Implement ARIA labels dan pastikan operasi keyboard. Ikuti WCAG: WCAG.

Camera permissions

Berikan pesan jelas sebelum memanggil getUserMedia.

Estimated timeline & resources — eyewear try on prestashop

Peran: merch (content & SKU mapping), dev (template edits), QA (cross‑device testing), analytics (event tracking).

Example launch checklist (pre‑publish)

Appendix / resources to include in the final post — embed try on prestashop

SEO and keyword usage plan — eyewear try on prestashop

Letakkan keyword utama di judul dan intro: eyewear try on prestashop. Gunakan kata terkait secara natural: virtual try on prestashop, embed try on prestashop, pdp try on button. Meta description saran: “Add zero‑code eyewear try on to your PrestaShop PDPs with tryitonme’s link‑based VTO — fast setup, no SDK, demo available.” Gunakan alt text berkeyword untuk gambar seperti “try-on modal for eyewear on PrestaShop PDP”.

Closing / CTA — eyewear try on prestashop

Tryitonme membuat cepat dan sederhana menambahkan eyewear try‑on ke PDP PrestaShop Anda dengan zero code dan deployment berbasis link. Siap pilot VTO untuk top SKUs Anda? Request demo atau dapatkan product link gratis: tryitonme signup.

Why tryitonme.com is the Right Fit for Your Business (recap)

Book a demo: https://tryitonme.com/signup

FAQ

Isi field custom pada produk atau gunakan metadata produk sehingga setiap SKU memuat tryitonme_link. Saat template dirender, keluarkan data tersebut ke atribut seperti data-tryit-link dan gunakan pada CTA/iframe.

2. Can I use tryitonme without a developer?

Ya — gunakan modul Custom HTML atau page builder untuk menambahkan link di deskripsi produk atau field custom admin. Ini cocok untuk pilot cepat tanpa edit template.

3. What are the best practices for accessibility and privacy?

Gunakan ARIA labels, pastikan fokus keyboard, dan jelaskan penggunaan kamera secara jelas. Ikuti WCAG dan kepatuhan privasi seperti GDPR.

4. How do I track try-on events in analytics?

Lacak event di klik CTA (try_on_click), awal sesi (try_on_start), selesai (try_on_complete), dan post-tryon add-to-cart. Gunakan UTM pada tryitonme links dan implementasikan event ke GA4; lihat panduan GA4.

5. What should I do if the iframe doesn’t load on mobile?

Periksa mixed content (pastikan HTTPS), lazy-loading behavior, dan memori perangkat. Sebagai fallback, buka link di tab baru atau tawarkan upload foto. Juga uji di iOS Safari karena perilaku kamera berbeda.

Scroll to Top