Automatisk sammenkobling af produkter i forskellige farver i Shopify
Når man driver en webshop, er det normalt, at man har de samme produkter i flere farver — men ikke altid som varianter.
Måske har du separate produkter som:
Stribet bluse– Rød
Stribet bluse – Grå
Stribet bluse – Brun
Det giver fleksibilitet i lagerstyring og SEO, men skaber et problem:
Kunderne kan ikke nemt skifte farve på produktsiden, fordi produkterne ikke er koblet sammen.
Denne kode løser netop dét.
Hvorfor det er en god idé:
Kunder forventer i dag, at de kan skifte mellem farver direkte på produktsiden.
Når du forbinder dine produkter automatisk, kan de:
- Se alle farver samlet ét sted
- Skifte farve uden at forlade produktsiden
- Få en mere professionel og brugervenlig oplevelse
Resultatet? Højere konverteringsrate og lavere bounce rate — fordi kunden bliver længere på siden og lettere finder præcis den farve, de ønsker.
For SEO
Når hver farve ligger som et selvstændigt produkt, får du unikke URL’er og sidetitler, hvilket hjælper med:
- Flere indekserede sider i Google
- Mulighed for at optimere titler, beskrivelser og billeder pr. farve
- Bedre synlighed på søgeord som “sort kjole” eller “rød kjole”
Koden binder produkterne sammen uden at miste SEO-fordelene ved at have dem som separate produkter.
Sådan ser det ud:
Her er koden:
{%- assign color_name_raw = p_sku
| remove_first: family_key
| remove_first: token2
| replace: ' ', ' '
| strip -%}
{%- assign color_parts_dash = color_name_raw | split: '-' -%}
{%- assign last_token = color_parts_dash | last | strip -%}
{%- assign digits_stripped = last_token
| remove: '0' | remove: '1' | remove: '2' | remove: '3' | remove: '4'
| remove: '5' | remove: '6' | remove: '7' | remove: '8' | remove: '9' -%}
{%- if last_token != '' and digits_stripped == '' -%}
{%- comment -%} Ends with -digits → rebuild without the last dash-chunk {%- endcomment -%}
{%- assign color_name = '' -%}
{%- for part in color_parts_dash -%}
{%- unless forloop.last -%}
{%- if color_name != '' -%}{%- assign color_name = color_name | append: '-' -%}{%- endif -%}
{%- assign color_name = color_name | append: part -%}
{%- endunless -%}
{%- endfor -%}
{%- else -%}
{%- assign color_name = color_name_raw -%}
{%- endif -%}
{%- if color_name == blank -%}
{%- assign color_name = parts | last -%}
{%- endif -%}
{%- comment -%} NEW: remove all digits from final color name {%- endcomment -%}
{%- assign color_name = color_name
| remove: '0' | remove: '1' | remove: '2' | remove: '3' | remove: '4'
| remove: '5' | remove: '6' | remove: '7' | remove: '8' | remove: '9'
| strip -%}Hvordan sætter du det på din side?
Det smarte ved denne løsning er, at den kan tilføjes direkte i dit tema uden apps eller kompliceret opsætning.
Du skal blot:
- Oprette en ny Custom Liquid-blok i din produktsides sektion (i Shopify Theme Editor).
- Indsætte hele koden i blokken — det kræver ingen særlige filer eller assets.
- Gem ændringerne, og koden begynder automatisk at vise de relaterede farver på alle produkter, hvor SKU’erne følger dit mønster.
Det er en hurtig og fleksibel måde at udvide din produktside på — og du kan til enhver tid redigere koden direkte i blokken for at tilpasse udseendet eller logikken til din webshop.
Sådan virker koden
Koden er skrevet i Liquid, som er Shopifys templating-sprog, og den indsættes på produktsiden (typisk som et snippet).
Den finder familie-nøglen
Ud fra produktets Vare nr. (SKU) identificerer den en “familie”.
F.eks. hvis SKU hedder 374985 D4 Sort, bliver 200903 brugt som familie-ID.
Alle produkter med samme ID bliver betragtet som søskende-farver.
Den søger efter søsterprodukter
Den gennemgår webshoppen (eller kun relevante kollektioner) og finder andre produkter med samme familie-ID.
Den renser farvenavnet
Fra SKU’en fjerner koden alt det tekniske (ID, variantkode, tal osv.) og efterlader kun farven — fx Sort, Blå eller Port Royale.
Selv hvis SKU’en er lidt “rodet” som 374985 F1 804370Blå, bliver resultatet pænt og læsbart.
Den viser farverne visuelt
Alle fundne produkter vises som små miniaturer med billeder og farvenavn under.
Billederne er lazy-loaded (for performance) og vises vandret i en pæn liste.
Der vises maks. 6 farver, og produkter der ikke er på lager, bliver automatisk sprunget over.
Resultatet
Kunderne ser nu en sektion på produktsiden som fx:
Farve
🟦 Marine 🟥 Rød ⬛ Sort 🟫 Brun
Når man klikker på en farve, går man direkte til det tilsvarende produkt.
Alt sammen uden apps, uden manuel opsætning og med fuld kontrol i koden.
Fordelen ved denne løsning
- Ingen apps eller abonnementer — 100 % Liquid-baseret
- Automatisk, baseret på SKU-logik
- SEO-venlig struktur bevares
- Hurtig performance (lazy load + cap på antal farver)
- Let at tilpasse designet til dit tema
Denne løsning giver den bedste kombination af struktur, performance og brugeroplevelse.
Kunderne får et bedre flow — og du får en mere professionel, SEO-optimeret produktside, hvor alle farver hænger naturligt sammen.
Tilpas koden til din egen SKU-struktur
En af de store fordele ved denne løsning er, at den er fuldt fleksibel.
Hvis dine produktnumre (SKU’er) ikke følger præcis samme mønster som i eksemplet — f.eks. hvis du bruger bindestreger, bogstaver eller et andet antal felter — kan du nemt justere logikken i koden, så den passer til din egen struktur.
Kernen i systemet er denne linje:
{%- assign family_key = parts_current[0] | strip -%}Her vælger koden det første element i SKU’en som familie-ID.
Hvis dine SKU’er fx ser sådan ud:
- dfsljk-123-RED
- dfsljk-123-BLUE
kan du ændre linjen til:
{%- assign family_key = parts_current[1] | strip -%}eller bruge split: ‘-‘ i stedet for split: ‘ ‘, alt efter hvordan dine SKU’er er sat op.
Pointen er, at du har fuld kontrol: du kan bestemme, hvordan familie-ID’et identificeres, hvordan farven udledes, og hvor mange produkter der skal vises.
På den måde kan koden bruges til alt fra tøj og sko til boligtilbehør — uanset hvordan dine SKU’er er bygget op.