Most beauty brand operators we talk to assume that adding AR try-on to their Shopify store requires a developer sprint, a custom app, and probably a few weeks of back-and-forth with an agency. That assumption is often wrong — and it's kept a lot of brands from moving forward on something that could meaningfully change their conversion and return economics. Here's the actual process, step by step.

What You Need Before You Start

The prerequisites are straightforward. You need a Shopify store (any plan works, though Shopify Plus gives you more theme flexibility) and a product catalog for which you have shade data. That shade data should include, at minimum: each shade's hex color code, the shade name as it appears in your catalog, the finish type (matte, satin, glossy, metallic), and the SKU identifier that matches your Shopify product variants.

A note on hex codes: these should be the actual pigment hex codes for the shades as they appear in the product, not swatch photography color-picked values. Swatch photos are lit inconsistently and produce hex values that can be off by 8-15 hue units from the true pigment color. If your brand doesn't have canonical hex codes in your product data, the best source is your manufacturer's color specification sheets. Most contract manufacturers and labs document these. If you're using a domestic lab, your formulator can provide them. Getting accurate hex values is the single most important preparation step — it's what the rendering engine uses to produce a photorealistic result rather than an approximation.

Step 1: Create Your Brand Account and Upload Your Shade Library

After signing up for Lumeglint, your first task in the dashboard is building your shade library. You can do this two ways: CSV upload or manual entry. For catalogs over 20 shades, CSV is significantly faster.

The CSV format requires five columns: sku_id, shade_name, hex_code, finish_type, and product_family. The product_family field groups shades by product category (lipstick, foundation, eyeshadow) and controls which shades are available in which try-on context.

After upload, the dashboard shows a preview rendering of each shade on three Fitzpatrick reference skin tones. Review these before going live — if a shade looks wrong on a particular skin tone in the preview, that's usually a sign that the hex code is off, not that the renderer is broken. Correct the hex code and re-upload the row; it takes about 30 seconds and the preview updates immediately.

In our experience, the review step catches approximately 12-18% of shades in a new catalog that have inaccurate hex values on first upload. Most of these are minor corrections — small hue or saturation shifts. A few are more significant, typically shades where the brand was using a swatch-photo-derived value rather than a formulation value. Taking 20-30 minutes to review the preview library before going live is worth it.

Step 2: Add the JavaScript Snippet to Your Theme

The Lumeglint embed is a 3-line JavaScript snippet. It looks like this in practice:

<!-- Lumeglint AR Try-On -->
<script src="https://cdn.lumeglint.com/v1/embed.js" data-brand-id="YOUR_BRAND_ID" defer></script>
<div id="lg-tryon-trigger" data-sku="{{ product.selected_or_first_available_variant.sku }}"></div>

In Shopify, you add the script tag to your theme's theme.liquid file in the <head> section, and the trigger div to your product detail page template (product.liquid or your theme's equivalent). The data-sku attribute uses a Liquid variable that outputs the current variant's SKU — this is what tells the embed which shade to load when a shopper opens the try-on.

If your Shopify theme uses Online Store 2.0 architecture (Dawn and most themes released after 2021), the product page is a section file, typically sections/main-product.liquid. The placement guidance is the same; the file path differs.

That's the technical implementation. For most Shopify themes, this takes 10-15 minutes to add, save, and preview. You don't need a developer for this step — any team member who can access the Shopify theme editor and is comfortable editing a Liquid file can do it. If your brand has never edited a theme file and you'd prefer not to, the Shopify theme editor's "Add section" workflow provides a no-code path that doesn't require touching Liquid directly.

Step 3: Configure the Try-On Button Appearance

The default Try On button that appears on your PDP after the snippet is added is functional but unstyled — it inherits your theme's base button styles. Most brands want to match it more closely to their design system before going live.

Button customization happens in the Lumeglint dashboard under Brand Settings > Try-On Widget. You can set:

  • Button label text (default: "Try It On" — many brands prefer "See It On You" or "Try On This Shade")
  • Button background color and text color (using hex input — we recommend matching your primary CTA color)
  • Button border radius (to match your theme's button shape)
  • Button placement: inline with the add-to-cart button, or floating above the color swatch selector
  • The overlay modal's header color and the camera permission prompt text

These style changes propagate to your live store in real time — no republishing required. Changes to the try-on modal can be previewed in the dashboard before they go live using the built-in preview mode, which renders the modal against a sample product page layout.

Step 4: Test Before Launch

Before announcing the try-on feature to your customers, run through this checklist on your live store in a private browsing window (to ensure you're seeing the experience as a new visitor, without cached state):

  1. Navigate to a product page for a shade-eligible SKU. Confirm the Try On button appears.
  2. Click the button. Confirm the camera permission prompt appears with your configured disclosure text.
  3. Grant camera permission. Confirm the AR overlay loads within 2 seconds on a standard device.
  4. Switch between shade variants using your product page's variant selector. Confirm the try-on shade updates without requiring a page reload.
  5. Test on both desktop (webcam) and mobile (front camera). The experience is slightly different on each — desktop uses the webcam in a full-screen modal; mobile uses the front camera in a portrait-orientation overlay.
  6. Check that the "Add to Cart" button is accessible from within the try-on modal (the default behavior includes an add-to-cart action in the modal footer).

If any step produces unexpected behavior, the Lumeglint dashboard's debug mode shows a live log of embed events and API calls, which makes it straightforward to identify configuration issues without needing to contact support.

Step 5: Connect Analytics to Your Existing Stack

Lumeglint's native dashboard shows per-SKU try-on session counts, shade engagement time, and add-to-cart rate from within try-on sessions. Most brands also want this data visible in their existing analytics stack — typically Shopify Analytics, a tag-based analytics platform, or a data warehouse via Klaviyo or a custom CDP integration.

The embed fires standard browser events for key try-on actions: lg:session_start, lg:shade_viewed, lg:add_to_cart, and lg:session_end. These can be picked up by any tag management system and forwarded to your analytics platform as custom events. If you're using Klaviyo, we have a native integration that creates a Try-On Viewed activity in your customer profiles, which you can use to trigger flows — for example, a follow-up sequence to customers who tried on a shade but didn't purchase within 48 hours.

The Klaviyo integration in particular has been one of the more commercially interesting connections for early pilot brands. Shoppers who tried on a shade without purchasing respond at measurably higher rates to a well-timed reminder email that references the specific shade they tried than they do to generic abandoned-cart messaging. The try-on data gives your Klaviyo flows a specificity that generic cart abandonment sequences can't match.

Common Setup Questions

A few questions we hear often from Shopify brand teams during setup:

  • "Does it work with metafields-based shade data?" Yes. If your Shopify catalog uses metafields to store shade hex codes rather than having them in the Lumeglint shade library, you can configure the embed to pull hex values from a specified metafield namespace rather than the dashboard library. This is useful for brands with large catalogs that are already maintaining shade metadata in their Shopify data model.
  • "Can we restrict try-on to certain product collections?" Yes, in the dashboard under Collection Settings you can specify which Shopify collection handles are try-on eligible. SKUs outside those collections will not show the Try On button.
  • "Does it affect page load speed?" The embed script loads deferred and does not block page rendering. On a standard Shopify theme, PageSpeed Insights scores typically drop by 1-3 points after addition, within normal variance.
  • "What happens if a shopper is on a device that doesn't support WebGL?" The embed detects WebGL capability before rendering the Try On button. On devices without WebGL support (primarily very old mobile hardware and some older Android browsers), the button is not shown rather than producing a broken experience.

The full setup documentation is available in the Lumeglint help center. Most brands complete the end-to-end integration in under two hours, including shade library upload. If you'd like a guided walkthrough before starting, book a demo session through our website and we'll walk you through your specific theme setup live — it's a better use of time than troubleshooting alone.