Basic Information

By clicking next, you agree to our Privacy Policy and to the processing of your data to recommend the best size.

Next

Basic Information

By clicking next, you agree to our Privacy Policy and to the processing of your data to recommend the best size.

Next

Use Case

For Shoppers: Removes uncertainty, helps them feel confident in sizing, and reduces frustration.

For Brands: Reduces return rates (studies show 30–40% of apparel returns are due to incorrect sizing), increases conversion, and builds trust.

For Designers in Framer: A drop-in, customizable component that adds real value to any e-commerce store — something not natively possible in Framer Workshop until now.

How It Works

This component is a modular multi-step size calculator for Framer. It supports male and female profiles with customizable inputs for units, measurements, body shape, fit preferences, and bra size. Built with shared state and local storage, it updates in real time and is fully configurable via property controls for performance and flexibility.

Input → Logic

  • Height + Weight → converted to metric → BMI calculated.

  • Gender and age adjust the baseline recommendation.

  • Body shape and fit preference further refine the output.

  • Logic → Output

    • The component maps the results to a generic size scale (XS–XXL).

    • Fit preference shifts the recommendation up or down if the user prefers looser/tighter clothing.

  • Output → Integration

    • The recommended size is shown alongside a product card.

    • The customer can add to cart with confidence, reducing guesswork and returns.

Input → Logic

  • Height + Weight → converted to metric → BMI calculated.

  • Gender and age adjust the baseline recommendation.

  • Body shape and fit preference further refine the output.

  • Logic → Output

    • The component maps the results to a generic size scale (XS–XXL).

    • Fit preference shifts the recommendation up or down if the user prefers looser/tighter clothing.

  • Output → Integration

    • The recommended size is shown alongside a product card.

    • The customer can add to cart with confidence, reducing guesswork and returns.

Input → Logic

  • Height + Weight → converted to metric → BMI calculated.

  • Gender and age adjust the baseline recommendation.

  • Body shape and fit preference further refine the output.

  • Logic → Output

    • The component maps the results to a generic size scale (XS–XXL).

    • Fit preference shifts the recommendation up or down if the user prefers looser/tighter clothing.

  • Output → Integration

    • The recommended size is shown alongside a product card.

    • The customer can add to cart with confidence, reducing guesswork and returns.

1. Basic Information (Step 1)

  • Collects the user’s gender and preferred unit system (metric or imperial).

  • This sets the foundation for personalized calculations and ensures accessibility for different regions.

2. User Inputs (Step 2)

  • The user enters their height, weight, and age.

  • These inputs allow the component to calculate BMI and understand body proportions.

  • Age is included since weight distribution can shift over time.

3. Fit Preference (Step 3)

  • The user chooses how they like their clothes to fit: Very Fitted → Very Loose.

  • This preference modifies the final recommendation to align with personal style choices.

medium abdomen shape
medium abdomen shape

4. Body Shape (Step 4)

  • Abdomen and chest shape selectors (Flat, Medium, Bulging / Tight, Medium, Wide).

medium chest shape
medium chest shape

Hip Shape: Straight, Tight, Wide.

Bra Size (for women): Input or dropdown to refine upper-body fit.

M
Height: 170 cm
Weight: 65 kg
Age: 30
Abdomen: medium
Chest: medium
Fit: Regular
Gender: Male

5. Result & Integration (Step 5)

  • The component outputs the recommended size (XS–XXL) based on all inputs.

  • The result is displayed with the user’s input summary for transparency.

Create a free website with Framer, the website builder loved by startups, designers and agencies.