Show visitor location and conditional information

Design help Custom code
1

Hello everyone,

We are building a site that integrates Shopify products into Webflow. Everything for the shopping experience is complete, however I would like to get the geolocation from the user’s browser and show their zip code or state below the “add to cart” button on the product CMS page (all built in Webflow, not Shopify), since we only ship to some states. If they have an address that is not in a state we can ship to, I’d like to additionally show them a message that says “We do not currently ship to your state.”

I’ve been scouring the internet for script to complete this and can’t seem to find it. My coding experience is limited, so if anyone can help it would be greatly appreciated!

Thank you.

Here is my site Read-Only: Webflow - Cantrip Seltzer

2

There are a lot of GeoIP services available, and most of them are pretty decent- but you have two challenges here;

  1. I also don’t often see State shown, except on paid services.
  2. Lookups vary a lot in accuracy. You might see 80% accuracy at the city level with most services, depending on the country.

Try this test. Click Get IP Info.
If you’re in the US, you may see your state in the region.

You can try several services there too, to see how they respond;

image

If you find one that returns the state, the rest is just scripting to check supported states and showing a message.

You can see my CodePen on that test page showing the lookup code.

You can PM me if you need programming support for the messaging bit.