Recipes with imperial and metric measure options

Hi there, I’m making some simple recipe CMS collections, and I’d really love for users to choose between imperial or metric measure ingredient list! Is there an easy way to achieve this?

Thx!


Here is my public share link: LINK
(how to access public share link)

Yes, definitely. IT will highly depend on your layout but main gist of it can be that you have both type of values stored in cms per each ingredient. Than you can add a toggle on your page to toggle through each of those two options. THe way you can toggle between them is that you can add class .imperial for imperial units and .metric for all metric units. Make one of those two classes display:none by default and toggle that setting each time the button is clicked.

Let me know if you need help with implementing further

There isn’t anything built in to Webflow to handle the conversion calculation, but if you wanted to build this using Javascript it’s not particularly difficult.

There are a few libraries that can help, like convert-units and unit-js, but I depending on how you’ve built your site and what you’re wanting to convert, I’d probably just do the calcs as custom code.

There are probably three pieces that are relevant here-

  • Locating, parsing and converting the measurement units, either in separate elements you’ve setup, or perhaps within richtext content. This piece is the core.
  • The selector for what units the user prefers. You can put this next to the ingredients however ideally it would remember their selection using a cookie, so that they don’t have to re-select it for every recipe they view.
  • For a more advanced UX, you could detect their current country and automatically choose the default setting for them. You’d need a service like IPInfo which has GeoIP lookup built in. The free plan is generous.