This guide explains how to trigger the SmartRecom size recommendation modal from your own custom buttons instead of using the default SmartRecom button.

Prerequisites

⚠️ Important: You must still add the SmartRecom App Block to your page even when using external triggers. The App Block provides the necessary configuration and functionality.

Setup Options

Option 1: Global JavaScript API

The simplest way to trigger the modal programmatically.

Setup Steps:

  1. Add the SmartRecom App Block to your product page template
  2. Set Button Display Mode to “Hide Button” in the theme customizer
  3. Use the JavaScript API from any custom button

Example Usage: 

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

<!-- Or with error handling -->
<button onclick="handleSizeClick()">
  Size Guide
</button>

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

Available API Methods: 

  // Open the size recommendation modal
window.SmartRecom.openModal()

// Close the modal
window.SmartRecom.closeModal()

// Check if SmartRecom is ready
window.SmartRecom.isReady() // returns boolean

// Check if modal is currently open
window.SmartRecom.isModalOpen() // returns boolean

// Get the latest size recommendation result
window.SmartRecom.getResult() // returns recommendation object or null

// Access configuration
window.SmartRecom.config // returns config object

// Get version
window.SmartRecom.version // returns version string

Option 2: CSS Class-Based Triggers

Automatically trigger the modal from any element with the .smartrecom-trigger class.

Setup Steps:

  1. Add the SmartRecom App Block to your product page template
  2. Set Button Display Mode to “Hide Button” in the theme customizer
  3. Add the CSS class to your custom elements

Example Usage: 

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

Option 3: Hybrid Approach

Combine both methods for maximum flexibility:

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

<!-- JavaScript API trigger -->
<button onclick="window.SmartRecom.openModal()" class="secondary-size-btn">
  Advanced Sizing
</button>

<!-- Conditional trigger -->
<button onclick="conditionalSizeCheck()">
  Smart Size Check
</button>

<script>
function conditionalSizeCheck() {
  // Your custom logic here
  if (userHasAccount) {
    window.SmartRecom.openModal();
  } else {
    // Redirect to signup or show different modal
    showSignupModal();
  }
}
</script>

Theme Customizer Settings

When using external triggers, configure these settings in your Shopify theme customizer:

Required Settings:

  • Button Display Mode: Set to “Hide Button (Use Custom Trigger)”

Optional Settings (still work with external triggers):

  • Accent Color: Controls the color scheme inside the modal
  • Support Link: Shows/hides support contact in the modal
  • Quiz ID: (For generic blocks) Specifies which quiz to use

Styling Your Custom Buttons

Since you’re using your own buttons, you have complete control over styling:

  /* Style your custom trigger buttons */
.my-size-button {
  background: #your-brand-color;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
}

.my-size-button:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* Style multiple triggers differently */
.primary-size-btn {
  background: #007bff;
}

.secondary-size-btn {
  background: transparent;
  color: #007bff;
  border: 1px solid #007bff;
}

Advanced Examples

1. Multiple Product Variations 

  <!-- Different buttons for different product types -->
<div class="size-buttons">
  <button class="smartrecom-trigger" data-product-type="shirts">
    Shirt Size Guide
  </button>
  <button class="smartrecom-trigger" data-product-type="pants">
    Pants Size Guide
  </button>
</div>

2. Analytics Integration 

  function trackAndOpenSize(source) {
  // Track with your analytics
  gtag('event', 'size_guide_opened', {
    'source': source,
    'product_id': '{{ product.id }}'
  });
  
  // Open SmartRecom modal
  window.SmartRecom.openModal();
}
  
  <button onclick="trackAndOpenSize('product_page')">
  Find My Size
</button>

3. Conditional Display 

  // Show different buttons based on user state
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';
  }
});

4. Modal State Management 

  // Listen for modal state changes
function setupModalListeners() {
  // Custom event when modal opens
  window.addEventListener('smartrecom:open', function() {
    console.log('Size guide opened');
    // Your custom logic
  });
  
  // Custom event when modal closes  
  window.addEventListener('smartrecom:close', function() {
    console.log('Size guide closed');
    // Your custom logic
  });
  
  // Custom event when recommendation result is available
  window.addEventListener('smartrecom:result-update', function(event) {
    console.log('New recommendation result:', event.detail);
    // Display the result in your UI
    const result = event.detail;
    if (result.sizeFound && result.recommendedSize) {
      document.getElementById('size-display').textContent = 
        `Your best fit size is ${result.recommendedSize}`;
    }
  });
}

setupModalListeners();

5. Accessing Recommendation Results 

  // Get the current recommendation result
function displaySizeRecommendation() {
  const result = window.SmartRecom.getResult();
  
  if (!result) {
    console.log('No recommendation available yet');
    return;
  }
  
  if (result.sizeFound) {
    console.log(`Recommended size: ${result.recommendedSize}`);
    console.log(`Match type: ${result.matchType}`);
    
    // Display in your UI
    document.getElementById('recommended-size').textContent = result.recommendedSize;
    
    // Show alternative sizes if available
    if (result.topCandidates && result.topCandidates.length > 1) {
      const alternatives = result.topCandidates
        .filter(c => c.sizeName !== result.recommendedSize)
        .map(c => `${c.sizeName} (${Math.round(c.likelihood * 100)}% confidence)`)
        .join(', ');
      console.log(`Alternative sizes: ${alternatives}`);
    }
  } else {
    console.log('No size recommendation found');
  }
}

// Check for results periodically or after modal closes
window.addEventListener('smartrecom:close', displaySizeRecommendation);

Troubleshooting

  1. Check App Block: Ensure the SmartRecom App Block is added to your page
  2. Check API Availability: Use window.SmartRecom.isReady() to verify
  3. Check Quiz Configuration: Ensure a valid quiz exists for your product
  4. Check Console: Look for error messages in browser developer tools

Button Not Working

  1. Verify CSS Class: Ensure .smartrecom-trigger class is correctly applied
  2. Check Event Propagation: Make sure no other scripts are preventing click events
  3. Test JavaScript API: Try window.SmartRecom.openModal() in console

Configuration Issues

  1. Verify App Block Settings: Check that Button Display Mode is set to “Hide Button”
  2. Check Data Attributes: Ensure the hidden container has all required data attributes
  3. Product vs Generic Mode: Verify you’re using the correct App Block type

Best Practices

1. Progressive Enhancement 

  // Always check if SmartRecom is available
if (window.SmartRecom) {
  // Use SmartRecom functionality
  window.SmartRecom.openModal();
} else {
  // Fallback behavior
  window.location.href = '/pages/size-guide';
}

2. Accessibility 

  <!-- Use proper ARIA labels -->
<button class="smartrecom-trigger" 
        aria-label="Open size recommendation tool">
  Find My Size
</button>

3. Loading States 

  function openSizeGuide() {
  const button = event.target;
  
  if (!window.SmartRecom.isReady()) {
    button.textContent = 'Loading...';
    button.disabled = true;
    
    // Retry after a delay
    setTimeout(() => {
      if (window.SmartRecom.isReady()) {
        window.SmartRecom.openModal();
      }
      button.textContent = 'Find My Size';
      button.disabled = false;
    }, 1000);
  } else {
    window.SmartRecom.openModal();
  }
}

Migration from Default Button

If you’re switching from the default SmartRecom button to external triggers:

  1. Keep App Block: Don’t remove the existing SmartRecom App Block
  2. Change Setting: Set Button Display Mode to “Hide Button”
  3. Add Custom Button: Implement your custom trigger using the methods above
  4. Test Functionality: Verify everything works before going live

Support

If you encounter issues:

  1. Check the browser console for error messages
  2. Verify all setup steps have been completed
  3. Test with window.SmartRecom.isReady() in the console
  4. Contact SmartRecom support with specific error details