---
title: "Measurement — Free Framer component · Best of Framer"
description: "Free Framer component · by Dragframe · Buttons. Product-Specific Size Guides This component adds a clean and user-friendly size measurement modal to your Framer e-commerce product pages."
canonical: "https://framer.elliotli.dev/component/measurement"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Measurement

# Measurement

Product size measurement

[View on Framer](https://framer.com/marketplace/components/measurement/?via=elliot-li)

![Measurement preview image 1](https://framer.elliotli.dev/og/component/measurement/4e75ac604818a0aa/1600x1200.jpg)

## Summary

Product-Specific Size Guides This component adds a clean and user-friendly size measurement modal to your Framer e-commerce product pages.

## Description

## Product-Specific Size Guides

This component adds a clean and user-friendly size measurement modal to your Framer e-commerce product pages. Customers can switch between sizes (XS, S, M, L or any custom set) and instantly view measurements like chest, front length, and sleeve length in both CM and inches.

Showing clear sizing information directly on the product page helps reduce uncertainty and returns while improving buyer confidence.

## JSON-Based Data

The component works with JSON data, giving you complete control over sizing for each individual product.

You can assign a different JSON-formatted size chart to every product, which means:

-   Different measurement structures per product
    
-   Easy updates without redesigning the component
    
-   Full flexibility for various clothing types (hoodies, shirts, pants, etc.)
    

Just change the JSON and the modal updates automatically.

## Easy to Customize

-   Fully responsive modal layout
    
-   Clean, minimal UI that fits fashion and apparel brands
    
-   Easy to style and adapt to your design system
    
-   Works as a reusable code component across all products
    

## Part of Wear Template

This free component is part of the full [**Wear**](https://wear.framer.website/) Framer e-commerce template system.

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-8ephzb1p-IXnLQVbOjFD408dLisRze6gmqkkau0)

If you want the full experience with complete store pages, advanced components, and ready-to-use e-commerce flows, you can get the full [Wear](https://wear.framer.website/) template, which includes this component and many more integrated features.

Use it as a standalone free size guide or as a preview of the full [Wear](https://wear.framer.website/) system.

## Rank history [How rankings work →](/terms#rankings)

-   All · #7703

## Details

- **Author**: Dragframe
- **Published**: 2026-03-09
- **Updated**: 2026-04-22
- **Added**: 2026-03-01
- **Categories**: Buttons

## More like this

-   [Liquid Blob Button](/component/liquid-blob-button) — Oddframe · Free — Interactive Liquid Blob CTA Button
-   [Pixel Face Toggle](/component/pixel-face-toggle) — Zac Nielson · $9 — Dark mode switch with a pixel face
-   [Liquid Hover Media](/component/liquid-hover-media) — Bardia Madani · $5 — Fluid media distortion on hover
-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow