# Adresse-autocomplete i Shopify — hvor det virker, og hvor det ikke gør

> Læg adresse-widget'en i dit Shopify-theme, udfyld postnr. og by automatisk, og se præcis hvor Shopify tillader script.
>
> https://danadresse.dk/guides/shopify · verified 2026-11-02
Shopify lader dig køre egen JavaScript i dit theme, men ikke i selve checkout'en. Denne guide viser, hvor adresse-widget'en kan køre i dag, hvordan du kobler den på adressefelterne, og hvad du ikke kan nå uden Shopify Plus.

## Hvor widget'en kan køre

| Sted | Virker i dag? |
|---|---|
| Theme-sider: kontaktformular, egne felter på produkt- eller kurvsiden | Ja |
| Adressebogen under "Min konto" med de klassiske kundekonti (`customers/addresses`) | Ja |
| De nye kundekonti, som Shopify selv hoster | Nej, de kan ikke scriptes fra theme'et |
| Checkout (levering og fakturering) | Nej, Shopify kører ikke theme-script i checkout |

Til checkout har Shopify extension targets til adresse-autocomplete (`purchase.address-autocomplete.suggest`). De kræver en app med adgang til beskyttede kundedata, og checkout UI extensions er kun for Shopify Plus. Vores Shopify-app (autocomplete i checkout på Plus og et adressetjek af hver ny ordre, der tagger ordren og foreslår en rettelse) er bygget, men kan ikke installeres endnu. Indtil den står under [Integrationer](/integrationer), bruger du theme-vejen nedenfor. Checkout'en har desuden Shopifys egen adresse-autocomplete for en række lande.

Bygger du headless med Hydrogen, styrer du selv formularen. Se [Shopify-siden](/shopify-adresse) og [React-guiden](/guides/react-autocomplete).

## 1. Opret en browsernøgle

Nøglen står i sidens kildekode, så alle kan læse den. Lås den til dine domæner: opret en *live*-nøgle under [Nøgler](/dashboard/keys) og skriv domænerne under **Tilladte domæner**, fx `minbutik.dk`, `www.minbutik.dk` og `minbutik.myshopify.com`.

Skriv `myshopify.com`-domænet præcist. Et wildcard som `*.myshopify.com` dækker alle Shopify-butikker. Læs mere i [Browsernøgler og tilladte domæner](/guides/browser-noegler-domaener).

## Den hurtigste vej: ét script-tag

Åbn `layout/theme.liquid` under **Netbutik → Temaer → … → Rediger kode**, og indsæt dette lige før `</body>`:

```liquid id=auto-tag run=no
<script src="https://api.danadresse.dk/js/danadresse-auto.min.js"
        data-key="DIN_BROWSER_NØGLE" defer></script>
```

Scriptet finder selv adresseformularerne i de klassiske kundekonti (`address[address1]`, `address[zip]`, `address[city]`) og udfylder vej, postnr. og by. Til felter med andre navne, fx en kontaktformular, tilføjer du `data-fields`, fx `data-fields='[{"street":"#ContactForm-address","zip":"#ContactForm-zip","city":"#ContactForm-city"}]'`. Tilføj `data-debug` for at se i browserens konsol, hvad det fandt. Vil du hellere styre koden selv, så brug trin 2 og 3 i stedet.

## 2. Eller: læg din egen init-fil i theme'et

Gå til **Netbutik → Temaer → … → Rediger kode**. Opret filen `assets/danadresse-init.js` med koden nedenfor og indsæt din nøgle.

```js id=init-js run=syntax
// assets/danadresse-init.js
const API_KEY = "DIN_BROWSER_NØGLE"; // låst til dine domæner

// Sætter værdien, så også theme-scripts og frameworks opdager ændringen.
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" — vej, husnr., etage og dør på én linje.
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);
```

Adressebogen har én formular til en ny adresse og én pr. eksisterende adresse. Derfor kobler koden på alle felter med navnet `address[address1]` og udfylder postnr. og by i den samme formular.

## 3. Indlæs scripts i theme.liquid

Åbn `layout/theme.liquid` og indsæt de to linjer lige før `</body>`. Begge har `defer`, så de kører i rækkefølge, når siden er indlæst.

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

Brug ikke `script_tag`-filteret her. Det skriver et script uden `defer`, som så kører før widget'en er indlæst.

## 4. Andre felter og test

Navnene ovenfor er dem, Shopifys `customer_address`-formular bruger i standard-themes. Dit theme kan afvige: højreklik på feltet, vælg **Inspicér**, og læs `name` eller `id`. Til en kontaktformular hedder felterne `contact[…]`, fx `contact[Adresse]`.

Test i et privat vindue: skriv "rådhuspladsen 1 slagelse", vælg et forslag, og se at postnr. og by bliver udfyldt. Får du `403 origin_not_allowed` i konsollen, mangler domænet på nøglen.

Shopify sender ikke ordrer gennem dit theme, så server-side validering skal ske i en app eller et workflow, der læser ordren. Se [Datavask i checkout](/guides/datavask-i-checkout).

## Næste skridt

- [Browsernøgler og tilladte domæner](/guides/browser-noegler-domaener)
- [Alle widget-indstillinger](/widget)
- [Integrationer](/integrationer)