Skip to content

Using your own custom buttons or other external triggers

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 modalwindow.SmartRecom.openModal()// Close the modalwindow.SmartRecom.closeModal()// Check if SmartRecom is readywindow.SmartRecom.isReady() // returns boolean// Check if modal is currently openwindow.SmartRecom.isModalOpen() // returns boolean// Get the latest size recommendation resultwindow.SmartRecom.getResult() // returns recommendation object or null// Access configurationwindow.SmartRecom.config // returns config object// Get versionwindow.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 statedocument.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 changesfunction 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 resultfunction 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 closeswindow.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 availableif (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