Triggering the modal programmatically¶

Guide type: Task guide
Difficulty: Advanced
Applies to: SmartSize JavaScript API

Learn how to open and close the SmartSize modal, size chart, and quiz popups from your own JavaScript code. This is useful for custom button integrations, conditional display logic, and analytics tracking.

Before you start¶

You need:

• the SmartSize App Block added to your product page template
• access to your Shopify theme's JavaScript or Liquid files
• a basic understanding of DOM events and JavaScript functions

Set up the App Block for external triggers¶

SmartSize must be embedded in your page before the JavaScript API is available. You also need to hide the default button so only your custom triggers are visible.

1. In the Shopify theme editor, add the SmartSize App Block to your product page template.
2. In the App Block settings, set Button Display Mode to Hide Button (Use Custom Trigger).
3. Save the theme.

When this mode is active, SmartSize loads the widget functionality but does not render its own button. Your custom code controls when the modal opens.

Open the fit quiz modal¶

The simplest way to trigger the modal is calling window.SmartRecom.openModal().

<button onclick="window.SmartRecom.openModal()">
  Find My Perfect Size
</button>

With error handling¶

Always check that SmartSize is ready before opening the modal:

<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>

Open the size chart directly¶

window.SmartRecom.openSizeChart() opens the size chart without starting the quiz. It automatically detects whether a recommendation exists and shows the appropriate view.

Mode 1: With recommendations (after quiz completion)¶

If the shopper has already completed the quiz, the size chart opens with:

• the recommended size highlighted
• a YOUR BEST FIT badge
• measurement indicators
• the shopper's predicted measurements

Mode 2: Clean size chart (no recommendation)¶

If no quiz has been completed, the size chart opens as a general reference:

• SIZE CHART as the title
• no size highlighting or personal measurements

function openSizeChart() {
  if (!window.SmartRecom.isReady()) {
    console.warn('SmartSize is not ready yet');
    return;
  }

  // Automatically shows the appropriate mode
  window.SmartRecom.openSizeChart();
}

// Check which mode will be displayed
function checkSizeChartMode() {
  const result = window.SmartRecom.getResult();
  if (result && result.sizeFound) {
    console.log('Will show personalized size chart');
  } else {
    console.log('Will show clean size chart');
  }
}

Dynamic button text based on recommendation state¶

<button id="size-chart-btn" onclick="openSizeChartWithFeedback()">
  View Size Chart
</button>

<script>
function openSizeChartWithFeedback() {
  if (!window.SmartRecom?.isReady()) {
    alert('SmartSize is not available or not ready');
    return;
  }
  window.SmartRecom.openSizeChart();
}

function updateSizeChartButton() {
  const button = document.getElementById('size-chart-btn');
  const result = window.SmartRecom?.getResult();

  if (result && result.sizeFound) {
    button.textContent = `View Size Chart (Your size: ${result.recommendedSize})`;
  } else {
    button.textContent = 'View Size Chart';
  }
}

// Update when results arrive
window.addEventListener('smartrecom:result-update', updateSizeChartButton);

// Update when modal closes
window.addEventListener('smartrecom:close', updateSizeChartButton);
</script>

Use CSS class triggers (no JavaScript)¶

For simple integrations, add the .smartrecom-trigger class to any element. SmartSize automatically binds a click handler that opens the modal.

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

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

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

Benefits:

• No JavaScript required
• Works with any HTML element
• Automatically prevents default behavior on links
• Multiple triggers supported on the same page

Combine both methods (hybrid approach)¶

Use CSS triggers for standard buttons and the JavaScript API for conditional logic:

<!-- Standard trigger -->
<button class="smartrecom-trigger primary-size-btn">
  Quick Size Check
</button>

<!-- JavaScript trigger for conditional logic -->
<button onclick="conditionalSizeCheck()" class="secondary-size-btn">
  Smart Size Check
</button>

<script>
function conditionalSizeCheck() {
  if (userHasAccount) {
    window.SmartRecom.openModal();
  } else {
    showSignupModal();
  }
}
</script>

Track analytics when opening the modal¶

Integrate SmartSize with your analytics platform by tracking the open event before calling the API:

function trackAndOpenSize(source) {
  // Track with Google Analytics
  gtag('event', 'size_guide_opened', {
    'source': source,
    'product_id': '{{ product.id }}'
  });

  // Open SmartSize modal
  window.SmartRecom.openModal();
}

<button onclick="trackAndOpenSize('product_page')">
  Find My Size
</button>

Conditionally show or hide the button¶

Display the button only when SmartSize is ready and a quiz exists for the product:

document.addEventListener('DOMContentLoaded', function() {
  const sizeButton = document.querySelector('.size-guide-button');

  if (window.SmartRecom && window.SmartRecom.isReady()) {
    sizeButton.style.display = 'block';
    sizeButton.textContent = 'Get Size Recommendation';
  } else {
    sizeButton.style.display = 'none';
  }
});

Check the result¶

After implementing your trigger:

1. Save your theme changes.
2. Open a product page with an active fit quiz on your live storefront.
3. Click your custom trigger and confirm the modal opens.
4. Complete the quiz and confirm the size recommendation appears.
5. Test the size chart trigger (openSizeChart) both before and after completing the quiz.

Troubleshooting¶

Modal does not open¶

1. Check the App Block — Ensure the SmartSize App Block is added to the page template.
2. Check API availability — Use window.SmartRecom.isReady() to verify initialization.
3. Check the quiz configuration — Ensure a valid quiz exists for the product.
4. Check the browser console — Look for JavaScript errors.

CSS trigger does not work¶

1. Verify the class name — The class must be exactly .smartrecom-trigger.
2. Check event propagation — Ensure no other scripts prevent click events.
3. Test the JavaScript API — Try window.SmartRecom.openModal() in the browser console.

Size chart does not open¶

1. Check SmartSize status — Ensure window.SmartRecom.isReady() returns true.
2. Check the quiz configuration — Verify a valid quiz exists for the product.
3. Check the browser console — Look for errors when calling openSizeChart().
4. Check network requests — Ensure the size chart API is accessible.

Related articles¶

• JavaScript API overview — Complete method and property reference
• Listening to quiz events — Event system and payload schemas
• Reading recommendation results — Result object schema
• CSS customization reference — Styling custom trigger buttons