SmartSize offers 5 different insertion methods / positioning options, with varying levels of flexibility and customisation:
Insertion Method
What it is
When to use
Automatic (Default)
The simplest, default option. The inline button is attached to standard elements present in all Shopify themes (e.g. product-form__input , [action="/cart/add"]).
In most themes, this option positions the button right above the Add to cart button.
When your theme is a legacy, non-Online Store 2.0 theme
When a simple position, like right above the Add to cart button, is enough
App block (Recommended)
Shopify's (and SmartSize's) recommended option.
An App Block added directly through the store's Theme Editor, that can be positioned visually by drag-and-drop.
When using an Online Store 2.0 theme
When your theme supports App Blocks
When your theme allows App Blocks to be positioned on the Section you want the Size guide button to appear on
A <div> element added directly to your theme's code, to be used by SmartSize as an anchor element to render the button. Similar to the CSS Selector, but requiring theme code editing.
When your theme does not App Blocks to be positioned on the Section you want the Size guide button to appear on
When you are able to edit your theme's code
When you need to add the button to a very specific place on the page
Instead of having SmartSize render its button, you create a custom link / button / element and use it to trigger the size chart popup using SmartSize's API.
Requires theme development knowledge
When you need to add the button to a very specific place on the page
When you want to add the button to a Section that changes as the shopper interacts with the store, and the "Enable dynamic content monitoring" on the Selector method is not enough