You can open the SmartSize popup from any element on your page — a button in your product form, a link in your size-guide section, or your own code. There are two routes: a CSS class that needs no JavaScript, and the JavaScript API for conditional logic.

Step 1: Hide the default button

If your custom trigger should be the only way to open the popup, set the fit quiz button placement to Custom integration in the SmartSize admin. The widget still loads and powers the popup — it just doesn't render its own button. Keep the Fit quiz app embed turned on in the theme editor; the widget (and the JavaScript API) comes from the embed.

Option A: The smartrecom-trigger class (no JavaScript)

Add the smartrecom-trigger class to any element and SmartSize binds a click handler that opens the fit quiz:

<!-- Button trigger -->
<button class="smartrecom-trigger">Find My Size</button>

<!-- Link trigger -->
<a href="#" class="smartrecom-trigger">Size Recommendations</a>

<!-- Any element works -->
<div class="size-guide smartrecom-trigger"><span>Get Size Recommendation</span></div>

Things to know about how the binding works:

The element must be on the page when the widget loads. SmartSize attaches the handlers once, when it initializes. Elements you add to the DOM later (quick-shop drawers, AJAX-loaded sections) won't get a handler — open the popup with window.SmartRecom.openModal() from your own code instead.
The click's default action is always prevented on a trigger element — links won't navigate, and a <button type="submit"> won't submit its form.
Multiple triggers on the same page are fine.

Option B: The JavaScript API

Call window.SmartRecom.openModal() when you want to open the quiz from your own logic. Always check availability first — the widget loads asynchronously:

<button onclick="handleSizeClick()">Size Guide</button>

<script>
function handleSizeClick() {
  if (window.SmartRecom && window.SmartRecom.isReady()) {
    window.SmartRecom.openModal();
  } else {
    console.warn('SmartSize is not ready yet');
  }
}
</script>

This route also lets you run other code first — for example, tracking the click in your analytics:

function trackAndOpenSize(source) {
  gtag('event', 'size_guide_opened', { source: source });
  window.SmartRecom.openModal();
}

Open the size chart instead of the quiz

window.SmartRecom.openSizeChart() opens the size chart popup directly. If the shopper has already completed the quiz it opens with their recommended size highlighted; otherwise it opens as a clean reference chart. This is a good target for a "Size chart" link near your size selector.

Check the result

Save your theme changes and open a product page with an active fit quiz on the live storefront.
Click your custom trigger and confirm the popup opens.
Complete the quiz and confirm the recommendation appears.
If you use openSizeChart(), test it both before and after completing the quiz.

Troubleshooting

The popup doesn't open. Confirm the Fit quiz app embed is on, a published quiz is linked to this product, and the console shows no errors. Then run window.SmartRecom.openModal() directly in the DevTools console — if that works, the issue is in your trigger wiring.

The CSS trigger does nothing. Check the class is spelled exactly smartrecom-trigger, and that the element exists in the initial page HTML rather than being added later by another script.

💡 Tip: Style your custom trigger however you like — it's your own element, so your theme CSS applies to it fully.

Trigger the SmartSize popup from your own button