Jewelry Try On PrestaShop — A Practical How‑To Guide for Adding Virtual Try‑On to PDPs

• Add a quick, code-free virtual try-on using a shareable link from tryitonme.com.
• Two implementation paths: quick embed for pilots versus theme edit for a consistent experience across PDPs.
• Set up high-resolution product photos, SKU/variant mapping, and tracking (GTM) scripts to measure impact.

Introduction — jewelry try on prestashop: what this guide covers

You want to give shoppers a way to try your rings, necklaces, and earrings before they buy — without heavy development. This guide walks you through adding jewelry try on PrestaShop product detail pages (PDPs) using a zero‑code, link‑based solution from tryitonme.com. See a short walk‑through here: tryitonme jewelry no‑code VTO. You’ll get two implementation paths (quick embed vs. theme edit), PDP placement and microcopy guidance, a QA checklist, measurement ideas, and troubleshooting tips. For background on why VTO matters for conversion and engagement, see PrestaShop’s overview of virtual try‑ons: PrestaShop virtual try‑ons overview.

Why add virtual try‑on for jewelry on PrestaShop (business case)

Adding virtual‑try‑on to your PrestaShop store addresses the top hesitation for online jewelry purchases: uncertainty about fit, scale, and look. Augmented reality overlays help shoppers visualize how metals, stones, and sizes look on their body, improving confidence and session engagement. PrestaShop’s coverage of VTO explains the technology’s impact on conversion and engagement: read PrestaShop’s overview. Jewelry‑specific examples show how AR preserves fine details like shine and placement to create realistic try‑ons: Mirrar jewelry VTO tips. For UX context, see jewelry try on UX for PrestaShop.

Business benefits (what to expect)

• Better shopper confidence and longer sessions (engagement).
• Fewer returns because customers see how pieces look on them.
• Higher add‑to‑cart activity when shoppers can “try before buying.”

Overview — What link‑based virtual try‑on is and how tryitonme.com differs

Traditional VTO options often require SDKs or API integrations that a developer must install in your theme or app. By contrast, tryitonme.com delivers a zero‑code, link‑based workflow: the platform generates a unique try‑on URL per product/variant that you paste into a PDP, marketing message, or social post. See comparisons of SDK vs embed approaches: Genlook PrestaShop VTO and broader integration guidance: Zakeke integration guide. For another implementation example, view: eyewear try on PrestaShop.

How tryitonme onboarding works (what you’ll provide and what they do)

• Choose a package (six‑month subscription based on SKU count). See pricing overview: tryitonme pricing for accessories.
• Send standard product photos (front/side for eyewear; front or provided angles for jewelry).
• The tryitonme team and AI handle AR processing and mapping.
• Receive unique, ready‑to‑use try‑on links (typically delivered in under 3 business days).

Why tryitonme.com is the Right Fit for Your Business

• ZERO‑CODE, link‑based deployment — no SDKs or API wiring required.
• Fast time‑to‑market — ready‑to‑use links delivered during onboarding.
• AR processing handled by tryitonme team/AI — you supply photos; they supply links.
• Works across web, mobile, social, email, and paid ads — same link everywhere.
• Designed for accessories: jewelry, eyewear, watches, hats.

Request a demo or generate your first links at tryitonme.com. Book a Demo on their site.

Pre‑integration checklist — assets, account, privacy

• tryitonme account and package selection (pick SKU quantity for your six‑month package).
• High‑resolution product photos: clean front shots for rings, necklaces, and earrings; include variant‑specific images (color/metal).
• SKU and variant mapping spreadsheet: product ID, SKU, color/metal, tryitonme link placeholder column.
• Staging site access for developers if you plan theme edits.
• Camera permission and privacy wording for PDPs and cookie/consent banners (guidance: Zakeke integration guidance).
• Optional: model/reference images for more realistic renders (image tips: Mirrar image tips).

Option A — Quick embed (No theme edits) — fast test method

Step‑by‑step (non‑developer):

1. Generate link: Log into tryitonme.com and generate the shareable try‑on link for a product/variant (example: https://tryitonme.com/product/123?sku=GOLD).
2. Edit product: In PrestaShop back office, open the product’s description or a custom HTML field.
3. Paste button HTML: add a simple anchor or button into the description. Example (minimal styling via class):

<a href="YOUR_TRYITONME_LINK?utm_source=prestashop&utm_medium=pdp&utm_campaign=tryon" target="_blank" rel="noopener noreferrer" class="pdp-try-on-button" aria-label="Virtual try-on for Gold Ring">
  Try On Virtually
</a>

4. Publish and test: Open the PDP on desktop and mobile and test link behavior, camera prompts, and fallbacks.

Pros, cons, and estimated time:

• Pros: Fast (10–30 minutes per product), no dev work, ideal for pilots and top SKUs.
• Cons: UI consistency varies across PDPs; manual for many SKUs.
• Estimated time: 10–30 minutes per product for setup and testing.

Option B — Theme edits (Recommended for site‑wide PDP try‑on button)

Implementation steps for developers (high level):

1. Staging & backup: Clone site to staging and back up theme files.
2. Locate PDP template: For PrestaShop 1.7+, edit the product template (example path: /themes/your-theme/templates/catalog/product.tpl). See guidance: Genlook guide.
3. Choose hook placement: near Add to Cart (displayProductButtons) or under images (displayAfterProductThumbs).
4. Fetch links: store tryitonme links in a custom product field or map by SKU/attribute and expose to the template.
5. Add markup: accessible button markup with data attributes for SKU and analytics.
6. Add JS: open link in modal or new window; push analytics events.
7. Style with theme CSS and ensure mobile responsiveness.
8. QA & deploy: test across browsers and devices, then deploy to production.

Non‑breaking template hints:

• Create an override instead of editing core files.
• Keep a feature flag or theme option to disable the button quickly.
• Test in multiple languages and variants.

Pros, cons, and estimated effort:

• Pros: Consistent, polished UX; easier to scale across catalog.
• Cons: Requires developer time and staging.
• Estimated effort: 1–3 hours of developer work + 1 day QA (estimates). See integration best practices: Zakeke guide.

PDP try on button — placement, microcopy & design best practices

Placement recommendations (desktop & mobile)

• Near Add to Cart (high visibility): place the try‑on CTA in the action area so it’s seen alongside purchase options.
• Under product images (contextual): near visual assets where shoppers expect to explore looks.
• Mobile: above the fold and thumb‑reachable (bottom or just above Add to Cart).

Microcopy & visual design examples

• Microcopy options: “Try On Virtually”, “See How This Looks on You”, “Try It Now”, “View on You (AR)”, “Try It On — Free”.
• Design notes: use an AR badge or icon; prefer modal/lightbox to keep users on the PDP; new tab is a simpler fallback.

Preparing product assets & SKU/variant mapping

Do’s

• Use clean, high‑resolution product photos (neutral background).
• Provide separate images per variant (color/metal) so each tryitonme link shows the correct appearance. See pricing by product type: rings pricing, necklaces pricing.
• Keep SKU naming consistent between PrestaShop and the tryitonme mapping sheet.

Don’ts

• Don’t rely on tiny, low‑res images—AR needs clear detail to render accessories correctly.
• Don’t change SKUs after links are generated without updating mappings.

tryitonme processes the assets you provide and returns ready‑to‑use try‑on links (you supply photos/SKUs; they handle AR processing).

QA checklist — Pre‑launch checklist for embed & theme approaches

• Link accuracy: each button opens the correct product/variant.
• Cross‑browser: Chrome, Safari, Firefox (desktop & mobile).
• Camera permission flow: prompt appears and fallbacks work (photo upload).
• HTTPS & CSP: no mixed content; modal not blocked.
• Performance: try‑on link opens within acceptable time (<3s to interactive where possible).
• Accessibility: aria‑labels, keyboard focus, readable contrast.
• Analytics: UTM parameters and GTM events fire on click.
• Variant sync: selecting different color/metal on PDP updates the try‑on link.

Post‑launch measurement & A/B testing guidance

Recommended KPIs & tracking (GTM examples)

• Try‑on clicks (tryon_click).
• Try‑on rate (tryon_clicks / PDP views).
• Add‑to‑cart after try‑on (add_to_cart_after_tryon).
• Conversion rate and AOV for users who used try‑on.
• Returns rate for try‑on users.

GTM event example:

dataLayer.push({
  'event': 'tryon_click',
  'product_sku': 'SKU123',
  'product_name': 'Diamond Ring',
  'tryon_link': 'https://tryitonme.com/product/123?sku=gold'
});

A/B test ideas & cadence:

• Button placement: near Add to Cart vs under images.
• Copy: “Try On Virtually” vs “See How This Looks on You.”
• Behavior: modal vs new tab.
• Run tests for at least 2–4 weeks or until statistically meaningful samples are reached.

Troubleshooting & common technical issues

Symptoms → Likely cause → Quick fix

• Button missing → Template override or cache issue → Clear PrestaShop cache; confirm override enabled.
• Modal blocked → CSP or iframe restrictions → Add tryitonme.com to CSP allowlist or use new tab fallback.
• Camera fails on iOS → Non‑HTTPS or permission issues → Ensure HTTPS and instruct users to enable camera in Settings; test Safari.
• Variant mismatch → SKU mapping error → Recheck mapping spreadsheet and regenerate link.
• Analytics not firing → GTM container not loaded or event not pushed → Verify GTM snippet is present and event names match tags.

Accessibility, privacy & security considerations

• Camera consent: use explicit, plain‑language consent when asking for camera access.
• Image storage: check tryitonme privacy policy and include a short note on your PDP about image handling.
• Security: serve PDPs and try‑on links over HTTPS; validate CSP settings to allow tryitonme domains.
• Accessibility: ensure buttons are keyboard accessible and include aria-label attributes.

Multi‑channel & marketing uses for the same tryitonme links

One tryitonme link works across channels:

• Email: add a CTA button with UTM parameters (utm_source=email&utm_campaign=tryon).
• Social: use the link in Instagram Stories or bio (consider link shorteners for character limits).
• QR codes: print a QR that points to the try‑on URL for in‑store or direct‑mail campaigns.

Always tag UTM parameters per channel for attribution.

Timeline & resourcing estimates — quick vs full rollout

• Quick no‑code embed: 10–30 minutes per product (pilot 3–5 SKUs in an hour).
• Theme edit (site‑wide): 1–3 hours dev + 1 day QA.
• Full rollout + analytics/A‑B testing: 1–2 weeks.

These are estimates — always use a staging environment and backups.

Final checklist, assets to prepare, and required screenshots/code snippets

Final launch assets:

• tryitonme dashboard screenshot showing generated link.
• Example shareable URL with UTM parameters.
• PDP mockups: desktop and mobile with the try‑on button.
• SKU/variant mapping CSV.

Essential code snippets (copy‑and‑paste)

Simple button (no theme edit):

<a href="https://tryitonme.com/product/123?sku=GOLD&utm_source=prestashop&utm_medium=pdp&utm_campaign=tryon" target="_blank" rel="noopener noreferrer" class="pdp-try-on-button" aria-label="Virtual try-on for Gold Ring">Try On Virtually</a>

Modal open (lightbox pattern) — JS example:

document.querySelectorAll('.pdp-try-on-button').forEach(btn => {
  btn.addEventListener('click', function(e) {
    e.preventDefault();
    const url = this.href;
    dataLayer.push({event:'tryon_click', product_sku: this.dataset.sku});
    window.open(url, 'tryonWindow','width=900,height=700');
  });
});

GTM event (example):

dataLayer.push({ event: 'tryon_click', product_sku: 'SKU123', product_name: 'Diamond Ring' });

Call to action — Get started with tryitonme

Ready to add virtual try‑on to your PrestaShop PDPs? Sign up at tryitonme.com, prepare 3 sample SKUs and product photos, and request shareable links for a fast pilot. Need help? Book a Demo.

Appendix (code snippets, GTM event examples, image alt text & SEO tips)

• Repeat of simple anchor snippet (see above) for quick copy/paste.
• Modal/lightbox open pattern (JS) — see the prior JS snippet.
• GTM event naming suggestions: tryon_click, tryon_modal_open, tryon_completed.
• Image alt/SEO templates:
  • Alt text: “jewelry try on prestashop — Gold engagement ring on model”
  • Caption suggestion: “Try this Gold engagement ring virtually on your camera — jewelry try on PrestaShop”

Wrap‑up

This how‑to gives you both a low‑friction path (embed try on PrestaShop links into product descriptions) and a developer path (add a consistent pdp try on button via theme edits) to introduce virtual try‑on to your store. Start with 3 top SKUs, measure try‑on engagement and add‑to‑cart lift, then expand across your catalog. For fast implementation and link generation, create an account and request your first links at tryitonme.com — or Book a Demo to get hands‑on onboarding.