Jewelry Try On Salesforce Commerce Cloud: Add a No‑Code Virtual Try‑On to Your PDP

tryitonme.com makes adding jewelry try on Salesforce Commerce Cloud fast and simple: we deliver a zero‑code, link‑based virtual try‑on experience you can deploy via a shareable product URL (no SDK, cartridge, or API work). In this guide you’ll see practical ways to add a PDP try on button, embed the link inline or open it in a new tab, and run QA and measurement — all with minimal developer time.

Quick Summary

Who this guide is for & what you’ll learn

Audience: SFCC merchants, product owners, and front‑end engineers working on PDPs and merchandising. Intent: Implement a virtual try on Salesforce Commerce Cloud solution quickly and safely. Outcomes: decide between zero‑code vs embedded approaches, learn example ISML/SFRA snippets, map product SKUs to try‑on links, follow a QA checklist, and set up analytics. Helpful reference: Salesforce Commerce Cloud docs.

Why offer jewelry virtual try‑on on SFCC

Jewelry is a high‑consideration category where visual confidence matters. A virtual try‑on (VTO) lets shoppers preview rings, necklaces, watches and earrings on themselves, reducing hesitation at checkout.

Why tryitonme.com is the Right Fit for Your Business

High‑level embed approaches for SFCC PDP

Two practical approaches—choose based on speed vs UX:

Pros: fastest to launch; no theme edits; easy to manage via Business Manager content slots or product custom attributes. Cons: context switch away from PDP; slightly less immersive UX.

Pros: seamless, on‑page experience; keeps shoppers on PDP and supports richer flows. Cons: requires minor theme edits, CSP/frame settings and careful mobile handling. For CSP guidance see Content‑Security‑Policy.

Step‑by‑step implementation (How‑to)

Pre‑req checklist

Create a campaign in the tryitonme dashboard, upload images or supported 3D assets (GLB/GLTF/USDZ), configure variants, publish and copy the shareable VTO URL. Product overview: tryitonme product. For vendor comparisons see: tryitonme vs Perfect Corp.

Add an anchor to your PDP via Business Manager content slot, product description HTML, or a custom attribute available in your template. Store the canonical tryitonme link in product.custom.tryOnUrl.

<a href="https://tryitonme.com/vto/your-sku-123?sku=${pdict.product.ID}&utm_source=sfcc_pdp&utm_campaign=vto"
   class="btn btn-primary pdp-tryon-button"
   target="_blank"
   rel="noopener noreferrer">
  Try On This Piece
</a>

Placement: place the button near Add to Cart and above the fold; test phrasing like “Try On” / “See It On You”. For zero‑code placement patterns across platforms see: WooCommerce example and BigCommerce example.

Option B — Theme edit / Modal embed (inline)

Edit your PDP template (ISML/SFRA) and add a button with a data attribute pointing to the tryitonme link.

<a href="#" class="btn pdp-tryon-button" data-vto-url="${pdict.product.custom.tryOnUrl}">
  Virtual Try‑On
</a>

<script>
document.querySelectorAll('.pdp-tryon-button').forEach(btn=>{
  btn.addEventListener('click', e=>{
    e.preventDefault();
    const vto = btn.dataset.vtoUrl + '?utm_medium=modal';
    // create a simple accessible modal and append an iframe
    // see ARIA modal guidance: https://www.w3.org/TR/wai-aria-practices-1.2/#dialog_modal
  });
});
</script>

SFCC embedding patterns and practical examples: SFCC eyewear guide. Camera permission reference: getUserMedia (MDN).

Option C — Developer / advanced

Example button markup & placement guidance

<button class="btn pdp-tryon" aria-label="Virtual try on for Necklace 123" data-vto-url="https://tryitonme.com/vto/necklace-123?sku=123">
  ✨ Try On Necklace
</button>

Accessibility: follow ARIA modal patterns — WAI-ARIA modal guidance.

Product mapping & creative best practices

QA checklist

Use this checklist during QA and pre‑launch:

Functional

Cross‑browser & device

Performance & UX

Accessibility

Security & analytics

Troubleshooting & common issues

  1. iframe blocked by CSP or frame‑ancestors: update Content‑Security‑Policy to include tryitonme.com in frame‑src or use target="_blank" fallback. See CSP guide.
  2. Camera access denied or unavailable: show clear instructions and fallback copy: “Enable camera or try on with uploaded photo.”
  3. Wrong product loads: verify SKU and variant query params are correctly formatted and stored in product.custom.tryOnUrl.
  4. Slow load: lazy‑load iframe, use placeholders and check network; confirm tryitonme link is correct.

Measurement & success metrics

Track these KPIs and compare to baseline:

Analytics implementation examples

UTM example:

https://tryitonme.com/vto/your-sku-123?sku=ABC123&utm_source=sfcc&utm_campaign=vto

GA event (gtag) on click:

gtag('event', 'vto_click', {
  'event_category': 'VTO',
  'event_label': 'necklace_ABC123',
  'value': 1
});

Google Analytics event guide: GA event docs. For measurement plans and event schema see: practical measurement plan.

Rollout plan & team responsibilities

Quick rollout plan:

Recommended roles: Merchant/Product owner (assets, CTA copy), SFCC developer (template edits, CSP, analytics), QA (functional & accessibility), Analytics (event schema & dashboards).

Visuals, code snippets & assets to include in the post

Asset format references: glTF/GLB, USDZ / Quick Look.

SEO & on‑page checklist for this draft

Deliverables checklist for content creator

Optional — Follow‑up content ideas

Additional useful jewelry platform resources

FAQ

Q: How do I add a try‑on button to SFCC PDP?

A: Best path is the zero‑code approach — store the tryitonme URL in a product custom attribute and add an anchor via Business Manager content slot. For file‑level edits, update your PDP ISML/SFRA template.

Q: Does tryitonme work on mobile and with AR?

A: Yes — tryitonme links load on mobile; AR/Quick Look experiences use USDZ on supported iOS devices. See Apple Quick Look: Quick Look.

Q: Do I need a developer to implement?

A: No for the zero‑code path. A developer helps if you want an inline modal, analytics events, or server‑side integrations. Platform‑specific UX guidance for SFCC: SFCC eyewear guide.

Q: What are common issues and fixes?

A: Common issues include iframe blocked by CSP (update CSP or fallback to new tab), camera denied (show fallback copy), wrong product loads (verify SKU query params), and slow load (lazy‑load iframe).

Q: How do I measure impact of VTO?

A: Track PDP try‑on CTR, session starts/completions, add‑to‑cart and conversion for users who try on vs those who don’t. Use UTM params and GA events as shown above.

Closing & call to action

Adding jewelry try on Salesforce Commerce Cloud no longer needs a heavy integration. With tryitonme.com you can test VTO quickly using shareable links, choose a zero‑code or embedded approach, and instrument analytics to measure impact. Ready to try it on your PDPs?

Scroll to Top