The mySHOEFITTER JavaScript SDK enables seamless integration of AI-powered shoe sizing functionality into your e-commerce platform. Help customers find their perfect fit with just one photo of their foot.
- π― AI-Powered Sizing: Accurate shoe size recommendations using computer vision
- ποΈ Multi-Platform Support: Works with Shopify, WooCommerce, Magento, and more
- π± Cross-Device: Optimized for both desktop and mobile experiences
- π¨ Customizable: Flexible button styling and logo configuration
- π§ Easy Integration: Simple JavaScript setup with automatic product detection
- π Multi-Language: Built-in German and English support
- π Third-Party Integrations: Support for Fibbl and other platforms
Add the mySHOEFITTER script to your website:
<script src="https://cdn.myshoefitter.com/v1/script.js"></script>
myshoefitter.init({
shopSystem: 'shopify' // or 'woocommerce', 'magento', etc.
});
That's it! The SDK will automatically detect your products and add size finder buttons.
myshoefitter.init({
shopSystem: 'shopify', // Shop platform type
productId: '12345', // Override auto-detected product ID
logsEnabled: true // Enable console logging
});
Control which products show the size finder button:
myshoefitter.init({
shopSystem: 'shopify',
// Show button only for specific product IDs
enabledProductIds: ['12345', '67890'],
// Hide button for specific product IDs
disabledProductIds: ['11111', '22222'],
// Show button only for products matching these patterns
enabledProductNames: [
'dance shoes', // Contains "dance shoes"
'/sneaker/i', // Regex: contains "sneaker" (case-insensitive)
'size guide' // Contains "size guide"
],
// Hide button for products matching these patterns
disabledProductNames: [
'sample', // Contains "sample"
'/test|demo/i' // Regex: contains "test" or "demo"
]
});
Fully customize the appearance and behavior of the size finder button:
myshoefitter.init({
shopSystem: 'shopify',
button: {
// Where to attach the button (CSS selector)
attachTo: '.product-form__buttons',
// Position relative to the target element
position: 'after', // 'before' or 'after'
// Custom button text
text: 'FIND YOUR PERFECT FIT',
// Custom CSS styles
styles: {
backgroundColor: '#ff6b35',
color: 'white',
borderRadius: '12px',
fontSize: '16px',
fontWeight: 'bold',
padding: '15px 30px',
border: 'none',
cursor: 'pointer'
},
// Custom HTML attributes
attributes: {
'data-track': 'size-finder',
'aria-label': 'Find your shoe size'
},
// Logo configuration
logo: {
url: 'https://yourstore.com/logo.png',
position: 'left', // 'left' or 'right'
width: '24px', // CSS width
height: '24px', // CSS height
space: '0.5em' // Spacing (px, em, %, rem, etc.)
}
}
});
The SDK supports flexible logo configuration within the button:
myshoefitter.init({
shopSystem: 'shopify',
button: {
text: 'Find Your Size'
// Default mySHOEFITTER logo will appear on the right
}
});
myshoefitter.init({
shopSystem: 'shopify',
button: {
text: 'FIND YOUR PERFECT FIT',
logo: {
url: 'https://yourstore.com/logo.png',
position: 'left', // Position relative to text
width: '28px', // Logo width
height: '28px', // Logo height
space: '12px' // Spacing between logo and text
}
}
});
Use CSS units for responsive spacing:
myshoefitter.init({
shopSystem: 'shopify',
button: {
logo: {
position: 'left',
space: '0.75em' // Scales with font size
}
}
});
// Other responsive units:
// space: '1rem' // Relative to root font size
// space: '2%' // Relative to container width
// space: '1ch' // Character width
myshoefitter.init({
shopSystem: 'shopify',
button: {
text: 'Find Your Size',
logo: false // No logo will be shown
}
});
myshoefitter.init({
shopSystem: 'shopify',
bannerOrigin: 'custom.myshoefitter.com', // Custom domain
// Integration with third-party services
integrations: [
{
fibbl: {
active: true,
mobileBreakpoint: 768
}
}
]
});
The SDK automatically detects product information for these platforms:
- Shopify -
shopSystem: 'shopify'
- WooCommerce -
shopSystem: 'woocommerce'
- Magento -
shopSystem: 'magento'
- Shopware -
shopSystem: 'shopware'
- OXID eShop -
shopSystem: 'oxid'
- Custom/Other -
shopSystem: 'custom'
If automatic detection doesn't work or for custom platforms:
myshoefitter.init({
shopSystem: 'custom',
productId: 'your-product-id',
button: {
attachTo: '.add-to-cart-button'
}
});
myshoefitter.init({
shopSystem: 'shopify',
button: {
text: 'Find My Perfect Size',
position: 'before',
logo: {
url: 'https://yourstore.myshopify.com/files/logo.png',
position: 'left',
space: '10px'
}
}
});
myshoefitter.init({
shopSystem: 'woocommerce',
button: {
attachTo: '.single_add_to_cart_button',
styles: {
marginTop: '10px',
width: '100%'
}
}
});
myshoefitter.init({
shopSystem: 'custom',
productId: document.querySelector('[data-product-id]').dataset.productId,
button: {
attachTo: '.product-actions',
text: 'Check My Size',
logo: {
url: '/assets/size-guide-icon.svg',
position: 'right',
width: '20px',
height: '20px',
space: '8px'
}
}
});
Listen to events from the mySHOEFITTER widget:
myshoefitter.events((event) => {
switch (event.type) {
case 'INIT':
console.log('mySHOEFITTER initialized:', event.data);
break;
case 'BUTTON':
console.log('Size finder button clicked:', event.data);
// Track in your analytics
gtag('event', 'size_finder_click', {
product_id: event.data.productId
});
break;
case 'RESULT':
console.log('Size recommendation received:', event.data);
// Auto-select the recommended size
selectProductVariant(event.data.recommendedSize);
break;
case 'BANNER':
if (event.data.action === 'close') {
console.log('Size finder modal closed');
}
break;
}
});
Initialize the SDK with the given configuration.
Parameters:
config
(Object) - Configuration options
Manually open the size finder interface.
Close the size finder interface.
Generate a direct link to the size finder.
Parameters:
options.clientType
(String) -'mobile'
or'desktop'
Returns: String - The size finder URL
const sizeFinderUrl = myshoefitter.getLink({ clientType: 'mobile' });
Register an event listener.
Parameters:
callback
(Function) - Event handler function
Clean up the SDK instance and remove event listeners.
interface ScriptConfig {
shopSystem?: string;
productId?: string | number;
enabledProductIds?: (string | number)[];
disabledProductIds?: (string | number)[];
enabledProductNames?: (string | RegExp)[];
disabledProductNames?: (string | RegExp)[];
logsEnabled?: boolean;
bannerOrigin?: string;
integrations?: IntegrationItem[];
button?: {
attachTo?: string;
position?: 'before' | 'after';
text?: string;
styles?: Partial<CSSStyleDeclaration>;
attributes?: Record<string, string>;
logo?: LogoConfig | false;
};
}
interface LogoConfig {
url?: string;
position?: 'left' | 'right';
width?: string | number;
height?: string | number;
space?: string | number;
}
-
Check product detection:
myshoefitter.init({ shopSystem: 'shopify', logsEnabled: true // Enable logging to see detection results });
-
Manual product ID:
myshoefitter.init({ shopSystem: 'shopify', productId: 'manual-product-id' });
-
Check button selector:
myshoefitter.init({ shopSystem: 'shopify', button: { attachTo: '.your-specific-selector' // Use your site's selector } });
Ensure the logo configuration is inside the button
object:
// β
Correct
myshoefitter.init({
shopSystem: 'shopify',
button: {
logo: {
url: 'https://example.com/logo.png'
}
}
});
// β Incorrect
myshoefitter.init({
shopSystem: 'shopify',
logo: { // This won't work
url: 'https://example.com/logo.png'
}
});
Check your filtering patterns:
myshoefitter.init({
shopSystem: 'shopify',
logsEnabled: true, // See filter results in console
enabledProductNames: [
'shoe', // Simple text match
'/sneaker/i' // Regex with flags
]
});
For technical support or questions:
- π§ Email: support@myshoefitter.com
- π Documentation: https://docs.myshoefitter.com
- π Issues: https://github.com/myshoefitter/sdk/issues
Β© 2025 mySHOEFITTER. All rights reserved.