Shopify-utvikler - temaer, headless og integrasjoner som tåler peak-trafikk

#Shopify-utvikler for norske nettbutikker

Shopify tar seg av hosting, kasse og betaling, så du slipper serverdrift. Til gjengjeld må tema, apper og integrasjoner holdes i orden. Jeg sørger for at Liquid er lesbart, at GraphQL-kall tåler kampanjetrafikk, og at webhooks ikke sender samme ordre to ganger til ERP i desember.

Trenger du mer redaksjonell frihet enn Shopify gir, kan WordPress være innholdsdelen. Da avtaler vi hvilket system som eier produktdataene, så katalogen ikke lever i to kopier uten synk.

#Hva bør planlegges før man bygger en Shopify-butikk

Styrken i Shopify er sammenhengen mellom produkt, pris, frakt og betaling. Den ryker når ERP-logikk presses inn i Liquid. Jeg starter derfor med markeder, fraktprofiler, returregler og listen over apper du faktisk trenger. Shopify Markets gir mening først når økonomi og logistikk er enige om tallene som vises i kassen.

Norske kunder ser raskt om frakt og gebyrer dukker opp sent i kassen. Frakt- og MVA-tekster i tema og vilkårssider må derfor stemme med reglene ERP bruker på fakturaen.

#Hvordan rydde opp i markedsføringsscript på Shopify

Mange butikker har flere tag-manager-containere, CRO-verktøy og anmeldelseswidgeter samtidig. Jeg går gjennom hvert script: hvem eier det, hvilke hendelser brukes, og hva kan fjernes. Målet er færre lange oppgaver i hovedtråden på mobil.

#Hva gjør en Shopify-utvikler?

• Metafelt og metaobjekter for tekniske tabeller og kompatibilitet, med validering av CSV-importer fra leverandør.
• OS2-seksjoner som lar deg endre layout uten å ødelegge LCP på kolleksjonssidene.
• Storefront API med cursor-paginering og feilhåndtering når annonser sender trafikktopper.
• Admin API og fulfilment for delte sendinger og flere lagersteder.
• App-gjennomgang som fjerner overlapp mellom anmeldelser, mersalg og lojalitet.
• Overvåking av webhook-køen og lageravvik mot ERP.

#Liquid-utvikling og Online Store 2.0 på Shopify

OS2 gjør maler om til JSON med seksjoner. Eldre temaer henger igjen fordi migreringen krever ny struktur for innhold og innstillinger. Jeg rydder dupliserte snippets, begrenser kolleksjonsløkker, gir bilder faste proporsjoner mot CLS og sjekker tastaturnavigasjon i handlekurvskuffen av hensyn til universell utforming.

#Kodeeksempler med Liquid, GraphQL og webhooks for Shopify

Mønstre jeg bruker i produksjon: trygge OS2-innstillinger, avgrenset GraphQL for kolleksjoner og en webhook-mottaker som tåler duplikater.

#Section-schema (Online Store 2.0)

{% schema %}
{
  "name": "Featured collection",
  "tag": "section",
  "class": "section-featured-collection",
  "settings": [
    {
      "type": "collection",
      "id": "collection",
      "label": "Collection"
    },
    {
      "type": "range",
      "id": "products_to_show",
      "min": 2,
      "max": 12,
      "step": 1,
      "default": 4,
      "label": "Products to show"
    }
  ],
  "presets": [{ "name": "Featured collection" }]
}
{% endschema %}

#Storefront API med paginering

Variabler: handle (kolleksjon), first (sidestørrelse), after (peker).

query CollectionProducts($handle: String!, $first: Int!, $after: String) {
  collection(handle: $handle) {
    id
    title
    products(first: $first, after: $after) {
      pageInfo {
        hasNextPage
        endCursor
      }
      edges {
        cursor
        node {
          id
          handle
          title
        }
      }
    }
  }
}

#Hvordan behandle Shopify-webhooks uten duplikater

Shopify kan levere samme webhook flere ganger og prøver på nytt åtte ganger over fire timer hvis svaret uteblir. Dedupliser på X-Shopify-Webhook-Id, svar innen fem sekunder og legg selve jobben i kø.

// Pseudokode: Node-lignende worker med kort dedupe-cache
async function handleOrderCreate(payload, headers) {
  const webhookId = headers["x-shopify-webhook-id"];
  const orderId = payload?.id?.toString();
  if (!webhookId || !orderId) return { status: 400 };

  const dedupeKey = `orders/create:${webhookId}`;
  if (await cache.has(dedupeKey)) {
    return { status: 200, body: "duplicate ignored" };
  }

  await enqueueErpExport(orderId);
  await cache.set(dedupeKey, "1", { ttlSeconds: 86400 });
  return { status: 200 };
}

#Begrenset Liquid-løkke for produktgrid

Fast limit og faste image_url-bredder hindrer dyre løkker og for store bildefiler på mobil.

{% assign cap = section.settings.products_to_show | default: 8 %}
{% assign collection = section.settings.collection %}
<ul class="product-grid" role="list">
  {% for product in collection.products limit: cap %}
    <li>
      <a href="{{ product.url }}">
        {{
          product.featured_image
          | image_url: width: 640
          | image_tag: loading: 'lazy', widths: '320,640,960'
        }}
      </a>
    </li>
  {% endfor %}
</ul>

#Hvordan legge produkter i handlekurven med Storefront API

Kjør mutasjonen fra server, en kø-worker eller en action i Hydrogen (React Router) når du ikke vil ha tokenet i hver nettleserbundle.

mutation cartLinesAdd($cartId: ID!, $lines: [CartLineInput!]!) {
  cartLinesAdd(cartId: $cartId, lines: $lines) {
    cart {
      id
      totalQuantity
    }
    userErrors {
      field
      message
    }
  }
}

Eksempelvariabler:

{
  "cartId": "gid://shopify/Cart/YOUR_CART_ID",
  "lines": [
    {
      "merchandiseId": "gid://shopify/ProductVariant/YOUR_VARIANT_ID",
      "quantity": 1
    }
  ]
}

#Headless Shopify med Storefront API, Hydrogen og Oxygen

Storefront API gir katalog og handlekurv via GraphQL, så et eget frontend kan vise kolleksjoner og håndtere kassen uten Liquid. Hydrogen er Shopifys React-rammeverk for dette. Startmalen bruker React Router 7 i framework mode, med loaders og actions, og deployes til Oxygen, Shopifys hosting for Hydrogen.

Hydrogen er ikke obligatorisk. Har du et modent Next.js- eller Astro-oppsett, kan frontend kalle Storefront API direkte og beholde ditt eget designsystem.

#Hydrogen eller Liquid, hva bør du velge?

Hydrogen passer når du allerede jobber i React. Liquid-first er sterkest når innholdet styres i temaredigereren og gevinsten ligger i færre apper eller ryddigere Liquid. En tung React-bundle med ti sporingsscript taper mot et godt Liquid-tema. Jeg sammenligner LCP på de samme rutene, JavaScript-vekt, behov for forhåndsvisning og hostingkostnad før jeg anbefaler noe.

#Hvordan tilpasse Shopify checkout med Functions

Shopify låser kassen for vilkårlig JavaScript. Rabatt-, frakt- og betalingsregler bygger jeg med Shopify Functions og godkjente UI-utvidelser. To grenser verdt å kjenne: UI-utvidelser i informasjons-, frakt- og betalingssteget er bare tilgjengelige på Shopify Plus, og egne apper med Functions krever også Plus. Offentlige apper fra App Store som bruker Functions, fungerer på alle planer.

#Ytelse og Core Web Vitals på Shopify

Shopifys CDN hjelper, men tema og tredjepartsscript avgjør INP. Jeg setter budsjetter per mal, utsetter ikke-kritisk JavaScript og reduserer layoutskift fra fonter og dynamiske rader. Konverteringsløft lover jeg ikke. Du får målinger før og etter, på de samme malene.

#Migrering til Shopify uten å miste SEO

301-kart, handles og strukturerte produktdata må stemme. Jeg flytter attributter til metafelt så filtrene beholdes, og følger 404-feil i Search Console etter lansering. Før DNS-bytte tester jeg på mobil med throttling, og betalingstestene dekker delrefusjon og retur.

#Synlighet i AI-søk (AEO) for Shopify-butikker

AI-assistenter siterer riktig når returregler, leveringstid og produktdata er like i synlig FAQ, JSON-LD og ERP. Jeg legger ikke inn egne «AI-blokker» uten dekning i driften.

#Teknologistakk for Shopify-utvikling

Temaet ligger i Git med CI, endringer testes på et upublisert tema, og nøkler holdes utenfor Liquid. Integrasjonene dokumenteres med feltkart og runbooks, så ditt eget team kan overta.

Bygger du en Shopify-app og trenger hjelp med App Store-oppføringen, måling av onboarding og oppfølging, er det go-to-market-engineering.

#Hvordan starte et Shopify-prosjekt

Send meg URL-en til butikken, listen over apper og integrasjoner og når du har mest trafikk. Du får skriftlig en plan med milepæler, risikoer og antakelsene tilbudet bygger på.