Skip to main content

How to trigger SmartSize's popup from your own custom button

Updated
This document explains how developers can create custom buttons and triggers to open the SmartSize modal, providing flexibility in design and user experience while maintaining all the functionality of the default SmartSize button.
 
You will need programming skills to be able to follow along.
 

Overview

SmartSize now provides multiple ways for developers to trigger the size chart modal:
 
  1. JavaScript API - Programmatic control via window.smartsize
  2. Data Attributes - Declarative HTML attributes
  3. CSS Classes - Simple class-based triggers
  4. Default Button - The original auto-rendered button
 

Merchant Configuration

Hiding the Default Button

Merchants can hide the default SmartSize button via the app settings and use only custom triggers:
 
  1. Go to Theme Editor → App Embeds → SmartSize
  2. Scroll to Custom Trigger Settings
  3. Check "Hide default SmartSize button"
  4. Save the theme

 

Note: This setting defaults to false (showing the button), since SmartSize's standard behavior is to display its own button.
 
⚠️ Important: The setting hides the visual button but the SmartSize functionality and global API remain fully available for custom triggers.
 

Developer Usage

1. JavaScript API

The global window.smartsize object provides programmatic control:
 
// Open the size chart modal
window.smartsize.openModal();

// Close the size chart modal  
window.smartsize.closeModal();

// Check if modal is currently open
if (window.smartsize.isModalOpen()) {
  console.log('Modal is open');
}

// Check if current product has a size chart
if (window.smartsize.hasChart()) {
  // Show your custom button
  document.getElementById('my-size-button').style.display = 'block';
}

// Get current product data
const productData = window.smartsize.getProductData();
console.log('Product ID:', productData.product);
console.log('Product Name:', productData.productname);

// Get shop information
const shopData = window.smartsize.getShopData();
console.log('Shop Domain:', shopData.domain);
 

Example Usage

<button onclick="window.smartsize?.openModal?.()" class="btn btn-primary">
  📏 Find Your Perfect Size
</button>

<button onclick="window.smartsize?.openModal?.()" class="btn btn-secondary">
  🔍 Double-check our size chart
</button>

<script>
// Conditional display based on chart availability
document.addEventListener('DOMContentLoaded', function() {
  if (window.smartsize?.hasChart?.()) {
    document.querySelectorAll('.size-guide-button').forEach(btn => {
      btn.style.display = 'block';
    });
  }
});
</script>

 

2. Data Attributes

Use HTML data attributes for declarative triggers:
<!-- Open modal -->
<button data-smartsize-trigger="open" class="custom-btn">
  Check Size Guide
</button>

<!-- Close modal (useful for custom close buttons) -->
<button data-smartsize-trigger="close" class="close-btn">
  Close Size Guide
</button>

<!-- Works with any HTML element -->
<div data-smartsize-trigger="open" class="size-guide-card">
  <h3>Not sure about sizing?</h3>
  <p>Click here to open our size guide</p>
</div>

 

3. CSS Classes

Use the smartsize-trigger class for simple triggers:
<button class="smartsize-trigger btn-outline">
  Size Guide
</button>

<a href="#" class="smartsize-trigger">
  View Size Chart
</a>

<span class="smartsize-trigger size-link">
  📐 Sizing Help
</span>

 

Advanced Examples

Custom Product Page Integration

<!-- Product form area -->
<div class="product-form">
  <div class="variant-selectors">
    <!-- Size selector -->
    <select name="id">
      <option value="123">Small</option> 
      <option value="124">Medium</option>
      <option value="125">Large</option>
    </select>
    
    <!-- Custom size guide link next to size selector -->
    <a href="#" class="smartsize-trigger size-guide-link">
      📏 Size Guide
    </a>
  </div>
  
  <button type="submit" class="btn-add-to-cart">Add to Cart</button>
  
  <!-- Secondary size guide button -->
  <button type="button" onclick="window.smartsize.openModal()" class="btn-size-guide">
    Unsure about sizing? Check our guide
  </button>
</div>

 

Cart Page Integration

<!-- In cart items -->
<div class="cart-item">
  <div class="cart-item-details">
    <h4>{{ item.product.title }}</h4>
    <p>Size: {{ item.variant.option1 }}</p>
    
    <!-- Size guide link for cart item -->
    <a href="{{ item.product.url }}" 
       onclick="event.preventDefault(); window.smartsize?.openModal?.();" 
       class="size-guide-link">
      Double-check sizing
    </a>
  </div>
</div>

 

Custom Modal with Size Guide Integration

<div class="custom-product-modal">
  <div class="modal-content">
    <h2>{{ product.title }}</h2>
    
    <div class="sizing-section">
      <h3>Sizing Information</h3>
      <button data-smartsize-trigger="open" class="btn-primary">
        View Detailed Size Chart
      </button>
    </div>
    
    <div class="action-buttons">
      <button class="btn-add-to-cart">Add to Cart</button>
      <button class="smartsize-trigger btn-secondary">
        Check Sizing First
      </button>
    </div>
  </div>
</div>

 

Error Handling

Always use defensive coding when calling the API:
// Safe API calls
if (window.smartsize && typeof window.smartsize.openModal === 'function') {
  window.smartsize.openModal();
} else {
  console.warn('SmartSize API not available');
}

// Or using optional chaining (modern browsers)
window.smartsize?.openModal?.();

// Check for chart availability before showing buttons
function showSizeButtons() {
  if (window.smartsize?.hasChart?.()) {
    document.querySelectorAll('.size-guide-button').forEach(btn => {
      btn.style.display = 'block';
    });
  } else {
    console.log('No size chart available for this product');
  }
}

// Wait for SmartSize to load
function waitForSmartSize(callback, maxAttempts = 10) {
  if (window.smartsize) {
    callback();
  } else if (maxAttempts > 0) {
    setTimeout(() => waitForSmartSize(callback, maxAttempts - 1), 500);
  } else {
    console.warn('SmartSize API failed to load');
  }
}

waitForSmartSize(() => {
  console.log('SmartSize API is ready!');
  showSizeButtons();
});

 

Migration from Default Button

Before (Default Button Only)

<!-- Automatic button placement -->
<div id="sizefox-enable"></div>

 

After (Custom Buttons)

<!-- Default button hidden via app settings (in Theme Editor > App Embeds > SmartSize) -->
<!-- The sizefox-enable div still exists but the button is not rendered -->
<div id="sizefox-enable"></div>

<!-- Your custom buttons -->
<button class="smartsize-trigger custom-size-btn">
  📏 Size Guide
</button>

<div class="product-help">
  <h4>Need help with sizing?</h4>
  <button onclick="window.smartsize.openModal()" class="help-btn">
    Open Size Chart
  </button>
</div>

 

API Reference

window.smartsize Object

Method
Description
Returns
openModal()
Opens the size chart modal
void
closeModal()
Closes the size chart modal
void
isModalOpen()
Checks if modal is currently open
boolean
hasChart()
Checks if current product has a size chart
boolean
getProductData()
Gets current product information
object | null
getShopData()
Gets shop information
object


 

Data Attributes

Attribute
Values
Description
data-smartsize-trigger
"open", "close"
Triggers modal open/close on click

 

CSS Classes

Class
Description
smartsize-trigger
Opens modal when clicked


 

 

Browser Support

The custom trigger API supports all modern browsers that SmartSize already supports. The optional chaining syntax (`?.`) requires:
 
  • Chrome 80+
  • Firefox 72+
  • Safari 13.1+
  • Edge 80+
 
For older browser support, use the explicit checks shown in the error handling section.


Troubleshooting


API Not Available

If window.smartsize is undefined:
  1. Check that SmartSize is properly installed and enabled
  2. Ensure you're on a product page (SmartSize only loads on product pages)
  3. Wait for the script to load before calling the API


 

Modal Not Opening

If the modal doesn't open:
  1. Check browser console for errors
  2. Verify the product has a size chart with window.smartsize.hasChart()
  3. Ensure the SmartSize app is active and configured


 

Styling Issues

Custom buttons inherit your theme's styles. You can style them like any other button:
 
.smartsize-trigger {
  /* Your custom styles */
  background-color: #your-brand-color;
  border: 1px solid #your-border-color;
  padding: 8px 16px;
  cursor: pointer;
}

.smartsize-trigger:hover {
  /* Hover styles */
  background-color: #your-hover-color;
}

 

Support

For technical support with custom triggers, contact the SmartSize support team with:
 
  1. Your shop domain
  2. The specific implementation you're trying to achieve
  3. Any error messages from the browser console
  4. Screenshots of your custom button implementation

 

 

 

 

Related articles

Powered by Zendesk