Shopify-sektioner, der sælger: et casestudie

Beskeden kom en mandag i det tidlige efterår med to links og en deadline. Stifteren af et hollandsk brand inden for herrepleje, som vi her kalder Kestrel, havde studeret en meget større international konkurrent. Vi vil have sider som disse, stod der, før gaversæsonen starter. Men vi vil ikke have et nyt tema, og vi vil ikke have fem apps mere.

Det er en opgave, vi ofte får fra Shopify-forhandlere: butikken virker, temaet er fint, men de sider, der betyder mest i en højsæson (gaveguides, kampagnesider, kollektioner med pakker), ligner alle andres. Dette casestudie viser, hvordan vi løste den med et sæt skræddersyede Shopify-sektioner og sideskabeloner: designbeslutningerne, Liquid-koden, de fejl, vi stødte på, og hvordan forhandleren nu selv redigerer alt i temaeditoren.

Om dette casestudie: det er sammensat ud fra rigtigt Shopify-projektarbejde. Brandnavnet, produktfotos og nogle detaljer er ændret, og produktbillederne er illustrationer. Kodemønstre, problemer og rettelser er præcis, som vi håndterede dem.

Projektet i korte træk

Kunde	Brand inden for herrepleje, der sælger direkte til forbrugerne, Holland (hollandsk webshop, EUR)
Platform	Shopify, Online Store 2.0, eksisterende premium-tema beholdt
Omfang	7 skræddersyede sektioner, 2 snippets, 3 skabeloner, 2 små tilføjelser i temafiler
Leverede sider	Gaveguide, hero-felter på forsiden, spotlight-galleri og funktionskarrusel på forsiden, kollektionen Deals & Kits, bestseller-side
Krav	Ingen nye apps, intet temaskift, ingen ændringer i eksisterende kollektionssider, alt redigerbart i temaeditoren
Ekstra	Billeder til kampagnehero og slides, installationsguide, ren Theme Check

Opgaven: hvad butikken havde brug for, og hvad den ikke havde

Butikken havde allerede et godt premium-tema med solide produktsider, en kurvskuffe, filtrering og hurtig checkout. Intet skulle bygges om. Det, der manglede, var merchandising-sider: layouts, der fortæller en historie, grupperer produkter efter hensigt og forsigtigt skubber en besøgende mod et sæt eller en pakke frem for en enkelt vare.

Ud fra referencesiderne og et opkald med stifteren skrev vi fem konkrete behov ned:

1. En gaveguide , der grupperer produkter efter kategori og budget, med springlinks, der forbliver synlige, mens man scroller.
2. Et stærkere banner på forsiden: ét stort kampagnefelt plus mindre felter med links til pakker og bestsellere.
3. En “spotlight”-karrusel med produkter på forsiden, der forklarer teknologien bag hvert apparat, med en læg-i-kurv-knap på hvert slide.
4. En kollektion med Deals & Kits med en brandet header og et kampagnekort i produktgridet, uden at miste de eksisterende filtre.
5. En bestseller-side med kuraterede rækker, ikke bare endnu et kollektionsgrid.

Lige så vigtigt var det, kunden ikke ville have: ingen sidebygger-app, der indsætter scripts på hver side, ingen temamigrering midt i sæsonen og ingen afhængighed af en udvikler for at ændre en overskrift eller skifte et produkt.

Hvorfor skræddersyede Shopify-sektioner slår en sidebygger eller et nyt tema

Online Store 2.0 gjorde sektioner til den naturlige enhed for tilpasning i Shopify. En sektion er en Liquid-fil med sit eget indstillingsskema, så når den er installeret, kan forhandleren tilføje den til enhver side fra temaeditoren, flytte den, kopiere den og ændre hver tekst, hvert billede, hver farve og hver afstand uden kode.

Sammenlignet med alternativerne gav skræddersyede sektioner denne kunde tre fordele:

• Ydeevne. Hver sektion leverer kun den CSS og JavaScript, den har brug for, og kun på de sider, hvor den bruges. Der indlæses intet app-script på hele siden.
• Ejerskab. Koden ligger i forhandlerens eget tema. Intet månedligt gebyr, og intet forsvinder, hvis en app afinstalleres.
• Ensartethed. Sektionerne genbruger temaets eget produktkort, knapper, typografi og kurvformular, så nye sider ser ud og opfører sig som resten af butikken.

Ulempen er, at sektioner skal bygges omhyggeligt: de skal overleve temaopdateringer, fungere med temaets eksisterende CSS og forblive redigerbare for en, der aldrig vil åbne en kodefil. Det meste af arbejdet nedenfor handler om at få de detaljer rigtige.

1. En sideskabelon til gaveguiden bygget af genanvendelige sektioner

I stedet for én stor “gaveguide-sektion” delte vi siden op i fire små sektioner, som kunden frit kan kombinere:

• Gaveguide-hero: separate billeder til computer og mobil med fokuspunkter, overlay-stile og blokke til underoverskrift, overskrift, tekst og knap.
• Springlinks: en fast bjælke, der bygger sig selv ud fra produktsektionerne på siden og fremhæver den kategori, der aktuelt er i syne.
• Kategoriprodukter: en produktrække fodret af en kollektion eller en håndplukket liste, med temaets eget produktkort, valgfri kampagnefelter og swipe på mobil.
• Tillidsbjælke: fire korte løfter (pengene-tilbage-garanti, gratis fragt og returnering, garanti, levering næste dag) med ikoner.

Bjælken med springlinks er et godt eksempel på at designe til den person, der redigerer siden. I stedet for at bede kunden vedligeholde en liste over links har hver produktsektion et anchor_id og en navigationsetiket. Bjælken læser dem, når siden indlæses, så en ny kategori i guiden automatisk får et nyt link i den rigtige rækkefølge.

// Build the jump links from every gift-guide product section on the page.
const targets = [...document.querySelectorAll('[data-gg-category]')];
targets.forEach((section) => {
  const link = document.createElement('a');
  link.href = '#' + section.id;
  link.textContent = section.dataset.ggLabel;
  list.appendChild(link);
});

Selve siden er en JSON-skabelon, page.gift-guide.json. Når den er tildelt en side i admin, kan kunden lave en ny guide næste år eller en guide til fars dag ved at kopiere siden og skifte produkterne. Der kræves ingen udvikler.

2. Hero-felter på forsiden: én kampagne, to genveje

Den anden ønske var et banner på forsiden, der gør mere end at vise ét billede. Sektionen med hero-felter har ét stort felt (badge, kondenseret overskrift med versaler, tekst, knap) og et til tre stablede link-felter til højre, hver med sit eget billede og en etiket med pil.

Alt styres fra editoren: hovedfeltets bredde på computer, højder separat for computer og mobil, indholdets placering for hvert breakpoint, overlayets styrke, hjørneradius og farver. På mobil stables felterne, og hovedfeltet får sin egen højde, så kampagnen forbliver synlig øverst på skærmen.

Denne sektion har slet ingen JavaScript. Et banner på forsiden har ikke brug for det, og at undlade det holder den vigtigste del af siden så hurtig som muligt.

3. Spotlight-galleriet og fejlen, der skjulte overskriften

Den mest interaktive del var en “spotlight”-karrusel. Hvert slide parrer et mørkt, filmisk produktbillede med en kort fordel (motor, hudkomfort, vandtæthed) og en produktbjælke, hvor den besøgende kan lægge varen i kurven uden at forlade forsiden.

Bag det enkle udseende ligger en del adfærd:

• Det aktive slide er centreret, og nabo-slides er skaleret ned og delvist synlige, hvilket inviterer til at swipe.
• Træk og swipe, piletaster, klik på et sideslide, valgfri autoplay og løkke virker alle.
• Inaktive slides fjernes fra tabulatorrækkefølgen, så brugere af tastatur og skærmlæser kun interagerer med det synlige slide.
• Læg-i-kurv-knappen bruger temaets egen AJAX-produktformular, så den eksisterende kurvskuffe åbner præcis som på produktsiderne.

Overskriften, der ikke ville vises

Efter den første installation sendte kunden et skærmbillede: slides virkede, men sektionens overskrift, underoverskrift og sidenummerering var usynlige, og indstillingen for afstand mellem slides så ikke ud til at gøre noget. På vores testbutik så alt fint ud.

Der viste sig at være tre separate årsager, og de er værd at dele, fordi de påvirker mange skræddersyede sektioner på premium-temaer:

1. Temaets baggrundslag. Dette tema maler sektioners baggrund med et absolut positioneret ::before -element. Alt indhold i sektionen, der ikke selv er positioneret, ligger under det lag, så det er usynligt, selvom det er i HTML’en.
2. Et forældet stylesheet-bundt. Shopify samler {% stylesheet %} -tags fra alle sektioner i én cachet fil. Vores rettelse var udrullet, men kundens browser modtog stadig det gamle bundt.
3. Tomme nye indstillinger. Når du tilføjer en indstilling til en sektion, der allerede er placeret på en side, får den eksisterende instans ikke den nye standardværdi. Værdien er tom, så CSS’en modtog px i stedet for 112px, og afstanden blev nul.

Rettelsen tog hånd om alle tre. Indholdet løftes over baggrundslaget, kritisk CSS udskrives inline med sektionen, så den aldrig kan serveres forældet, og hver indstilling har en eksplicit fallback i Liquid:

{%- liquid
  assign gap_desktop = section.settings.slide_gap_desktop | default: 112
  assign gap_mobile = section.settings.slide_gap_mobile | default: 12
-%}

<style>
  /* Keep content above the theme's .section::before background layer. */
  #shopify-section-{{ section.id }} .sg > * { position: relative; z-index: 1; }
</style>

<spotlight-gallery data-gap-desktop="{{ gap_desktop }}" data-gap-mobile="{{ gap_mobile }}">

Afstanden sendes nu videre til JavaScript som data-attributter med separate værdier til computer og mobil, fordi karrusellen beregner slidenes placering i pixels:

Vi anvendte den samme regel for baggrundslaget på alle andre skræddersyede sektioner i projektet, før kunden kunne løbe ind i det igen. Det er den type problem, der kun viser sig i en rigtig butik med rigtigt indhold, og derfor tester vi altid på en kopi af det live tema i stedet for på en ren demo.

4. En kollektionsskabelon til Deals & Kits, der bevarer filtrene

Til kollektionen med pakker ønskede kunden en brandet header og et stort kampagnekort midt i produktgridet, mens temaets filtrering, sortering og uendelige scroll forblev præcis, som de var.

Vi byggede det som en ny kollektionsskabelon, collection.deals-kits.json, med to dele:

• En delt kollektionsheader , der som standard er dynamisk. Overskriften falder tilbage på kollektionens titel, teksten på kollektionens beskrivelse og billedet på kollektionens billede eller det første produktbillede. Enhver kollektion kan bruge skabelonen uden ekstra opsætning.
• En blok af typen “Promotion (split)” til temaets hovedsektion for kollektioner. Forhandleren vælger placeringen i gridet (for eksempel efter det sjette produkt), det produkt, der skal fremhæves, et billede, teksten og farverne. På computer strækker den sig over to kolonner; på mobil fylder den en hel række.

Påvirker redigering af temaets kernefiler andre kollektioner?

Det var kundens første spørgsmål, og det rigtige at stille. Svaret var nej, fordi begge ændringer udelukkende var tilføjelser:

• Hovedsektionen for kollektioner fik en ny bloktype. Eksisterende kollektionsskabeloner indeholder ikke den blok, så de vises præcis som før.
• Produktkortet fik en valgfri undertitel, der kun vises, når et produkt har en værdi i et custom.subtitle -metafield. Produkter uden det er uændrede.

Vi anbefalede stadig at forhåndsvise på en kopi af temaet først. Det er en del af vores standardinstallation, som er beskrevet nedenfor.

5. En bestseller-side sat sammen af eksisterende dele

Den sidste side i projektet viser det reelle afkast af at bygge sektioner ordentligt. Bestseller-siden havde kun brug for én ny sektion, et enkelt call to action-banner (“Leder du efter noget andet?”). Alt andet blev genbrugt:

• Den delte header fra kollektionsskabelonen, her med et mørkt produktbanner og uden brødkrummesti.
• To instanser af gaveguidens produktrække, “Bestseller-sæt” og “MVP-trimmere”, skiftet til et statisk grid i stedet for en karrusel.
• Det nye CTA-banner med link til alle produkter.

Det tog en brøkdel af tiden at bygge siden i forhold til den første, og kunden kan nu selv sætte lignende landingssider sammen til kampagner.

Mobil først, ikke mobil bagefter

Det meste af butikkens trafik kommer fra telefoner, så hver sektion har eksplicitte mobilindstillinger i stedet for blot at skrumpe computerlayoutet:

• Separate mobilbilleder og fokuspunkter til heroes.
• Produktrækker, der bliver til swipebare karruseller på mobil, med en justerbar kortbredde, så det næste produkt kigger frem fra kanten.
• Forskellige afstande mellem slides, slidebredder og skalering for spotlight-galleriet på mobil.
• Kampagnekort, der fylder en hel række på små skærme, så teksten forbliver læsbar.

Sådan installerer vi skræddersyede sektioner uden at risikere den live butik

En skræddersyet sektion har kun værdi, hvis den kan gå live sikkert. I dette projekt, som i alle Shopify-temaopgaver, vi påtager os, var processen:

1. Kopiér det live tema og arbejd kun i kopien.
2. Tilføj de nye filer (sektioner, snippets og skabeloner) via kodeeditoren. Skabelonerne kommer sidst, fordi de henviser til sektionerne.
3. Tildel skabelonerne til en testside og en testkollektion, og fyld dem med rigtige produkter og tekster.
4. Kør Theme Check og ret alle fejl og advarsler, der betyder noget.
5. Forhåndsvis på rigtige enheder, del forhåndsvisningslinket med kunden, og indsaml feedback.
6. Udgiv kopien, når den er godkendt, og behold det tidligere tema som øjeblikkelig tilbagerulning.

Kunden fik også skriftlige installationsnoter: hvilken fil der skal hvorhen, hvilke indstillinger der skal tjekkes, og hvordan hver skabelon tildeles. Hvis de senere vil flytte sektionerne til et nyt tema, ved de præcis, hvad de skal kopiere.

Kvalitetstjekliste, vi brugte

• Ren Theme Check: ingen Liquid-fejl, ingen manglende oversættelser, ingen forældede tags.
• Standardværdier overalt: hver indstilling har en fornuftig fallback, så en sektion aldrig går i stykker, når et felt står tomt.
• Temaets egne komponenter: produktkort, knapper og kurvformularen kommer fra temaet, så opdateringer og app-integrationer bliver ved med at virke.
• Grundlæggende tilgængelighed: rigtige knapper, tastaturnavigation i karrusellen, skjulte slides fjernet fra tabulatorrækkefølgen, alt-tekst på hvert billede.
• Ydeevne: responsive billeder med srcset, lazy loading under folden, JavaScript kun hvor interaktion kræver det og ingen nye apps.

Det skal måles efter lanceringen

Skræddersyede sider er en investering, så de bør måles. Vi offentliggør ikke konverteringstal for kundeprojekter, og én enkelt sæson ville alligevel ikke bevise meget. Det, vi satte op med kunden, var en kort liste over målinger at sammenligne med den forrige sæson i Shopify Analytics og GA4:

• Klik fra forsidens hero-felter og spotlight-galleriet videre til produktsiderne.
• Læg-i-kurv-hændelser udløst direkte fra spotlight-produktbjælken.
• Andelen af ordrer, der indeholder et sæt eller en pakke (hovedmålet med siderne Deals & Kits og gaveguiden).
• Gennemsnitlig ordreværdi i gaversæsonen.
• Engagement på mobil i gaveguiden: scrolldybde og brug af springlinks.

At følge de tal forvandler “vi har pænere sider” til et klart svar om, hvilke sektioner der fortjener deres plads, og hvilke der skal ændres næste sæson.

Har du brug for skræddersyede Shopify-sektioner eller sideskabeloner?

Dette projekt er et typisk eksempel på vores arbejde med udvikling af Shopify-temaer . Vi hjælper forhandlere, der er glade for deres tema, men har brug for sider, der sælger bedre, uden prisen og risikoen ved et fuldt redesign. Et typisk samarbejde omfatter:

Ydelse	Det får du
Én skræddersyet sektion	Én sektion (for eksempel en karrusel, et banner, en sammenligningstabel eller en FAQ) med fulde indstillinger i temaeditoren, mobillayout og installation på en kopi af temaet.
Skabelon til landings- eller kampagneside	En JSON-sideskabelon bygget af flere sektioner, som en gaveguide, en lanceringsside eller en bestseller-side, som dit team kan kopiere til fremtidige kampagner.
Opgradering af kollektionsskabelon	Egne kollektionsheadere, kampagneblokke i gridet eller tilføjelser til produktkortet, med eksisterende filtre og sortering bevaret.
Sektionsbibliotek	Et sæt sektioner, der passer sammen, bygget én gang og genbrugt i hele butikken, som i dette projekt.

Hvert projekt kommer med et tilbud med fast omfang, et forhåndsvisningslink, før noget går live, kode uden anmærkninger i Theme Check og overleveringsnoter, dit team kan følge. Vi laver også kampagnebilleder, når der er brug for det, som vi gjorde her til hero og spotlight-slides.

Har du en referenceside, du elsker, eller en sæson på vej? Lad os tale. Send os linket og din butiks URL, så fortæller vi dig ligeud, hvad der skal til for at bygge det i dit tema.

---

Ofte stillede spørgsmål

Hvad er en skræddersyet sektion i Shopify?

En sektion er en genanvendelig byggesten i et Shopify Online Store 2.0-tema: en Liquid-fil med sine egne indstillinger. En skræddersyet sektion er bygget specifikt til din butik. Når den er installeret, kan du tilføje den til sider, flytte den og redigere dens indhold i temaeditoren, præcis som de sektioner, der fulgte med dit tema.

Går skræddersyede sektioner i stykker, når jeg opdaterer mit tema?

Sektioner, der er tilføjet som nye filer, overskrives ikke af en temaopdatering. Når du installerer en ny temaversion, kopierer du de skræddersyede filer ind i den, og derfor leverer vi installationsnoter. Ændringer i temaets egne filer bør holdes små og som tilføjelser, så de er nemme at lægge på igen.

Har jeg brug for en app til gaveguides eller karruseller?

Som regel ikke. Gaveguides, karruseller, bannere og kampagneblokke kan alle bygges som indbyggede sektioner. Det undgår månedlige app-gebyrer og ekstra scripts, der indlæses på hver side.

Kan mit team redigere siderne uden en udvikler?

Ja, det er hovedpointen med at bygge dem som sektioner. Tekst, billeder, produkter, farver, afstande og layoutmuligheder er tilgængelige som indstillinger i temaeditoren. Der er kun brug for en udvikler, når du vil have en ny type layout.

Gør skræddersyede sektioner min butik langsommere?

Velbyggede sektioner tilføjer meget lidt vægt, fordi de kun indlæser deres CSS og JavaScript på de sider, der bruger dem, og bygger på temaets eksisterende komponenter. I de fleste tilfælde er de lettere end alternativet med apps.

Hvilke Shopify-temaer arbejder I med?

Ethvert Online Store 2.0-tema, inklusive Shopifys gratis temaer og premium-temaer fra Theme Store. Vi tilpasser sektionskoden og designet til dit temas egne konventioner, så resultatet ser indbygget ud.