Jewelry Try On UX PrestaShop: Placement, Microcopy, Fallbacks & CTAs

Use link-based VTO (tryitonme.com) for quick deployment without an SDK — the link can be shared on the web, email, and social media.
Place a secondary Try On CTA (below the price / gallery overlay / sticky mobile) and keep the Add-to-Cart option dominant.
Write clear, privacy-first camera permission microcopy; prepare Upload Selfie and View on Model fallbacks for camera-denied users.
Run prioritized A/B tests: placement, copy, modal vs. new tab, and privacy microcopy — measure the vto_click → add-to-cart funnel.

What this guide covers

A practical guide for PrestaShop merchants, UX/CRO teams, and product owners: insertion points in PrestaShop templates, ready-to-paste copy, minimal code examples, A/B test ideas, and KPIs to measure. For a quick orientation on why VTO is important for jewelry, see Weingenious’ overview and Mirrar’s integration rationale.

Overview: how to build a virtual jewelry try-on app · Integration rationale: Mirrar integration guide.

The value of virtual try-on for jewelry retail

VTO increases engagement and reduces purchase hesitation because customers can visualize the product in context. For a technical breakdown and implementation benefits, consult relevant technical sources and implementation studies.

Technical/business breakdown: Weingenious guide · Implementation benefits: Mirrar.

UX principles for jewelry try-on

Follow UX principles to create credible and actionable experiences.

Consistent scale: anchor pieces to realistic landmarks (collarbones, finger width). See the technical guide: Weingenious.
Realistic lighting & materials: adjust colors and reflections so the AR overlay doesn’t look “pasted-on.”
Anchored tracking points: Tracking stability is important for earrings and necklaces — example template: Necklace try-on templates.
Fast load times: prioritize first-frame preview to reduce abandonment.

Accessibility & privacy-first guidance

Ensure keyboard/screen-reader path for fallback, microcopy camera permission before prompt, and “no-data storage” message near CTA.

Keyboard & screen-reader paths: Provide Upload Photo and View on Model as accessible fallbacks.
Pre-prompt microcopy: Explain why the camera is requested—this reduces denial rates. Example guide: Mirror.
No-data storage messaging: Use the exact sentence near the CTA: “Camera access is only used for live preview; no images are stored.”

PrestaShop-specific UX & placement recommendations

PrestaShop provides a template hook that allows link-based try-on CTAs to be inserted without custom modules. See the layout guide for jewelry websites.

Reference: PrestaShop jewelry site guidance.

Where to add a link-based VTO on the PDP

Product image gallery: displayProductImages (gallery overlay badge).
Price block: displayProductPriceBlock (below price).
Add-to-cart area: displayProductButtons (next to/below Add to Cart).
Product tabs: description or media tab for exploratory placement.

Minimal no-code implementation pattern

No SDK required—just add an anchor that opens a link to tryitonme.com. Copy-paste example for product.tpl hooks:

<!-- Gallery overlay / product.tpl (displayProductImages) -->
<a href="https://tryitonme.com/product/XYZ" target="_blank" class="vto-overlay" aria-label="Try on this necklace">
  <span class="icon-eye" aria-hidden="true"></span> Try On
</a>

<!-- Price block -->
<div class="vto-inline">
  <a href="https://tryitonme.com/product/XYZ" class="btn btn-secondary vto-cta">Try on virtually — 5s</a>
  <small class="vto-note">Camera access is only used for live preview; no images are stored.</small>
</div>

Example hook reference: Transpacific PrestaShop guide.

Try on CTA placement

Use device-specific patterns to protect Add-to-Cart prominence while maximizing discovery.

Desktop patterns (recommended)

Primary: Try On below/left of Add to Cart (near the price) — visible but secondary.
Secondary: gallery overlay badge on the main image.
Persistent: sticky/floating CTA for late-discovery shoppers.

Referensi: Weingenious.

Mobile patterns (recommended)

Fixed bottom bar: two buttons — Try On and Add to Cart; keep Add to Cart primary.
Use large tappable buttons and clear icons for reachability. Mobile guide: Mirrar.

Link behavior experiments (modal vs new tab)

Modal: immersive, maintains session on PDP.
New tab/shareable link: maintains PDP and makes links easy to share.
Quick A/B: swaps between data-modal and target=”_blank” for 4 weeks.

Microcopy & UI messaging

Use short sentences, key benefits, and reassurance of camera permission.

CTA examples

Try on now
See it on me
Try virtually — 5s
Try on (no app needed)
View on my selfie

Permission & fallback microcopy

Pre-prompt: “Allow camera for a live preview — no photos stored.”
If denied: “Camera blocked? Upload a selfie or view on model.”
Short reassurance: “Takes 5s • No downloads • Private preview.” (lihat microcopy guidance di Mirrar & Weingenious)

Fallback strategies and progressive enhancement

Not all devices or browsers support camera-based VTO—have an alternative path ready to avoid dead-ends.

Camera denied flow

Display two clear options: Upload Photo and View on Model.
Example text: “Camera access is blocked — you can still upload a selfie or view the model preview.”
After Upload: crop/align screen; after View on Model: display model shots with SKU.

Unsupported browser / device flow

Alternatives: product videos, animated GIF spins, static 3D renders, or size guide overlays.
Option reference: Virtual try-on development overview.

PDP conversion best practices when adding VTO

Keep Add to Cart visually dominant; Try On secondary and consistent in position.
Use the eye/camera icon for quick recognition.
Incorporate trust signals: high-resolution images, clear pricing, scarcity cues, social proof, and easy returns.

PrestaShop placement context: Transpacific.

A/B test ideas, KPIs, and measurement plan

Define events and baselines before executing the test.

KPIs: Try-on CTR (vto_click), Try-on → Add-to-Cart conversion (vto_add_to_cart), PDP conversion rate, AOV, return rate. Contoh measurement: analytics example.
Prioritized 4 tests (4 weeks per test or until min sample ~1k PDP visitors per variant): placement, CTA copy, modal vs new tab, privacy microcopy on vs off.

Why tryitonme.com is the Right Fit for Your Business

ZERO-CODE, LINK-BASED deployment — no SDK/API work.
Fast time-to-market — ready-to-use try-on link in under 3 business days after asset submission (tryitonme jewelry no-code VTO).
Team + AI handles AR processing; cross-channel ready for web, mobile, email, social.
Built for accessories: jewelry, eyewear, watches, hats. Pricing & details: tryitonme pricing.

How it works (4 steps)

Purchase a 6-month package based on SKU count.
Send standard product photos (front/side as appropriate).
tryitonme team + AI process AR assets.
Receive your unique try-on link in under 3 business days — deploy via simple anchor links.

Book a demo: tryitonme.com.

Implementation with tryitonme.com — PrestaShop examples

Copy-paste snippet examples for product.tpl hooks:

<a href="https://tryitonme.com/product/XYZ" target="_blank" class="vto-overlay" aria-label="Try on this ring">Try On</a>

<div class="vto-inline">
  <a href="https://tryitonme.com/product/XYZ" class="btn btn-secondary vto-cta">See it on me</a>
  <small>Camera access is only used for live preview; no images are stored.</small>
</div>

<div class="mobile-sticky">
  <a href="https://tryitonme.com/product/XYZ" class="btn-try-on">Try On</a>
  <a class="btn-addtocart">Add to cart</a>
</div>

PrestaShop placement context: Transpacific.

Implementation checklist & next steps

[ ] Pick 3–5 pilot SKUs
[ ] Purchase a 6-month tryitonme.com package
[ ] Send standard product photos to tryitonme
[ ] Receive try-on links (< 3 business days)
[ ] Add snippets to product.tpl hooks (gallery, price, buttons)
[ ] Set CTA microcopy and small privacy note
[ ] Instrument events: vto_click, vto_session_start, vto_add_to_cart
[ ] Launch A/B tests (4 weeks)

Conclusion + call-to-action

Virtual try-on is a conversion-boosting enhancement when CTAs are carefully placed, microcopy is privacy-forward, and fallbacks are available. For PrestaShop merchants seeking low-friction deployment, tryitonme.com’s link-based solution enables quick integration across PDPs and marketing channels.

Request a demo / Get a pilot link: tryitonme.com.

Appendix — Assets to prepare

Wireframes: Desktop PDP (Add to Cart + Try On below), Mobile PDP (fixed bar).
Screenshots: gallery overlay, price block insertion, mobile sticky bar.
GIFs: camera flow + upload fallback flow.
Copy blocks: CTA variants and permission lines.
Code snippets: product.tpl hook examples (lihat snippet di atas).
Analytics events: vto_click, vto_session_start, vto_add_to_cart, vto_session_end.

Helpful references and further reading

FAQ

1. Is it necessary to install an SDK to use tryitonme?

No. Tryitonme provides link-based VTO without an SDK; simply add an anchor link in the PDP to open the try-on experience.

2. What happens if a user declines camera access?

Display clear fallbacks: Upload Selfie and View on Model buttons. Include microcopy explaining these options.

3. Will VTO hurt Add-to-Cart conversions?

If Add-to-Cart remains visually primary and Try On is treated as secondary, VTO generally increases discovery without disrupting the funnel. Test placement via A/B testing to confirm.

4. How long does it take to get a link after submitting an asset?

Tryitonme claims a turnaround time of under 3 business days after submitting an asset for standard packages.

5. How do you measure the effectiveness of VTO?

Instrument events such as vto_click, vto_session_start, vto_add_to_cart, and monitor Try-on CTR and Try-on → Add-to-Cart conversion rate, PDP conversion, AOV, and return rate.