SmartSize works with standard Shopify themes out of the box, and with custom or heavily modified themes through app embeds, app blocks, and a JavaScript API. This guide explains how SmartSize attaches to your theme and walks you through verifying the integration step by step.
How SmartSize attaches to your theme
SmartSize uses two Shopify theme extension types:
Type | Name in the theme editor | What it does |
App embed | Fit quiz, Size chart | Loads the SmartSize widget on your storefront and creates the popup. This is the main switch — each popup needs its embed turned on. |
App block | Fit quiz button, Size chart button | Places a SmartSize button at an exact spot inside a product-template section, dragged into place in the theme editor. |
Most stores only need the app embeds — SmartSize places the button automatically. App blocks are useful when your theme's structure blocks automatic placement and you want to control exactly where the button sits. App blocks work on product templates only, and the section must support app blocks.
Button placement options
Where the button appears is configured inside the SmartSize admin (not the theme editor). You can choose automatic placement, a floating button, an app block, a custom CSS selector, or a fully custom integration where SmartSize renders no button at all and you trigger the popup from your own code. For a walkthrough of each option, see Choose where the size chart button appears and How to place your fit quiz button in the desired location.
For custom themes, two options matter most:
Custom CSS selector — SmartSize injects the button into any CSS selector you provide, before, after, or inside the matched element. This is the best fit when your product form has a non-standard structure but a stable class or id you can target.
Custom integration — SmartSize loads without rendering any button, and you open the popup from your own button or link. See the JavaScript API for this route.
Button settings in the theme editor
The app embed exposes the button's appearance settings in the Shopify theme editor: label text, recommendation text, button-or-link style, an optional icon, text and background colors, corner radius, and margins. Two things to know:
Settings are saved per theme. If you switch or republish themes, reconfigure them — see I changed my theme and SmartSize disappeared.
Changes made in a draft theme don't affect your live storefront until that theme is published.
Integration checklist
Work through these steps in order on your live theme.
1. Confirm your theme supports app embeds. Open the Shopify theme editor and look for App embeds in the left sidebar. If SmartSize doesn't appear there, your theme bypasses standard Shopify theme architecture and you'll need the custom integration route.
2. Turn on the embeds. Under App embeds, switch on Size chart and/or Fit quiz, then click Save.
3. Prepare a test product. In SmartSize, make sure at least one published size chart or fit quiz is linked to the product you'll test with.
4. Verify the widget loads. Open the product page on your live storefront (not the theme editor preview) and run this in the browser DevTools console:
window.SmartRecom // should print an object, not undefined
window.SmartRecom.isReady() // should return true
You can also check the Elements panel for a #smartrecom-shadow-container element — that's the popup's mount point. If the object stays undefined, check the Network tab for blocked scripts.
5. Test the button and popup. Find the size chart or fit quiz button on the page and click it. The popup should open. If the button is missing, confirm the chart or quiz is published and linked to this product, or try floating placement.
6. Test the full flow. Complete the quiz and confirm a recommendation appears; open the size chart and confirm the table renders with no cut-off columns.
7. Test on mobile. Open the page on a real device or in DevTools device emulation. The popup should fit the screen, text should be readable without zooming, and the close button easy to tap.
8. Re-test after theme updates. Any theme code update can affect placement — repeat steps 4–6 after updating your theme.
Style the storefront button from your theme
The trigger button lives on your product page — outside the popup — so your theme's CSS can style it directly:
.smartrecom-main-button— the button element.smartrecom-main-link— the same trigger when the link style is selected.smartrecom-button-icon— the optional icon
The button starts hidden and appears only after SmartSize confirms a published chart or quiz exists for the product, so don't be alarmed if it's absent in the first render. The popup itself renders inside a Shadow DOM and can't be reached from theme CSS — it has its own styling route via the Custom CSS field in SmartSize.
Known limitations
App embed settings are tied to a single theme; draft themes don't affect the live storefront.
Themes that render the product form asynchronously can defeat automatic placement — use the floating button, an app block, or a custom selector instead.
SmartSize can't inject its button into another app's Shadow DOM container.
Other apps that modify the product page can conflict with automatic placement detection.
💡 Tip: The floating button is the most reliable placement on custom themes — it doesn't depend on your product form's structure at all.