Sync methods
We recommend CSS Selector. For stores that do not print product data visibly in the HTML, JSON-LD or a JavaScript variable is more stable. The list below is in recommended order.
CSS Selector (recommended)
If the page HTML has a tag like <a id="product_no">PerfittShoe</a>, write #product_no as the CSS Selector. Perfitt reads the element's text; for <input> it reads the value and for <img> the image URL. If you list several selectors separated by commas, the first one found is used.
See MDN CSS selectors for how to write selectors.
Nothing matches, so no value is read.
Selectors break when the product page structure changes. Let your Perfitt contact know before a store redesign.
JSON-LD (schema.org)
Many stores include <script type="application/ld+json"> for search engines. Write the top-level key name inside it (sku, name, image, etc.) and Perfitt reads the value. It rarely breaks when the page design changes.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Product",
"sku": "PerfittShoe",
"name": "Perfect Fit Knit Boost One",
"image": "https://shop.example.com/images/perfitt-shoe.jpg"
}
</script>Keys whose value is an object, such as brand ({ "name": "..." }), cannot be read as is. Use another method for such items or ask your contact.
JavaScript variable or function (window)
If the page script keeps product data in a global variable, write the variable name and the key inside it. In the example below that is productInfo and id. If the value is the variable itself, write only the variable name.
If a global function returns the value (e.g. window.getProductId()), write the function name. The returned value is used as a string.
window.productInfo = {
id: 'PerfittShoe',
brand: 'PERFITT',
name: 'Perfect Fit Knit Boost One',
};URL query
If the page URL is https://shop.example.com/product?product_no=PerfittShoe, write product_no as the key name.
Browser storage (localStorage · sessionStorage · cookie)
If the page stores the value in browser storage, write the key name. When the stored value is JSON, you can also give the inner key to read one level down. For cookies, write the cookie name. It looks like this in the developer tools' Application tab.
| Key | Value |
|---|---|
| product_no | PerfittShoe |
| product_name | Perfect Fit Knit Boost One |
Fixed value (VALUE)
Items that cannot be read from the page are set as a fixed value. For example, a single-brand store has no brand name on the product page, so the brand item is set to a fixed value such as PERFITT.
Pages that render values late
In stores that draw product data with JavaScript after load, a value may be missing right after the page opens. For such items Perfitt sets a wait time (usually 5 seconds) and re-reads every 0.5 seconds. If the value is still missing after the wait, the item is left empty. Tell your contact which items render late; if they render even later, passing the values yourself in manual mode is more reliable.
Size option area (optional)
If you give us the CSS Selector of the size picker on the product page (a select box or size buttons), Perfitt also reads the sizes on sale and whether each is sold out. This keeps recommendations within the sizes actually sold and filters out sold-out sizes.
- CSS Selector of the size option area (e.g.
.product-size-options li) - How sold-out sizes are marked, such as a class (e.g.
.sold-out)