Skip to main content

SmartSize JavaScript API (window.SmartRecom)

Reference for the window.SmartRecom storefront API — open the fit quiz or size chart from code, check readiness, and read the latest recommendation.

SmartSize exposes a window.SmartRecom object on product pages where the fit quiz is active. Use it to open the popups from your own code, check whether the widget is ready, and read the latest size recommendation.


Prerequisites

The API is provided by the storefront widget, which is loaded by the Fit quiz app embed. Before using the API:

  • Turn on the Fit quiz app embed in the Shopify theme editor and save.

  • Make sure a published fit quiz is linked to the product you're testing on.

The window.SmartRecom object is created only after the widget mounts on the page. It loads asynchronously, so always guard your calls:

if (window.SmartRecom && window.SmartRecom.isReady()) {
window.SmartRecom.openModal();
}

If you want the popup to open only from your own buttons, set the fit quiz button placement to Custom integration in the SmartSize admin — the widget then loads without rendering any button of its own.


The window.SmartRecom object

window.SmartRecom = {
openModal, // function — open the fit quiz modal
openSizeChart, // function — open the size chart directly
isReady, // function — returns boolean
isModalOpen, // function — returns boolean
getResult, // function — returns the latest recommendation, or null
config, // object — widget configuration snapshot
version // string
}


openModal(options?)

Opens the fit quiz modal. Called with no arguments, it opens the quiz configured for the current product:

window.SmartRecom.openModal();

You can optionally pass an options object to point the widget at a specific quiz or product before opening — useful on pages that show several products, such as a quick-shop drawer:

window.SmartRecom.openModal({ quizId: '...', productId: '...' });


openSizeChart()

Opens the size chart popup directly, without starting the quiz. It has two modes, chosen automatically:

  • After the quiz — if the shopper has completed the quiz, the size chart opens with their recommended size highlighted.

  • Before the quiz — with no recommendation yet, it opens as a clean size chart for general reference.

if (window.SmartRecom && window.SmartRecom.isReady()) {
window.SmartRecom.openSizeChart();
}


isReady() and isModalOpen()

isReady() returns true once the widget has mounted and is ready to accept calls. isModalOpen() returns true while the popup is visible.

window.SmartRecom.isReady()     // true when safe to call the API
window.SmartRecom.isModalOpen() // true while the popup is open


getResult()

Returns the most recent size recommendation, or null if the shopper hasn't completed the quiz yet in this session.

const result = window.SmartRecom.getResult();
if (result && result.recommendedSize) {
console.log('Recommended size: ' + result.recommendedSize);
}

For the full result object schema and the events that fire when a new result arrives, see the article on quiz events and recommendation results in this collection.


Properties

  • config — the widget's configuration (quiz id, product id, colors, and other runtime settings), captured when the widget loads. Treat it as read-only.

  • version — the widget API version string, currently "2.0.0".


No-code alternative: CSS class triggers

If all you need is "my own button opens the quiz," you don't need JavaScript at all — add the smartrecom-trigger class to any element. See the article on triggering the popup from your own button in this collection.


💡 Tip: Test any API call in the browser DevTools console on a live product page first — it's the fastest way to confirm the widget is loaded and the quiz is linked to the product.

Did this answer your question?