Eyewear Try On Salesforce Commerce Cloud — A Zero‑Code, Link-Based VTO Guide

Quick Summary

Introduction — What this guide covers and who it’s for

You’re about to get a practical, no-nonsense playbook for adding eyewear try on Salesforce Commerce Cloud (SFCC) pages using a link-based virtual try-on (VTO) approach. This guide covers SFRA and SiteGenesis, where to place the PDP try on button, front-end embed options (modal/iframe vs new tab), CSP and performance notes, analytics wiring, QA checklists, and a low-risk launch plan.

If you manage storefronts, merch, or engineering on SFCC, you’ll see why a zero-code, link-based solution like tryitonme.com delivers fast time-to-market and minimal engineering overhead compared with SDK or cartridge approaches. For a general overview of VTO options for SFCC, see Webkul’s SFCC overview. For SFCC-specific UX guidance and PDP placement patterns, see our companion UX guide for Commerce Cloud: Commerce Cloud UX guide.

Quick business-first bullets for e‑commerce managers and technical leads:

Why tryitonme.com is the Right Fit for Your Business

We recommend tryitonme.com when you want a practical path to VTO on SFCC without SDKs or custom cartridges. Key reasons:

Request a demo or trial.

Pre‑implementation checklist (prepare before you touch templates)

Give this checklist to your merch/dev lead before you start editing templates:

High-level implementation flow — how embedding works (overview)

Follow these 7 steps — who does what is noted:

  1. Merchant: Create tryitonme.com project and upload product photos per SKU.
  2. tryitonme.com: Process assets and generate per‑SKU try-on links (managed AR processing).
  3. Merchant/Dev: Map SFCC SKUs to tryitonme links (CSV or admin table).
  4. Dev: Add PDP try on button to product template with data attributes (data-sku, data-tryon-url).
  5. Dev/Front-end: Implement client handler — modal/iframe or new tab flow; wire CSP changes if embedding via iframe.
  6. QA: Validate links on staging across browsers/devices and check analytics events.
  7. Launch: Soft launch to portion of traffic; monitor KPIs and roll out globally.

For Webkul’s overview of link-based VTO approaches in SFCC, see Webkul.

  1. Sign up at tryitonme.com and create a project.
  2. Upload product photos (front and side views recommended for eyewear).
  3. For each SKU, provide SKU ID, product name, and variant info for mapping.
  4. Request link generation; tryitonme.com will return a unique try-on URL per SKU or collection.
  5. Verify each link opens the correct model and facial mapping behaves as expected. Accuracy guidance: accuracy guide.
  6. Verify on-device camera flows and fallback options.

Sample asset-to-link processing notes: KiksarVR process notes.

Add the PDP try on button (template edits)

Where to place the button: near Add to Cart on the PDP, close to variant selectors so customers can try the exact SKU they’re viewing.

Data attributes to include:
data-sku — SFCC product ID (e.g., product.ID) and
data-tryon-url — the tryitonme.com link for this SKU.

Visuals to include in your docs: Screenshot/GIF “Adding the PDP try on button in ISML” and “Modal try-on on desktop and mobile”.

SFRA-specific edits

Add to templates/product/productDetails.isml (or include). Short notes:

Reference: Webkul SFRA best practices and Commerce Cloud UX guidance.

SiteGenesis-specific edits

If using SiteGenesis:

Reference: SiteGenesis considerations.

Front-end handler options: modal/iframe vs new tab (UX tradeoffs)

Pros:

Cons:

Read more about modal tradeoffs: Zakeke guide.

New Tab (fastest)

Pros:

Cons:

Theme edits & front-end checklist (CSS, responsive, accessibility)

Security, CSP and performance considerations in SFCC

Analytics & data-layer wiring (events to capture)

Events you should capture and map to GTM:

Example dataLayer push (short):

window.dataLayer = window.dataLayer || [];
dataLayer.push({
  event: 'open_tryon',
  product_sku: 'ABC123',
  tryon_url: 'https://tryitonme.com/vto?sku=ABC123'
});

Map these events in Google Tag Manager and use them for A/B testing and funnel analysis. For a practical measurement plan and GA4 mapping, see analytics guide.

QA plan and testing matrix (copy/paste checklist)

Copy/paste test matrix for staging sign-off:

Functional

Cross-browser / Device

Performance / Accessibility / Negative

Security

Pre-launch sign-offs — Merch confirms SKUs mapped; QA completes matrix; Dev clears caches and creates rollback plan.

Launch plan, rollback and post‑launch optimization

Rollback: Revert ISML/JS commit via git, clear SFCC caching and CDN caches, and re-run smoke tests. See rollout considerations at Webkul.

Troubleshooting & common issues (quick fixes)

Measurement & optimization after launch (KPIs and experiments)

KPIs

Experiments

See A/B testing ideas: Webkul.

Appendix — code snippets, analytics samples, QA checklist (copy/paste assets)

SFRA ISML snippet (drop-in)

<!-- templates/product/productDetails.isml -->
<button class="tryon-btn pdp-try-on-button"
        data-sku="${pdict.product.ID}"
        data-tryon-url="https://tryitonme.com/vto?sku=${pdict.product.ID}">
  Try On
</button>

Minimal modal JS (vanilla; expand for production)

// app_storefront_base/cartridge/client/default/js/tryon.js
document.addEventListener('click', function(e) {
  const btn = e.target.closest('.pdp-try-on-button');
  if (!btn) return;
  e.preventDefault();
  const url = btn.dataset.tryonUrl;
  if (!url) { alert('Try-on not available for this product'); return; }
  const modal = document.createElement('div');
  modal.className = 'tryon-modal';
  modal.innerHTML = `
    <div class="tryon-modal-inner" role="dialog" aria-modal="true">
      <button class="tryon-close" aria-label="Close">×</button>
      <iframe src="${url}" width="100%" height="80vh" frameborder="0" allow="camera; microphone"></iframe>
    </div>
  `;
  document.body.appendChild(modal);
  modal.querySelector('.tryon-close').addEventListener('click', () => modal.remove());
  // Focus management, ARIA and error handling omitted for brevity
});

dataLayer examples

// on click
dataLayer.push({ event: 'open_tryon', product_sku: sku, tryon_url: tryonUrl });

// when iframe sends ready (postMessage-based integration; optional)
dataLayer.push({ event: 'tryon_ready', product_sku: sku });

Full QA checklist (copy/paste)

Conclusion & Call to Action

Link-based VTO is a pragmatic, low-risk way to add eyewear try-on to SFCC PDPs. It reduces engineering overhead, speeds deployment, and delivers omnichannel reuse of per‑SKU links. If you want to evaluate a zero-code option that produces shareable try-on links and handles AR processing for you, request a demo at tryitonme.com.

Book a demo or request sample VTO links for 1–2 SKUs and we’ll show you how quickly it can be live on your PDP: tryitonme.com.

References and resources

FAQ

Link-based VTO avoids bundling SDKs or cartridges into your storefront. Instead, a managed service (like tryitonme.com) provides per‑SKU URLs you open in an iframe/modal or new tab. This reduces engineering lift and speeds time-to-market at the cost of some on‑page customization options available to full SDK integrations.

2. Where should I place the try‑on button on the PDP?

Place it near Add to Cart and variant selectors so the SKU context is clear. Test placement via A/B tests (beside Add to Cart vs under gallery) to find the best CTR and conversion lift.

3. What do I need to change in SFCC CSP to enable iframe embedding?

Add the tryitonme domain to frame-src (and script-src if you load remote scripts) via Business Manager → Administration → Site Development → Content Security Policy. See Webkul CSP guidance.

4. How should I track try‑on events in GTM?

Push structured events to the dataLayer like open_tryon, tryon_ready, tryon_interaction, and tryon_exit. Map those to GTM triggers and GA4 events for funnel analysis. See the analytics examples in the Appendix and the measurement guide: analytics guide.

5. What are good fallbacks if camera permissions are denied?

Offer an upload-photo flow, or surface an “Open in new tab” CTA that uses a simpler permission model. Also show a clear error banner with next steps and support contact.

Scroll to Top