> For the complete documentation index, see [llms.txt](https://docs.sizebay.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.sizebay.com/size-and-fit-data-integration/product-integration-onpage.md).

# Product Integration (OnPage)

{% hint style="info" %}
No app, API token, or client credentials required. The only installation step is adding the Sizebay embed script to your store theme.
{% endhint %}

### Fields Summary

<table data-header-hidden><thead><tr><th valign="middle"></th><th valign="middle"></th><th valign="middle"></th><th valign="middle"></th></tr></thead><tbody><tr><td valign="middle"><strong>Field</strong></td><td valign="middle"><strong>How It's Read</strong></td><td valign="middle"><strong>HTML Source</strong></td><td valign="middle"><strong>Notes</strong></td></tr><tr><td valign="middle">Product Name</td><td valign="middle">Automatic</td><td valign="middle">page &#x3C;title> / H1</td><td valign="middle">—</td></tr><tr><td valign="middle">Product Image</td><td valign="middle">Automatic</td><td valign="middle">First image rendered</td><td valign="middle">Ensure main image is correct</td></tr><tr><td valign="middle">URL / Permalink</td><td valign="middle">Automatic</td><td valign="middle">Current page URL</td><td valign="middle">URL changes create a new record</td></tr><tr><td valign="middle">Sizes</td><td valign="middle">Automatic</td><td valign="middle">Size selector (HTML)</td><td valign="middle">Must be in initial HTML, not async</td></tr><tr><td valign="middle">Gender</td><td valign="middle">Client input</td><td valign="middle">meta tag / data-attr / breadcrumb</td><td valign="middle">Inform Sizebay team of source</td></tr><tr><td valign="middle">Category</td><td valign="middle">Client input</td><td valign="middle">meta tag / data-attr / breadcrumb</td><td valign="middle">Must be mapped to Sizebay categories</td></tr><tr><td valign="middle">Age Group</td><td valign="middle">Client input</td><td valign="middle">meta tag / data-attr / breadcrumb</td><td valign="middle">Only required if selling kids and products</td></tr></tbody></table>

### Field Notes

1. **Sizes**

The script reads size options from the size selector rendered on the product page. Sizes must be present in the initial HTML response — if loaded asynchronously after page render, they may not be captured.

{% hint style="warning" %}
Confirm with your theme developer that size options are in the initial HTML, not injected via JavaScript after page load.
{% endhint %}

2. **Gender**

No standardized field. Sizebay defaults to unisex. Inform the Sizebay team where gender is exposed in your page HTML.

Common sources:

* Meta tag: \<meta name="gender" content="male" />
* data- attribute: data-gender="male"
* Breadcrumb — if navigation separates male and female sections.

{% hint style="warning" %}
If none of the above applies, share a sample product page URL and the Sizebay team will inspect the HTML to find the best extraction point.
{% endhint %}

3. **Category**

Used to link products to size charts and to segment usage reports. Same extraction approaches as Gender (meta tag, data- attribute, breadcrumb).

All store categories must be mapped to a Sizebay category. Example: "Dresses" → Full Body. Provide your full category list and the team will configure the mappings.

<table data-header-hidden><thead><tr><th valign="middle"></th><th valign="middle"></th></tr></thead><tbody><tr><td valign="middle">Sizebay Category</td><td valign="middle">Common Store Examples</td></tr><tr><td valign="middle">Top</td><td valign="middle">T-shirts, shirts, jackets, blouses, sweaters, hoodies</td></tr><tr><td valign="middle">Bottom</td><td valign="middle">Pants, shorts, skirts, leggings</td></tr><tr><td valign="middle">Full Body</td><td valign="middle">Dresses, jumpsuits, overalls, rompers</td></tr><tr><td valign="middle">Top Underwear</td><td valign="middle">Bras, bralettes, crop tops (underwear)</td></tr><tr><td valign="middle">Bottom Underwear</td><td valign="middle">Briefs, boxers, panties, thongs</td></tr><tr><td valign="middle">Shoe</td><td valign="middle">Sneakers, boots, sandals, heels, flats</td></tr></tbody></table>

{% hint style="danger" %}
Correct mapping directly impacts automated size chart coverage.
{% endhint %}

4. **Age Group**

Defaults to adult. Only required if your store sells children's products. \
\
Common sources:

* Meta tag: \<meta name="age-group" content="kids" />
* data- attribute: data-age-group="adult"
* Breadcrumb — if navigation separates adult and kids sections.

{% hint style="info" %}
Questions? Contact your onboarding manager — we’re happy to help.
{% endhint %}