GlassOn Logo
Integration Guide · Shopify

Go live with virtual Try-On in 3 simple steps .

Add Try-On, 360° View and Pupil Distance measurement to your Shopify store — no code, no developer. Follow the steps below and you’ll be live by tomorrow.

Start integration See what you’ll get
Setup time
~5 min
3D model ready
~1 day
Developer needed
None

What you’ll get

Three buttons that turn browsers into buyers.

After integration, these features appear automatically on your collection and product pages.

Try-On Button

Real-time virtual glasses try-on. Includes a Glasses Removal feature, so nearsighted shoppers can try frames without removing their own.

360° View Button

A full interactive 3D product view — shoppers see every angle, just like in a physical store.

Get Your PD

Customers measure their Pupil Distance online. Result is automatically attached to the order note.

Collection page with Try-On buttons
On collection pages
Product detail page with Try-On buttons (OS 1.0) Product detail page with Try-On buttons (OS 2.0)
On product pages

Integration steps

Show & hide Try-On and 360° View buttons.

Follow these three steps once. Everything stays in sync from your Shopify admin afterward.

Theme version
1

Step 1

Submit Request

Open the GlassOn app in your Shopify admin and head to your product list. Pick the frames you want Try-On enabled for, and we’ll start building a 3D model of each.

  • In your product list, select the specific products you want to apply the Try-On function to.
  • Click the Making Data button to upload the required reference photos for each product.
  • Our team reviews the photos and builds your 3D model. Typical turnaround is ~1 day per product.
Product list with the Making Data button
Product list · click Making Data to upload photos
2

Step 2

Activate Try-On

Once the 3D model is ready (usually a few days after submission), the Making Data button transforms into an ON/OFF toggle — giving you full control of which products appear with Try-On on your storefront.

  • While the 3D model is being generated, you’ll see a spinning gear icon on each pending product.
  • When ready, the row flips to a toggle — switch it ON to publish Try-On for that product, or OFF to pull it down without removing the 3D data.
  • If something goes wrong with the input photos, you’ll see an error state with a direct re-upload action.
Toggle Try-On screen
Flip the toggle ON to publish Try-On for each product
3

Step 3

Set up the button appearance in your theme

Controls live in your Shopify Theme Editor. Instructions differ slightly between OS 1.0 (classic themes) and OS 2.0 (Dawn-based themes) — use the toggle above to switch views.

3.1

Collection pages

  1. 1 From your Shopify Admin, go to Online Store → Themes, choose your theme, and click Customize.
  2. 2 Open App Embeds in the left sidebar. Turn on the collections you want Try-On to appear on: Collection Tryon Featured Collection Tryon
  3. 3 Tweak the button appearance — colors, labels, size — from the block’s property panel.
Theme editor with App Embeds selected
3.2

Product detail page

OS 1.0 OS 2.0

Nothing to do here.

Try-On & 360° View buttons are embedded into the product page automatically on OS 1.0 themes — no block setup needed.

  1. 1 In the Theme Editor top-menu, switch to the Products page.
  2. 2 Open Sections and select Product information.
  3. 3 Click Add Block and add the Tryon and 360 View Button block.
  4. 4 Fine-tune the appearance via the block’s property panel.
Theme editor — adding Tryon block to Product information
4

Step 4

Set Glasses Dimensions Optional

Try-On auto-fits by default. Add the lens width to unlock precision fitting when combined with your customer’s PD.

  • By default, Virtual Try-On will auto-fit to your customer’s face shape.
  • Input the lens width for each product. When both the lens width and your customer’s PD (Pupillary Distance) are available, the 3D model will accurately represent the glasses’ real-world dimensions.
Input lens width for glasses
Set lens width per product for precision fitting

Pupil Distance

Show & hide the Get Your PD button.

Let customers measure their own Pupil Distance online. The measurement gets attached to their order automatically.

OS 1.0

Toggle it on

In the GlassOn admin, open PD Measurement from the left menu and flip the On/Off toggle. That’s the whole setup.

Each customer’s PD result is automatically saved to the Order Note visible on the Admin order page.

PD Measurement toggle
A

Set up the button appearance

  1. 1Open the Theme Editor, switch to the Products page.
  2. 2Select Sections → Product information.
  3. 3Click Add Block → add the Get Your PD block.
  4. 4Customize the button in the property panel.
Add Get Your PD block
B

Show / hide the button

In the GlassOn admin, open PD Measurement and flip the On/Off toggle.

Each customer’s PD result is automatically saved to the Order Note visible on the Admin order page.

PD Measurement toggle
New in Virtual Try-On

Show every lens color in Try-On.

Build your colors once, assign them per variant, and Try-On opens on the exact shade your shopper picked — all from the GlassOn admin, no theme changes.

1

Your own lens color library

Create custom lens colors — tint, mirror and polarized finishes — once in Lens Colors, then reuse them across your whole catalog.

The Lens Colors library list in the GlassOn admin
Per-product lens swatches in the Try-on List
2

Assign colors in a few clicks

From Try-on List, open Assign lens colors. GlassOn auto-matches your existing Shopify color options, so setup takes seconds.

3

The right color, pre-selected

In Assign lens colors you set the default per variant, so Try-On opens on the exact lens color the shopper selected — always matching the variant they’re viewing.

The Assign lens colors dialog mapping Shopify values to lens colors per variant

That’s all

Need something custom?

If the default design doesn’t fit your brand, our team can tailor the buttons, flow, and styling to your store. We’ll work with you directly — no ticket queues.

Email glasson@sk-global.biz WhatsApp +84 834 252 111 Back to steps