For most stores, the basic button settings are all you need. But if you want more control over how and where the quiz button appears, the Advanced settings give you two powerful options: hiding the default button to use your own trigger, and positioning the button with a CSS selector instead of the Theme Editor.
1. Open Advanced Settings
Go to Online Store → Themes → Edit theme
Navigate to your Product template and click the Button for size quiz block
Scroll down past the basic settings to find the Advanced settings section
2. Choose the Button Display Mode
This controls whether the default quiz button is visible on your page:
Show quiz button (default) — The standard SmartSize button is displayed on your product page
Hide button (Use custom trigger) — The button is hidden. You provide your own button or link that opens the quiz. This is useful when you want the trigger to match your theme perfectly
If you choose Hide button, see our guide on Using your own custom Buttons or other External Triggers for setup instructions.
3. Choose the Button Positioning Method
This controls where the button is inserted on the page:
App block position (Theme Editor) (default) — The button appears wherever you placed the app block in the Theme Editor. This is the simplest option — just drag the block where you want it
CSS selector position (Automatic) — The button is automatically injected next to a specific HTML element on your page, identified by a CSS selector. Use this when the Theme Editor doesn't let you place the block exactly where you need it
4. Configure CSS Selector Positioning
If you selected CSS selector position, two additional fields appear:
CSS selector for positioning — Enter the CSS selector of the element where the button should appear (e.g. .product-form__buttons, #add-to-cart-button)
CSS insertion method — Choose how the button is placed relative to the target element:
• After (as sibling after) — inserts the button right after the target element
• Before (as sibling before) — inserts the button right before the target element
• Append (as last child) — adds the button inside the target element, at the end
• Prepend (as first child) — adds the button inside the target element, at the start
Tip: To find the right CSS selector, right-click the element on your storefront and choose Inspect. Look for a class name (e.g. .product-form__submit button button--full-width button--secondary) or ID (e.g. #add-to-cart) on the element where you want the button placed.
5. Save Your Changes
Click Save in the top-right corner. Visit your storefront to confirm the button appears in the right position.