SmartSize AI Fit Recommender includes a guided onboarding wizard that walks you through the complete setup process in just 2 minutes. Follow these steps to get your size recommendation system up and running.

Installation Process

Step 1: Install from Shopify App Store

  1. Visit the Shopify App Store - Search for “SmartSize AI Fit Recommender” or “SmartSize Fit Recommender”
  2. Click Install - Choose the SmartSize AI Fit Recommender app from the search results
  3. Review Permissions - Accept the required app permissions for your store
  4. Confirm Installation - Complete the installation process

Step 2: Launch Setup Wizard

After installation, SmartSize AI Fit Recommender automatically launches the onboarding wizard:

  1. Welcome Screen - Introduction to the 2-minute setup process
  2. Theme Selection - Choose which theme to install the app blocks on
  3. Guided Configuration - Follow the step-by-step setup process

Onboarding Wizard Steps

Theme Selection

The setup wizard begins with theme selection:

Choose Your Theme

  • Theme List - See all available themes in your store
  • Main Theme - Your live theme is automatically highlighted and recommended
  • Role Indication - Each theme shows its role (main, development, etc.)
  • Default Selection - Your main theme is pre-selected for convenience

Considerations for Theme Selection

  • Live Store - Choose your main theme for immediate customer access
  • Development - Use development themes for testing before going live
  • Multiple Themes - You can add SmartSize AI Fit Recommender to additional themes later

Step 1: Enable App Block

The first setup step enables the SmartSize AI Fit Recommender app block in your theme:

What Happens

  • Theme Editor Launch - Opens Shopify’s theme editor in a new window
  • App Block Integration - SmartSize AI Fit Recommender app block becomes available
  • Product Page Focus - Editor opens to a product page template

Your Tasks

  1. Click “Enable App Block” - Opens theme editor automatically
  2. Verify App Block - Check that “SmartSize Fit Recommender” appears in available blocks
  3. Save Theme - Click Save in the theme editor
  4. Return to Setup - Come back to SmartSize AI Fit Recommender setup wizard
  5. Click Continue - Proceed to next step

App Block Details

The app block adds the size recommendation button to your product pages:

  • Native Integration - Uses Shopify 2.0 app block technology
  • Theme Compatibility - Works with any Shopify theme
  • Non-Invasive - Doesn’t modify your theme code directly

Step 2: Adjust Button Position

The second step lets you position the size recommendation button:

Positioning Options

  • Drag and Drop - Move the app block to your preferred location
  • Section Placement - Position within product page sections
  • Visual Preview - See exactly how it will look to customers

Your Tasks

  1. Click “Open Theme Editor” - Launches theme editor on product page
  2. Locate App Block - Find “SmartSize Fit Recommender” in the editor
  3. Drag to Position - Move block to desired location on product page
  4. Preview Changes - Check how it looks on desktop and mobile
  5. Save Theme - Click Save in the theme editor
  6. Return to Setup - Come back to SmartSize AI Fit Recommender setup wizard
  7. Click Continue - Proceed to branding setup

Best Practices for Positioning

  • Near Size Selector - Place close to existing size or variant selectors
  • Above Add to Cart - Position where customers make sizing decisions
  • Visible Location - Ensure button is easily seen without scrolling
  • Mobile Consideration - Check positioning on mobile devices

Step 3: Set Up Your Branding

The third step customizes the appearance to match your brand:

Customization Options Available

Button Appearance:

  • Button Label - Custom text (default: “Find my size”)
  • Button Icon - 16 different icon options including:
    • No icon
    • Ruler (5 color variations)
    • Hanger (5 color variations)
    • Table/arrows (5 color variations)
  • Button Colors - Background and text colors
  • Button Alignment - Left, center, or right (separate for desktop/mobile)

Quiz Interface:

  • Accent Color - Primary color used throughout the quiz interface
  • Brand Integration - Quiz interface matches your button styling

Your Tasks

  1. Click “Open Theme Editor” - Opens theme editor with app block selected
  2. Select App Block - Click on “SmartSize Fit Recommender” in left panel
  3. Configure Button Settings:
    • Set button label text
    • Choose button icon
    • Set background and text colors
    • Choose alignment for desktop and mobile
  4. Set Quiz Accent Color - Choose color for quiz interface elements
  5. Preview Changes - See how customizations look
  6. Save Theme - Click Save in theme editor
  7. Return to Setup - Come back to SmartSize AI Fit Recommender setup wizard
  8. Click Continue - Complete the setup process

Design Recommendations

  • Brand Consistency - Match button colors to your brand palette
  • Contrast - Ensure text is readable against button background
  • Icon Selection - Choose icons that fit your product category
  • Mobile Testing - Check appearance on mobile devices

Step 4: Setup Complete

The final step confirms successful setup and guides next steps:

Completion Confirmation

  • Success Message - “All done!” confirmation
  • Setup Summary - Overview of what was configured
  • Ready Status - Confirmation that SmartSize AI Fit Recommender is ready to use

Next Steps

  1. Create Your First Quiz - Button links directly to quiz creation
  2. Product Configuration - Set up size tables and measurements
  3. Product Linking - Associate quizzes with your products

App Block Types

SmartSize AI Fit Recommender provides two types of app blocks for different use cases:

Button on Product Pages (Default)

Automatic Product Context:

  • Product Detection - Automatically uses current product information
  • Collection Awareness - Knows which collections the product belongs to
  • Tag Integration - Accesses product tags for quiz matching
  • Type and Vendor - Recognizes product type and vendor information

Best For:

  • Standard product pages
  • Automatic quiz matching
  • Dynamic product catalogs
  • Most common use case

Button with Fixed Quiz (Advanced)

Manual Configuration:

  • Quiz ID Specification - Uses a specific quiz regardless of product
  • Custom Content - Optional custom image and title
  • Fixed Behavior - Always shows the same quiz

Best For:

  • Landing pages
  • Category pages
  • Promotional campaigns
  • Single-product focused pages

Post-Installation Configuration

Both app block types can include a support link:

  • Enable/Disable - Toggle support link visibility
  • Custom Label - Personalize the support link text
  • Flexible URL - Link to email (mailto:) or website URL
  • Default Example - “Not sure? Email us — we’ll help you choose the right size.”

Use Cases

  • Customer Service - Direct link to sizing help
  • Email Support - mailto: links open customer’s email client
  • Help Pages - Links to detailed sizing guides
  • Live Chat - Integration with customer support tools

Theme Editor Access

After setup, you can always modify settings:

Accessing Settings

  1. Shopify Admin - Go to Online Store > Themes
  2. Customize Theme - Click Customize on your theme
  3. Product Page - Navigate to a product page template
  4. Select App Block - Click on SmartSize AI Fit Recommender app block
  5. Modify Settings - Adjust any configuration options

What You Can Change

  • All button appearance settings
  • Alignment and positioning
  • Colors and branding
  • Support link configuration
  • App block type (if needed)

Verification Steps

Confirm Successful Installation

After completing the onboarding wizard:

Visual Verification

  1. Visit Your Store - Go to any product page
  2. Look for Button - Find the SmartSize AI Fit Recommender button
  3. Test Functionality - Click button to ensure quiz loads
  4. Check Styling - Verify colors and positioning match your choices

Functionality Testing

  • Button Click - Ensure quiz interface opens
  • Responsive Design - Test on mobile and desktop
  • Brand Consistency - Confirm styling matches your brand
  • Support Link - Test support link if enabled

Troubleshooting Common Issues

Button Not Visible

Possible Causes:

  • App block not enabled in theme
  • App block positioned in hidden section
  • Theme compatibility issues

Solutions:

  • Return to theme editor and enable app block
  • Move app block to visible product page section
  • Check theme documentation or contact support

Styling Issues

Possible Causes:

  • Color contrast problems
  • Theme CSS conflicts
  • Mobile display issues

Solutions:

  • Adjust button colors in theme editor
  • Test different icon options
  • Preview on various devices

Quiz Not Loading

Possible Causes:

  • No quizzes created yet
  • Product not linked to any quiz
  • JavaScript conflicts

Solutions:

  • Create your first quiz (next step in process)
  • Set up product associations
  • Check browser console for errors

The SmartSize AI Fit Recommender installation and setup process is designed to be simple and quick, getting you up and running with size recommendations in just a few minutes.