Address autocomplete in Shopify — where it works and where it does not

Shopify lets you run your own JavaScript in your theme, but not in the checkout itself. This guide shows where the address widget can run today, how to attach it to the address fields, and what you cannot reach without Shopify Plus.

Where the widget can run#

For checkout, Shopify has extension targets for address autocomplete (purchase.address-autocomplete.suggest). They need an app with protected customer data access, and checkout UI extensions are Shopify Plus only. Our Shopify app (checkout autocomplete on Plus, and an address check of every new order that tags the order and suggests a correction) is built but not available to install yet. Until it is listed on Integrations, use the theme route below. Checkout also has Shopify's own address autocomplete for a list of countries.

If you build headless with Hydrogen, you control the form yourself. See the Shopify page and the React guide.

1. Create a browser key#

The key sits in the page source, so anyone can read it. Lock it to your domains: create a live key under Keys and enter the domains under Allowed domains, e.g. myshop.dk, www.myshop.dk and myshop.myshopify.com.

Enter the myshopify.com domain exactly. A wildcard such as *.myshopify.com covers every Shopify shop. More in Browser keys and allowed domains.

The quickest route: one script tag#

Open layout/theme.liquid under Online Store → Themes → … → Edit code and paste this just before </body>:

<script src="https://api.danadresse.dk/js/danadresse-auto.min.js"
        data-key="YOUR_BROWSER_KEY" defer></script>

The script finds the address forms of the classic customer accounts (address[address1], address[zip], address[city]) by itself and fills street, postcode and city. For fields with other names, such as a contact form, add data-fields, e.g. data-fields='[{"street":"#ContactForm-address","zip":"#ContactForm-zip","city":"#ContactForm-city"}]'. Add data-debug to see in the browser console what it found. If you prefer to control the code yourself, use steps 2 and 3 instead.

2. Or: add your own init file to the theme#

Go to Online Store → Themes → … → Edit code. Create the file assets/danadresse-init.js with the code below and insert your key.

// assets/danadresse-init.js
const API_KEY = "YOUR_BROWSER_KEY"; // locked to your domains

// Sets the value so that theme scripts and frameworks notice the change too.
function setField(el, value, events) {
  if (!el || value == null) return;
  const setter = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(el), "value").set;
  setter.call(el, value);
  for (const type of events || ["input", "change"]) {
    el.dispatchEvent(new Event(type, { bubbles: true }));
  }
}

// "Rådhuspladsen 1, st. th" — street, number, floor and door on one line.
function streetLine(a) {
  let line = a.vejnavn + " " + a.husnr;
  if (a.etage) line += ", " + a.etage + ".";
  if (a["dør"]) line += " " + a["dør"];
  return line;
}

function bind(input) {
  const form = input.form || document;
  DanadresseAutocomplete.attach(input, {
    apiKey: API_KEY,
    onSelect(a) {
      setField(input, streetLine(a), ["change"]);
      setField(form.querySelector('[name="address[zip]"]'), a.postnr);
      setField(form.querySelector('[name="address[city]"]'), a.postnrnavn);
    },
  });
}

document.querySelectorAll('input[name="address[address1]"]').forEach(bind);

The address book has one form for a new address and one per existing address. That is why the code attaches to every field named address[address1] and fills postcode and city in the same form.

3. Load the scripts in theme.liquid#

Open layout/theme.liquid and paste the two lines just before </body>. Both use defer, so they run in order once the page has loaded.

<script src="https://danadresse.dk/static/js/danadresse-autocomplete-1.0.0.js" defer></script>
<script src="{{ 'danadresse-init.js' | asset_url }}" defer></script>

Do not use the script_tag filter here. It writes a script without defer, which then runs before the widget has loaded.

4. Other fields and testing#

The names above are the ones Shopify's customer_address form uses in standard themes. Your theme may differ: right-click the field, choose Inspect, and read its name or id. In a contact form the fields are called contact[…], e.g. contact[Address].

Test in a private window: type "rådhuspladsen 1 slagelse", pick a suggestion, and check that postcode and city are filled. If the console shows 403 origin_not_allowed, the domain is missing from the key.

Shopify does not send orders through your theme, so server-side validation has to happen in an app or workflow that reads the order. See Address cleansing in checkout.

Next steps#

• Browser keys and allowed domains
• All widget options
• Integrations