Eyewear Try On BigCommerce: How to Embed a PDP Try On Button with Zero‑Code Virtual Try‑On

Introduction — what eyewear try on BigCommerce looks like

If you sell frames on BigCommerce, eyewear try on BigCommerce means a shopper clicks a “Try on” button on your product page and a browser-based AR session overlays the selected frames on their live camera or uploaded photo. In practice it’s a quick, camera‑based augmented reality overlay that stays aligned as the shopper moves their head — the same in‑store feel, delivered online. See an example implementation at Cermin: TryitonMe eyewear virtual try‑on.

Virtual try‑on is already proven to move the needle: retailers report measurable conversion lifts after adding try‑on, and data-driven reviews show up to ~18% higher conversion for stores using VTO tools versus those that don’t (see FittingBox) and other industry summaries (see DigitalCommerce360). For ROI context, read Cermin: ROI for blue‑light glasses try‑on.

This post is a practical, zero‑code how‑to for BigCommerce merchants. You’ll get clear guidance on PDP placement, theme edits (no developer required), QA and analytics, handling mobile and webview caveats, and a minimal implementation using a link‑based VTO provider like tryitonme.com. Bold takeaway: you can add a working try‑on flow to your product page in hours with no SDK, API, or developer lift. See the UX guide at Cermin: Eyewear Try‑On UX for BigCommerce.

Why add virtual try on BigCommerce? (benefits for merchants)

Virtual try on BigCommerce isn’t a gimmick — it solves the core problem of uncertainty that drives cart abandonment and returns. Here are the business benefits, each tied to industry reporting:

• Reduced returns and fewer “just to try” orders — VTO helps shoppers judge fit and style before purchase (see FittingBox analysis).
• Higher conversion and AOV — retailers with VTO report measurable conversion lifts; some data reviews show up to ~18% higher conversion vs. non‑VTO stores (see DigitalCommerce360 and FittingBox).
• Better product confidence and differentiation — AR gives an in‑store visual experience online and can increase average order value when shoppers compare frames quickly (see Glamar and Varai).
• Faster time to market with link‑based options — compared with SDK or native app approaches, a hosted, link‑based VTO gets you live much faster (see KiksarVR notes).

If you want tangible ROI, add VTO to the places shoppers decide to buy — your product detail pages. Cermin: ROI for sunglasses VTO.

Why tryitonme.com is the Right Fit for Your Business

If your priority is speed and zero developer lift, tryitonme.com is designed for that exact workflow: a hosted, link‑based VTO that you deploy by pasting a URL into your PDP.

Why tryitonme.com fits BigCommerce merchants:

• Zero‑code link deployment — no SDK, no API, no developer lift. Visit tryitonme.com.
• Fast turnaround — product VTO links generated and ready for PDPs in under 3 business days. TryitonMe.
• Accurate accessory VTO (eyewear, jewelry, watches, hats) built for accessory fit and styling. TryitonMe accessories.
• Centralized link management — update assets without touching theme code. TryitonMe.

Onboarding steps (exact):

1. Customer purchases a 6‑month package based on the quantity of SKUs needed.
2. Customer sends standard product photos (e.g., front/side for eyewear).
3. The tryitonme.com team/AI handles all AR processing.
4. Customer receives the unique, ready‑to‑use try‑on link for deployment in under 3 business days.

No SDK / no API / no developer lift — Book a Demo at Cermin: TryitonMe pricing.

How tryitonme.com works (short operational overview)

Want the short flow? Here’s how a link‑based VTO works so you can embed try on BigCommerce quickly.

• Signup & package selection — choose the six‑month plan matching your SKU count. tryitonme.com.
• Upload product photos — standard front/side shots for frames (the team/AI handles AR asset creation). tryitonme.com and guidance at Cermin: blue‑light glasses try‑on.
• Processing — tryitonme.com processes assets and maps SKUs to hosted VTO sessions (team + AI). tryitonme.com processing.
• Receive links — you get a unique VTO URL per product; paste into the PDP and you’re live in under 3 business days.

This is a hosted, browser AR experience that uses in‑browser face tracking and camera APIs; no app or SDK installation is required. For more on in‑browser AR & face tracking, see Glamar.

Where to put the PDP try on button (PDP placement best practices)

Placement matters. Treat the PDP try on button as a secondary but highly visible action near purchase decisions.

• Rule of thumb: place Try on within the buy box and/or near primary media; style as a secondary action that’s easy to scan.
• Mobile vs desktop: on mobile put the button within the first screen (near price and Add to Cart); on desktop place it beside or just under Add to Cart or under the main image.

[Caption for screenshot: Annotated desktop & mobile PDP showing recommended Try on placements — capture these in your sandbox store.] See example UX notes at Cermin: Eyewear Try‑On UX.

Ideal locations on BigCommerce product page

• Inside the buy box (beside price and Add to Cart) — most immediate and converts well.
• Below Add to Cart (as secondary action) — keeps hierarchy clear while remaining visible.
• Near product images/gallery (desktop) — encourages shoppers to try frames as they view photos.

Suggestion: capture two screenshots (desktop buy box and mobile folded view) and annotate the button placement for your team.

Button copy and icon suggestions

Quick copy variants to A/B test:

• Try on
• Try on virtually
• See on face
• Try frames
• View on me
• Try on now

Accessibility example: aria-label="Open virtual try-on for this frame"

Icon ideas: eyeglasses silhouette, camera + glasses, face outline with frames. Use visible text (don’t rely on icon‑only buttons) and include aria attributes for screen readers.

Embed try on BigCommerce — step‑by‑step (zero‑code)

Here’s the minimal path to embed try on BigCommerce: create a VTO link, paste a single anchor into the PDP, and QA.

Step 1 — Create product VTO link in tryitonme.com

1. Sign in at tryitonme.com and choose your 6‑month package.
2. Upload standard product photos (front/side for eyewear).
3. Wait for tryitonme.com team/AI to process assets.
4. Copy the unique VTO URL for each SKU. (You’ll receive links in under 3 business days.)

Step 2 — Add link to PDP (simple anchor tag or link button)

Non‑developer one‑liner — paste this into your product template or Theme Editor custom HTML block:

<a
  href="https://app.tryitonme.com/vto?product_sku={{product.sku}}"
  class="button button--secondary pto-button"
  target="_blank"
  rel="noopener"
  aria-label="Open virtual try-on for {{product.title}}"
  data-pto-product-sku="{{product.sku}}"
  data-pto-source="pdp-button"
>
  Try on virtually
</a>

Recommendation: use target="_blank" to avoid iframe/CSP camera restrictions and simplify testing. See BigCommerce AR requirements for HTTPS and camera context at BigCommerce: Ecommerce & AR.

Step 3 — Styling and responsive placement (CSS hints)

Keep styles consistent with your theme:

.pto-button {
  margin-top: 0.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

• Use existing button classes to match brand.
• On mobile, stack the button under Add to Cart but within the same container.

Step 4 — Optional: open in modal/iframe and accessibility considerations

Modal/iframe pros and cons:

• Pros: keeps user visually on PDP.
• Cons: more dev work and possible CSP/camera access problems.

If you build a modal:

• Add aria-haspopup, aria-controls, role="dialog", and aria-modal="true".
• Trap focus in the modal; ESC closes it and focus returns to the triggering button.
• If iframe is blocked or camera fails, fall back to opening the link in a new tab.

Theme edits on BigCommerce (practical guidance)

You can implement without editing templates, but here are three paths.

Where to edit (Stencil theme files, Script Manager, Theme Editor)

• Theme Editor (no‑code): paste custom HTML into a product block if your theme supports it.
• Script Manager: inject JS to append the button to buy box selectors site‑wide.
• Direct template edits (developer): edit templates like templates/pages/product.html or components/products/buy-box.html (names vary). Always duplicate the theme first. See BigCommerce support: BigCommerce Support and Cermin UX notes.

Developer tip: duplicate theme, make edits, then preview via the theme preview link before publishing.

Example snippet to place a PDP try on button

{{!-- Virtual Try-On Button (tryitonme.com) --}}
<a href="https://app.tryitonme.com/vto?product_sku={{product.sku}}"
   class="button button--secondary pto-button"
   target="_blank"
   rel="noopener"
   aria-label="Open virtual try-on for {{product.title}}"
   data-pto-product-sku="{{product.sku}}"
   data-pto-source="pdp-button">
  Try on virtually
</a>

Versioning and staging: how to test in a safe environment

• Duplicate the active theme.
• Implement and QA on the duplicate using the theme preview.
• Only publish when QA is complete. For complex rollouts, use a sandbox store or a staged release.

QA and pre‑launch checklist (covering testing and analytics)

Functional tests (must‑test)

• Button present on all targeted SKUs. (Must test)
• Clicking opens tryitonme.com VTO (new tab or modal) without JS errors. (Must test)
• Correct product/variant maps into the VTO session (SKU matches). (Must test)

Visual & UX tests

• Button visible and legible across breakpoints.
• No layout shifts that hide price/Add to Cart.
• Accessible aria‑labels and keyboard focus order.

Performance tests

• PDP load time acceptable; added code is non‑blocking.
• Lazy‑load any modal JS; link approach avoids heavy bundles. See Cermin: mobile performance.

Cross‑browser & device tests

• Test Chrome, Safari, Edge, Firefox.
• Test iOS (Safari) and Android.
• Test social app webviews (Instagram, Facebook, TikTok) — some webviews limit camera access; document behavior. See BigCommerce AR notes.

Privacy & permissions

• Ensure VTO runs over HTTPS (camera APIs require secure contexts). BigCommerce: AR & HTTPS
• Add microcopy: “Used only to render virtual try‑on, not stored” near the button or modal.
• Perform legal/privacy review for GDPR regions.

Analytics & tracking

Suggested events:

• try_on_started (button click / VTO load)
• try_on_completed (session end)
• try_on_duration (seconds)

Add data attributes to the button (data-pto-product-sku, data-pto-source) and use GTM to fire events on .pto-button clicks. Tie these events back to Add to Cart and Purchase to measure lift. See analytics guidance at Cermin: VTO analytics.

Common issues & troubleshooting

Theme JS conflicts, CSP/CORS, modal iframe restrictions

– Symptom: modal blocked or iframe fails — check CSP and prefer opening in a new tab as fallback. See BigCommerce AR notes.

– Symptom: button click does nothing — open the link directly in a browser to test; check console for errors. For common UX and calibration mistakes, see troubleshooting tips in our VTO mistakes guide: Cermin: VTO mistakes.

Button not visible (CSS / template issues)

Five quick DevTools checks:

1. Is the element in the DOM?
2. Is display set to none?
3. Is it behind another element (z‑index)?
4. Is a parent container clipping it (overflow hidden)?
5. Are global styles hiding the selector?

Camera failing on iOS

• Ensure HTTPS and latest iOS. See BigCommerce AR notes.
• If in a social webview, instruct users to open the link in Safari for full camera support.

If you can reproduce the issue: reproduce → check the console/network logs → open the VTO link directly → escalate to tryitonme.com support with logs. For platform comparisons (accuracy and tradeoffs), see our analysis at Cermin: tryitonme vs fittingbox.

Launch & optimization tips

A/B test button copy/placement

Test ideas:

• Copy: “Try on” vs “Try on virtually” (metric: button CTR).
• Placement: beside Add to Cart vs under product images (metric: CTR → Add to Cart lift).
• Measure: try_on_started → add_to_cart → purchase; monitor returns for VTO users. See performance case studies at FittingBox.

Use VTO engagement data to refine merchandising

• High try‑on, low purchase: review price, photos, variant availability.
• High try‑on, high conversion: promote those frames in banners, bundles, or paid ads. See merchandising insights from VTO case studies at DigitalCommerce360.

Quick checklist summary (printable one‑page)

Pre‑implementation

• Choose link‑based VTO (Cermin: TryitonMe pricing).
• Prepare product photos and SKU list. Cermin: photo guidance.

Implementation

• Add PDP try on button (buy box / near images).
• Use clear copy and aria‑labels.
• Include tracking attributes.

QA

• Button visible and functional on all devices.
• Camera works on major browsers and iOS/Android.
• No JS errors or performance regressions.

Post‑launch

• Track try_on events, conversion, and returns.
• A/B test copy and placement.
• Use engagement to merchandise top performers.

Call to action: Try tryitonme.com now

Get eyewear try on BigCommerce live fast with a zero‑code, link‑based approach. Create your first VTO link at tryitonme.com, paste it into your PDP, and follow the QA checklist above — you can have a working try‑on experience in hours and a unique try‑on link in under 3 business days. TryitonMe.

Ready to move quickly? Book a Demo or start a pilot to get dedicated onboarding and asset processing.