Here's each route, what it takes, and where people usually get stuck.
Pick how to integrate AI skin analysis before you start
Ask two questions. Who'll maintain this, a store manager or a developer? And does your storefront use a standard cart, or a custom one?
- A WooCommerce store run by a non-developer: use the plugin.
- A WordPress content site with a separate shop, or a landing page: the WordPress plugin or the script tag.
- A custom or headless front end (Next.js, Nuxt, a React app): npm, React or Vue.
If you're actually on Shopify, use the app from the Shopify App Store instead. We explain why the two exist side by side in skin analysis API vs Shopify app.
WooCommerce: the plugin route
This is the one most non-Shopify stores end up with, and it's the least technical.
- Download the plugin from your Face Age panel.
- In WordPress, go to Plugins and upload it, or drop it into
/wp-content/plugins. - Find Face Age under Installed Plugins and activate it.
- Open the Face Age settings and paste your Face Age ID, which you copy from the panel.
After that, the scan configuration (quiz questions, product mapping, routine, colors, language) happens in the Face Age panel, not in WordPress. People sometimes go hunting for those settings in the WooCommerce menus. They aren't there.
Product matching works the same as on Shopify. You map each product to the concerns it's for, then set severity, AND/OR conditions and exclusions. Plan an afternoon for a catalog of a few hundred products. It's the part that decides whether the recommendations make sense, so don't rush it.
WordPress without WooCommerce
The WordPress plugin installs the same way: upload, activate, paste your ID. It suits brands whose WordPress site is mostly content, like a skincare blog or a brand site that links out to a shop elsewhere. You can still show products and routines. Just make sure the product links point to wherever people actually buy.
Any website: the script tag
For a static site, a landing page or a CMS that lets you add custom code, the script tag is the fastest option. You add the Face Age script from the CDN in the page head, place a container div where the scan should appear, and create the scanner with your Client ID from the panel.
```html
```
displayModel decides how the scan shows up: inline as a section, as a widget, or as a popup modal.
My rule of thumb: inline section on a dedicated "find your routine" page, modal on product and collection pages, where you don't want to push content down.
Custom and headless stores: npm, React and Vue
If a developer owns your storefront, install the package and render it inside your app.
With npm: npm install face-age (or yarn add face-age), import it, point it at a container and pass your Client ID. Options include the language and whether the quiz and history are on.
With React: npm install face-age react-face-age, then drop the ReactFaceAge component where the scan should render, with your options and an onLoad callback.
With Vue: vue3-face-age for Vue 3 or vue-face-age for Vue 2, registered as a component and placed in a template.
The bit that takes real developer time is the cart. On a headless store, your developer sends your catalog in and listens for add-to-cart and checkout, so that when a shopper taps "add" on a recommended product, it lands in your actual cart. Budget for testing that on mobile, on slow connections, and with products that have variants. Variants are where most bugs hide.
The developer docs and API reference are linked from the integrations page.
Where scan results go on a non-Shopify site
Installation is half the job. The other half is getting leads and events into your existing tools. On non-Shopify sites you can connect:
- Klaviyo, Mailchimp and Omnisend for email lists
- HubSpot for CRM contacts
- Google Analytics (GA4 Measurement ID or a GTM container) and Facebook Pixel for events and audiences
- Webhooks, with several URLs and their own headers, for anything else
- Email, to send results to customers through Face Age's mail server or your own SMTP
Shopify Customers is the only destination that's Shopify only.
The analytics events are worth setting up early. The scanner reports each step separately: opening it, answering quiz questions, taking the selfie, leaving an email, viewing products and adding to cart. That gives you a real funnel in GA4 instead of a single "quiz completed" event, so you can see where people drop off.
A testing checklist before launch
Run a full scan on a phone and a desktop, in each language you sell in. Add a recommended product to the cart and check it appears with the right variant and price. Finish a test checkout. Then look in GA4 or your webhook logs to confirm the events arrived, and check your email platform for the test lead. It takes an hour, and it's far cheaper than finding a broken cart from a customer email.
Language and layout
The scan supports 40 languages, including right-to-left layouts. Set the language in your options or panel to match the page it's on. On a multi-language WordPress site, check each language version separately, since a plugin that translates your pages won't necessarily set the scanner's language for you. We covered this in more depth in multilingual skin analysis for international beauty stores.
Privacy and the scan
Whichever route you take, update your privacy policy to say that you use AI skin analysis, what's collected (a selfie, quiz answers, an email if you ask for one) and where history is stored. We wrote a separate guide on AI skin analysis privacy.
Keep your on-page wording honest too. The analysis reads visible skin from a photo. It's Not a medical diagnosis; does not replace a dermatologist.
What it costs off Shopify
Features are the same as the Shopify app, but non-Shopify plans are priced separately from the Shopify App Store plans. Check the pricing page for the current options, or the Enterprise page if you need white label or a custom API setup.
FAQ
Can I use Face Age without Shopify? Yes, through the WooCommerce and WordPress plugins, a script tag, npm, React or Vue.
Do I need a developer to add skin analysis to WooCommerce? Not for the plugin. A developer helps for headless or custom carts.
Where do scan results and leads go on a non-Shopify site? To Klaviyo, HubSpot, Mailchimp, Omnisend, Google Analytics, Facebook Pixel, webhooks or email.
Is the skin analysis a medical test? No. Not a medical diagnosis; does not replace a dermatologist.
