Customize Products with GPS Coordinates in Shopify Product Pages

If you are an online jewelry shop, print shop, or another business that offers highly customized products, then you understand the immense value of incorporating customer GPS Coordinates into your offerings. There’s a unique allure in personalizing a product with a specific location that genuinely attracts and engages customers. The capability to embody a memory, a cherished place, or a significant moment is a powerful tool and can make for an incredible gift. However, merchants often face a challenge when selling this feature online: “How can I provide product customization with GPS Coordinates without compromising the customer experience of my store?”

Our app, Wayfinder, offers an excellent solution for this. However, before we delve into it, here are some of the most common workarounds or fixes we have found in the market so far:

  • Adding a text field on the product page where the customer has to manually type in the GPS Coordinates they desire.
  • Requesting the customer to send an email or text message after purchase with the GPS Coordinates they want for customization.

As you might know firsthand, these solutions have a downside: the customer needs to abandon the purchasing process, leave your site, navigate to Google Maps or a similar service to obtain the coordinates, and then return to the store. Needless to say, this creates a lot of friction and unnecessarily prolongs the purchasing process.

But here’s the great news: there is a frictionless solution to this:

Using Wayfinder in Product Page

Wayfinder is a Shopify app designed for merchants to seamlessly insert a Google Map into their store, enabling them to obtain and store the GPS Coordinates selected by customers. The app is highly optimized to function within Product Pages, providing efficient product customization solutions using GPS Coordinates.

Your customer can simply select the location within the product page, and those GPS coordinates are then saved as just another input! All of this without ever leaving your site. Now, that’s exceptional UX.

1. You need a Google Cloud Account

The first thing you are going to notice after installing the app is that it will require you to provide a Google Cloud API key. Now, don’t worry. Getting one is super easy, and you can obtain it in just a few minutes. You can follow this guide to see instructions on how to get the API key with the necessary requirements. Also, the Blue Gum team is more than available to provide you with the support you need.

2. Insert the Map in Your Product Page

The map works as a block that you can insert anywhere on your website. You simply go to your theme editor on the page where you want the map placed (for this use case we are referring to the Product Page) and insert the app block inside the Product Information Section:

3. Style and Settings

The app offers many features for customizing the style and settings, as well as adding functionalities that will improve the user experience of your customers.

Some of the built-in features include:

  • Change the GPS Coordinates format from Decimal Values to DMS (Degrees, Minutes, Seconds)
  • Add custom Map Headline and Customer Instructions texts.
  • Hide checkout buttons until customer pins or selects location, making it a required step prior to checkout.
  • Display a custom success message to the customer when they select or pin a location.
  • Adjust map zoom levels, height and width for both desktop and mobile views.
  • Add a default initial map location.

4. Store Customer Location and GPS Coordinates

When the customer adds to product to his cart, the latitude and longitude coordinates are automatically saved as product notes and can be visible in product page and also in your shopify admin once the order has been completed.

And there you have it! No more need for your customer to leave your site, with Wayfinder you can offer a seamless purchasing experience!

If you need help with anything regarding the Wayfinder app setup or functionality, you can email us anytime at: support@bluegum.dev.