Want the size chart to open from a button you designed yourself, instead of the SmartSize button? With Custom integration, SmartSize stops adding its own button and you trigger the size chart popup from your theme. This article also shows how to hide your button automatically on products that don't have a size chart.
Step 1 - Turn on Custom integration
In your Shopify admin, go to SmartSize → Settings and open Button size charts → Placement. Scroll down to Advanced options, and on the Custom integration card click Use this method, then Save.
Keep the SmartSize app embed turned on in your theme editor — it loads the size chart popup that your button opens.
Step 2 - Add your button to the product page
Go to Online Store → Themes → Customize and open your product template. Inside the Product information section, click Add block where you want the button, choose Custom Liquid, and paste this snippet:
<div id="smartrecom-sizechart-button" style="display:none">
<button type="button" onclick="window.SmartRecomSizeChart.openModal()">View size chart</button>
</div>
Click Save. You can change the button text and style it with your theme's CSS — it's your own element.
How the button hides when there's no size chart
The wrapper <div> starts hidden. When the product page loads, SmartSize checks whether a size chart is linked to that product:
A size chart is linked — SmartSize reveals the wrapper and your button appears.
No size chart is linked — the wrapper stays hidden, so shoppers never see a button that does nothing.
This works because of the wrapper's id, smartrecom-sizechart-button. Keep it spelled exactly like that, and keep style="display:none" so the button doesn't flash on screen before the check finishes.
When SmartSize reveals the wrapper, it sets it to display: flex. If that changes your layout, style the inner <button> rather than the wrapper.
Step 3 - Check your product pages
Open a product that is linked to an active size chart. Your button should appear; click it and confirm the size chart opens.
Open a product with no size chart linked. Your button should not appear.
Test on both desktop and mobile.
Troubleshooting
The button never appears, even on products with a size chart. Check that the placement is set to Custom integration, the SmartSize app embed is on, the size chart is active and linked to the product, and the wrapper's id is exactly smartrecom-sizechart-button.
The button doesn't show up on content loaded later. The wrapper must be part of the page's HTML when it first loads — for example, in a Custom Liquid block as shown above. A button added later by another script (such as a quick-view drawer) won't be revealed.
Two size chart buttons, or the button behaves oddly. Don't combine this snippet with the SmartSize Size chart button app block on the same page — they use the same id. Remove the app block when you use your own button.
💡 Tip: Prefer to show the size chart directly on the page, with no button at all? See Displaying a size chart directly in your product page (no button).