> ## Documentation Index
> Fetch the complete documentation index at: https://getfaceage.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Publish on your store

> Go live with Face Age as a popup on every page or as a section on your homepage.

[Publish Face Age on your store](https://www.youtube.com/embed/QdF5OIcANck?list=PLx99QemuyvIXO23U83c1K-TNWGLiE-IOV)

After creating a quiz and adding products, the third step is **publishing** Face Age on your store.

* **Initialize & Publish** — finish the setup wizard before customizing templates or storefront extensions.
* **Display modes**:
  * **Modal** — adds a Face Age badge to all pages. Activate it in **Online Store → Themes → Customize → App embeds → Skin Analyzer Popup**.
  * **Section** — adds the Face Age analyzer to your homepage as a section. Activate it in **Online Store → Themes → Customize → Add section → Skin Analyzer**.
* You can switch between display modes at any time.
* **Storefront extensions** — optional theme blocks you can add after publishing.

## Initialize & Publish

The Initialize & Publish workflow walks you through going live, with clear guidance at each step and a simplified publishing process.

![Initialize and Publish workflow in the Face Age app](https://mintcdn.com/getfaceage-com/LXFwytftXy5t832p/images/help/2026-08-initialize-publish.png?fit=max\&auto=format\&n=LXFwytftXy5t832p\&q=85\&s=cf8fd39ccfcdb8a6917495341305925a)

> [!TIP]
>
> Complete Initialize & Publish before customizing templates or storefront extensions.

## Display modes

In the publish section, choose how Face Age appears on your website: **Modal** or **Section**.

### Modal mode

A Face Age badge is added to all your pages. You can customize the badge in the **Template** tab of [Customization](https://getfaceage.com/docs/help-center/customization.md).

![Publish page with the Modal display mode](https://mintcdn.com/getfaceage-com/72Ot9wxq6pOAUNYj/images/help/app-publish-modal.png?fit=max\&auto=format\&n=72Ot9wxq6pOAUNYj\&q=85\&s=f338f39ce6db100c6e385ade82109b6a)

To activate modal mode:

1. Go to **Online Store → Themes → Customize**.
2. Open **App embeds**.
3. Activate **Skin Analyzer Popup**.

![Theme editor App embeds with Skin Analyzer Popup turned on and the Face Age badge on the store](https://mintcdn.com/getfaceage-com/72Ot9wxq6pOAUNYj/images/help/shopify-app-embed.png?fit=max\&auto=format\&n=72Ot9wxq6pOAUNYj\&q=85\&s=222cba961c0e22e5661a6c4d7f6f593a)

### Section mode

The Face Age analyzer is added as a section on your homepage.

![Publish page with the Section display mode](https://mintcdn.com/getfaceage-com/72Ot9wxq6pOAUNYj/images/help/app-publish-section.png?fit=max\&auto=format\&n=72Ot9wxq6pOAUNYj\&q=85\&s=2cbf6a9cd0fe79e8b31c7e6e006a15a3)

To activate section mode:

1. Go to **Online Store → Themes → Customize**.
2. Open **Sections** (selected by default).
3. In the template, select **Add section**.
4. Select **Skin Analyzer**.
5. Configure it like any other section, if needed.

![Theme editor Add section picker with the Face Age Skin Analyzer app section](https://mintcdn.com/getfaceage-com/72Ot9wxq6pOAUNYj/images/help/shopify-add-section.png?fit=max\&auto=format\&n=72Ot9wxq6pOAUNYj\&q=85\&s=4eb7dbf5859dbe3b0481793cc448bcdb)

You can change the Face Age mode on your store whenever you want.

## Storefront extensions

Once Face Age is live as a modal or section, you can add optional theme blocks for a more personal storefront. They don't replace Initialize & Publish — they sit on top of it.

| Block | What it does |
| - | - |
| **Product Insight** | On a product page, shows whether the item matches the customer's analysis and which concerns it targets. Product templates only. |
| **Customer Recommended Products** | A carousel of products matched to the customer's latest scan. |
| **Encouragement Banner** | Invites customers to scan again or shop their personalized routine. |
| **Customer Analysis History** | Shows the latest analysis scores so returning customers pick up where they left off. |

See [Storefront extensions](https://getfaceage.com/docs/help-center/storefront-extensions.md) for placement steps.

> [card] [Face Age not showing on your store?](https://getfaceage.com/docs/help-center/troubleshooting.md)
>
> Troubleshoot display issues and JavaScript errors.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.