Detailed instructions for adding the Try-It-On button to any Shopify theme.
Theme Installation (Theme Customizer)
Works with: Dawn, Refresh, Sense, Studio, and most themes created after 2021.
Step 1: Open Theme Customizer
- In Shopify admin, go to Online Store → Themes
- Find your active theme and click "Customize"
Step 2: Navigate to Product Page
- Use the page selector at the top
- Select "Product" or "Product pages"
- Choose any product to preview
Step 3: Add the Try-It-On Button Block
- Look for "Add block" button (+ icon)
- Click it to open the blocks menu
- Find "Try-It-On Button" under "Apps" section
- Click to add it to your product page
Step 4: Position and Customize
- Position: Drag and drop to preferred location
- Recommended: Near product images or before add-to-cart
- Customize: Click block to access styling options
- Settings: Button text, colors, borders, spacing
Step 5: Save Changes
- Preview your changes first
- Click "Save" when satisfied
- Button will appear on enabled product pages
Testing Your Installation
- Enable at least one product in Product Management
- Visit your store and navigate to that product page
- Look for the "Try It On" button
- Click the button to test the modal experience
- Upload a test image to verify the full workflow
Common Issues & Solutions
❌ "Try-It-On Button" not available in theme customizer
Solution: Your theme may not support app blocks. Please upgrade to a modern Shopify 2.0 theme (like Dawn, Refresh, Sense) or contact our support team for assistance.
❌ Button doesn't appear on product page
Check:
- Product is enabled in Product Management
- Button is added in theme customizer
- Product page is refreshed
❌ Button shows but clicking does nothing
Solution: Clear your browser cache and refresh the page. If issue persists, contact our support team.
❌ Button styling doesn't match my theme
Solution: Use the theme customizer settings to adjust colors, size, and styling to match your store's design.