Gulvfinder og kvadratmeterpriser i Shopify
En guide på Gulvgigantens forside, der finder de rigtige gulve ud fra fire spørgsmål, og beregnere, der omregner mellem kvadratmeter, pakker og tæppelængder.
Brating byggede Gulvgigantens webshop i Shopify. Jeg kodede de dele, temaet ikke kunne klare: en gulvfinder på forsiden og beregnere til varer, der sælges pr. kvadratmeter. Jeg lavede det alene over en til to måneder i 2025 og brugte AI som værktøj undervejs.
Udfordringen
Butikken har over 2.000 produkter, og de fleste kunder ved ikke, hvilke tekniske egenskaber de skal kigge efter. Butikken ville have en guide på forsiden, der stiller få spørgsmål og viser de gulve, der passer. Shopify har ingen sektion til det, så den skulle kodes.
Samtidig sælges gulve i hele pakker og tæpper i fuld rullebredde, mens kunderne tænker i kvadratmeter og længder. Produktsiderne skulle regne om for dem.
Gulvfinderen
Gulvfinderen er en sektion på forsiden med fire spørgsmål: hvor slidstærkt gulvet skal være, og om det skal være vandafvisende, lyddæmpende og egnet til gulvvarme. Hvert spørgsmål har et “Ved ikke”-svar, så ingen går i stå.
Der er ingen app eller egen søgemaskine bag. Gulvenes egenskaber ligger som metafelter på produkterne, og Shopify kan selv filtrere på dem. Gulvfinderen oversætter bare svarene til Shopifys filtre i adressen og sender kunden videre til produktlisten med filtrene slået til. Lidt forkortet:
let filterParams = [];
const slidstyrke = document.querySelector('input[name="slidstyrke"]:checked')?.value;
if (slidstyrke) filterParams.push(`filter.p.m.product.slidstyrke=${encodeURIComponent(slidstyrke)}`);
const vandafvisende = document.querySelector('input[name="vandafvisende"]:checked')?.value;
if (vandafvisende) filterParams.push('filter.p.m.product.vandafvisende=1');
// … og det samme for lyddæmpning og gulvvarme
const collectionsUrl = document.querySelector('.gulv-filter').dataset.collectionsUrl + '/all';
window.location.href = `${collectionsUrl}?${filterParams.join('&')}`;
- Alle spørgsmål og svar kan rettes i Shopifys temaeditor, så butikken ikke behøver en udvikler for at ændre dem.
- Man skal vælge et svar for at gå videre, og ellers forklarer en besked hvorfor.
- En trinlinje og “1 ud af 4” viser, hvor langt man er, og trinnene toner blødt over i hinanden.
Kvadratmeter, pakker og tæpper
To komponenter på produktsiden lader kunden regne i det, de kender:
- Gulve i pakker. Kunden skriver, hvor mange kvadratmeter der skal bruges, og antallet rundes op til hele pakker. Felterne hænger sammen begge veje, og totalprisen opdateres med det samme.
- Væg-til-væg-tæpper. Kunden vælger rullebredde og skriver længden. Arealet rundes op til hele kvadratmeter, som lægges i kurven, og længden følger med ordren, så butikken ved, hvor meget der skal skæres.
Begge er bygget som custom elements, der flytter temaets eget antalsfelt ind i beregneren. Kurven bruger derfor stadig temaets normale logik, og beregnerne virker både på produktsiden, i quick view og i fremhævede produkter.
Prøv dem herunder. De er genskabt i React til denne side, men regner på samme måde som originalerne.
Vinylgulv (demo)
629,00 kr. pr. pakke, 295,31 kr. pr. m²
1 pakke = 2,13 m². Sælges kun i hele pakker.
Væg-til-væg-tæppe (demo)
249,00 kr. pr. m²
Sælges kun i fuld rullebredde.
Det sværeste
At flette beregnerne ind i temaet. Et Shopify-tema er meget kode, som andre har skrevet, og beregnerne skulle spille sammen med temaets eget antalsfelt og kurv tre forskellige steder. Det er noget af et nål-i-en-høstak-arbejde at finde de rigtige steder at koble sig på, men det var ikke det værste.
Det værste var, at Shopify ikke tager ændringer i koden med, når temaet opdateres til en ny version. Beregnerne ville altså forsvinde ved hver opdatering, så jeg fulgte op med en detaljeret guide til, hvordan koden sættes ind igen.
Det ville jeg gøre anderledes i dag
- Bygge beregnerne som app-blokke i en theme app extension. De ligger uden for temaets kode, så de overlever opdateringer af temaet, og der er ikke brug for en guide.
- Læse rullebredden fra et metafelt i stedet for at aflæse den i variantens navn, fx “400 cm”.
- Lægge JavaScript i egne filer i stedet for direkte i sektionerne, så det kan caches og testes.