We would like to count visits with Google Analytics so we know which tools are worth improving. It sets cookies. The ruler works exactly the same either way, and refusing costs you nothing.
Put a real ring sizer on your own site
A calibrated ring sizer you can paste into a size guide in one line of HTML. Free, no account, and it does not track your customers.
Your snippet
Live preview
This is the same page your visitors will get, running here exactly as it will run there.
Why a size guide with a working sizer beats one without
Almost every jewellery site has a ring size page, and almost all of them are a printable PDF and a table. Both fail in the same way. The PDF has to be printed at exactly 100 %, which most people get wrong without knowing, and the table converts between scales the customer has no way of measuring in the first place. The result is a customer who guesses, and a guess turns into a resize, a return, or a review about the ring not fitting.
A sizer that works on the screen in front of them removes the printing step, which is the step that goes wrong. It is also the moment the customer is closest to buying, so it is worth having it happen on your page rather than on a search results page somewhere else.
How the calibration works, and why it is the whole point
A CSS pixel is defined as one ninety-sixth of an inch, and no real display honours that. A 27-inch monitor at 1440p is around 109 real dots per inch, a 13-inch laptop around 166, a phone far more. Any on-screen ruler that ignores this is wrong by somewhere between ten and seventy per cent, which is why most of them are quietly useless.
The widget solves it the only way it can be solved: by asking the visitor to hold a real object against the glass once. It uses a bank card, because a bank card is 85.6 mm wide under ISO/IEC 7810 and is therefore the same physical object in every wallet on earth. The visitor drags a shape until it matches the card, and from that one match the true density of their screen follows. Every circle after that is drawn at genuine physical size.
That value is stored in their own browser, on their own device. It is not sent to us, it is not sent to you, and it is not shared between sites. If they clear their browser data it is gone and they calibrate again.
What the widget will not do
It will not pretend. If a visitor has not calibrated, the widget says so in a warning at the top rather than showing confident-looking circles that happen to be wrong. If they have estimated their density from their screen's advertised diagonal, which is an option but is only an estimate, it keeps telling them to match a card before ordering.
That is deliberate, and it is worth understanding before you install it. A sizer that quietly gives a wrong answer costs you a return and a customer. One that insists on a calibration step costs you ten seconds of your customer's time and then gives an answer you can both rely on.
Measuring a ring you already own is the better method
If the customer has a ring that fits the right finger, measuring that ring is more reliable than measuring the finger, and the widget is built around that: they lay the ring on the screen and match its inside edge to a circle. Fingers change size through the day and with temperature, and a knuckle can be wider than the base of the finger, which is why finger measurement is the fallback rather than the default.
Where they have no ring to measure, the honest advice, and the advice on the full size guide the widget links to, is to wrap a strip of paper rather than string around the base of the finger, check it passes the knuckle, mark where it overlaps and measure it flat. String stretches, which biases every measurement made with it toward a size too large.
Installing it
Copy the snippet above and paste it into any page that accepts HTML. On Shopify that is a page in the admin with the editor switched to HTML, or a custom Liquid block. On WooCommerce and WordPress generally it is a Custom HTML block. Squarespace calls it a Code block and Wix calls it Embed HTML. There is no script tag and nothing to install, which is why it survives platforms that strip JavaScript out of page content.
The height field simply writes an attribute on the iframe, so you can change it later by editing the number. Around 720 pixels shows the circles and the readout without an internal scrollbar on most screens. If your size guide is a narrow column, a taller frame works better, because the circles reflow to the width they are given.
The credit line
The snippet includes one short line under the frame crediting the tool. Please keep it. It is the only thing asked in return, it is how people find the tool and it is how the tool stays free to use, with no account, no upsell and nothing to buy.
Everything else is yours to adjust. If it does not fit your page, or something about it is wrong for your customers, tell us and it will be looked at properly.
Frequently Asked Questions
Is the ring sizer free to embed?
Yes, on any site, including a commercial one, with no account and no permission needed. The only condition is that you keep the credit line that comes with the snippet.
Does it track my customers?
No. The widget loads no analytics, no Google tag and no advertising of any kind, and it sets no cookies. The one thing it stores is the visitor's own screen calibration, kept in their browser's local storage and never sent anywhere. That means it does not add anything to your cookie banner obligations.
Will it slow my page down?
The snippet uses loading="lazy", so the frame is not fetched until the visitor scrolls near it. The widget itself loads no web fonts and no third-party scripts.
How accurate is it?
As accurate as the calibration behind it. A visitor who matches a bank card against the screen gets a true physical measurement, because a card is 85.6 mm under ISO/IEC 7810 and is the same object in every wallet in the world. A visitor who skips that step sees a prominent warning, because an uncalibrated screen is routinely two sizes out.
Can I change the height or the colours?
Height is a field in the generator above and is just an attribute on the iframe, so you can edit it later. The widget follows your visitor's light or dark system setting by default, and you can pin it to one or the other if your storefront only has a single theme.
Will it work on a phone?
Yes. The circles reflow to the width they are given, and the widget scrolls inside its own frame rather than pushing your layout around. A phone still needs calibrating, and the calibration is per device because it describes that screen.
Does it work on Shopify, WooCommerce, Squarespace or Wix?
Yes. All four accept raw HTML in a page or block, which is all the snippet is. There is no script tag and nothing to install, which is also why it survives platforms that strip JavaScript from page content.
What if I want to remove it later?
Delete the snippet. Nothing is installed on your site and nothing phones home, so there is nothing else to undo.