Skip to main content

ArtinTech Solution

Menu

En Shopify FAQ-sideskabelon med søgning: 41 spørgsmål, én sektion, ingen app

Shopify FAQ page template with a search header and category accordions on desktop and mobile

Da FAQ-søgelinjen var live, sendte Kestrels stifter endnu et link: en konkurrents hjælpeside med farvet top, en søgeboks i midten, spørgsmål grupperet efter emne og en “Har du stadig spørgsmål?”-bjælke nederst. Kan vi få præcis det, som en ny skabelon, uden at røre den nuværende FAQ-side? En dag senere kom ønske nummer to: og kan I udfylde alt indholdet, så vi ikke skal skrive det?

Dette casestudie dækker begge halvdele: selve Shopify FAQ-sideskabelonen og det mindre glamourøse arbejde med at skrive 41 svar, der faktisk er sande.

Om dette casestudie: det er en sammensat historie baseret på rigtigt Shopify-arbejde. Brandnavnet og visse detaljer er ændret. Sektionskoden, grænserne vi ramte, og indholdsproblemerne er præcis, som vi håndterede dem.

Shopify FAQ-sideskabelon med søgefelt i toppen og kategorier med harmonikaer på desktop og mobil
Den nye hjælpeside på desktop og mobil. (Illustration, brandet er anonymiseret.)

Projektet kort fortalt

Leverancer1 ny sektion, 1 ny sideskabelon, ingen ændringer i eksisterende filer
LayoutFarvet top med søgning, kategorier med harmonikaer, kontaktbjælke
Indhold7 kategorier, 41 spørgsmål, skrevet ud fra butikkens egne politikker
Strukturerede dataFAQPage JSON-LD genereret ud fra spørgsmålsblokkene
RedigeringAlle overskrifter, spørgsmål, svar og farver kan redigeres i temaeditoren

En ny skabelon, så intet andet kan gå i stykker

Den eksisterende FAQ-side brugte temaets egen FAQ-sektion med en kontaktformular ved siden af. I stedet for at bygge den om oprettede vi en separat sektion, faq-page.liquid, og en sideskabelon, page.faq-2.json, der bruger den. Butiksejeren tildeler skabelonen til en side i admin. Den gamle side virker, indtil de beslutter sig for at skifte, og at skifte tilbage er én rullemenu.

Sådan er sektionen bygget

Sektionen har to bloktyper, Kategori og Spørgsmål, i én flad liste. I temaeditoren er det let at overskue: hvert spørgsmål hører til kategorien over det, og når man trækker en blok, flytter den mellem kategorier. I Liquid åbner en lille løkke en ny gruppe ved hver kategori og lukker den forrige:

{%- for block in section.blocks -%}
  {%- case block.type -%}
    {%- when 'category' -%}
      {%- unless forloop.first -%}</div>{%- endunless -%}
      <div class="faqp__group" data-faqp-group>
        <h2>{{ block.settings.title | escape }}</h2>
    {%- when 'question' -%}
      <details class="faqp__item" data-faqp-item>…</details>
  {%- endcase -%}
  {%- if forloop.last -%}</div>{%- endif -%}
{%- endfor -%}
  • Indbyggede harmonikaer. Hvert spørgsmål er et <details>-element, så åbning og lukning kræver intet JavaScript og virker med tastaturet.
  • Søgning indbygget. Samme filtreringslogik som den tidligere snippet, men afgrænset til sektionen og med opslag ved søgning.
  • FAQPage strukturerede data. Sektionen skriver JSON-LD ud fra spørgsmålsblokkene, så markuppen altid passer med siden.
  • Indstillinger, ikke kode. Farver i toppen, tekstfarve, knapfarve, pladsholdertekst, tekst ved ingen resultater og kontaktknappen er alle indstillinger i temaeditoren.
Shopify temaeditor med FAQ-sektionen, kategori- og spørgsmålsblokke og tælleren 48 af 50 blokke
Kategorier og spørgsmål er blokke i én liste. Sektionen bruger 48 af sine 50 blokke.

Grænsen ingen nævner: 50 blokke

Vores første indholdsudkast havde 7 kategorier og 49 spørgsmål: 56 blokke. Shopify tillader højst 50 blokke i én sektion, og en skabelon med flere kan ikke gemmes. Kategorier tæller også som blokke.

Vi skar indholdet ned til 41 spørgsmål, 48 blokke i alt, så butiksejeren har plads til to mere. At vælge, hvad der skulle ud, viste sig at være let, af en grund som næste afsnit forklarer. Butikker, der har brug for mere end 50, kan tilføje en sektion mere til samme skabelon, for eksempel én til ordrer og én til produkter.

At skrive 41 svar, der er sande

Butiksejeren bad os udfylde siden med indhold “ligesom deres”. At kopiere et andet firmas hjælpetekster var aldrig en mulighed. Deres politikker er ikke denne butiks politikker, og deres formuleringer er deres. I stedet blev hvert svar skrevet ud fra butikkens egne kilder: returpolitikken, fragtpolitikken, garantisiden, produktsiderne og betalingsmetoderne i footeren.

At gøre det omhyggeligt afslørede noget, butiksejeren ikke havde bemærket. Butikken modsagde sig selv fire steder:

Gratis fragtfra €70 i den gamle FAQ, fra €30 på produktsiderne og i sitebjælken
Returperiode30 dage i returpolitikken, 90 dage i den gamle FAQ og på produktsiderne
Returomkostningerbetales af kunden i politikken, “gratis retur” på produktsiderne
Batteritid120 minutter i et produktpunkt, 90 minutter i produktets egen FAQ

Vi valgte ikke et svar i stilhed. Hvor der fandtes en juridisk politik, fulgte FAQ’en den, og butiksejeren fik en kort liste over hver modsigelse og vores valg, så de kunne beslutte og også rette kildesiderne. Vi fjernede også to svar, vi ikke kunne bekræfte nogen steder på sitet, i stedet for at gætte. Det gjorde det let at komme under 50 blokke.

Åbnet svar i Shopify FAQ-sideskabelonen om returperioden
Svarene er korte og starter med det faktum, kunden leder efter.

Indhold som en fil, ikke som klik

At taste 48 blokke ind i temaeditoren er langsomt og fejlbehæftet. Vi holdt spørgsmålene i en lille indholdsfil og genererede skabelonens JSON ud fra den med et script. Når butiksejeren har taget stilling til modsigelserne, tager det sekunder at generere skabelonen igen. Efter installation kan hvert svar stadig redigeres normalt i temaeditoren.

Installation

  1. Opret sektionen faq-page i kodeeditoren og indsæt sektionsfilen.
  2. Opret en sideskabelon med navnet faq-2 (JSON) og indsæt skabelonfilen. Sektionen skal findes først, fordi skabelonen henviser til den.
  3. Åbn FAQ-siden under Onlinebutik → Sider og vælg skabelonen faq-2.

Det gør vi på ethvert FAQ-projekt

  • Skriv ud fra politikkerne, ikke ud fra hukommelsen eller en konkurrent.
  • Led efter modsigelser før publicering. En FAQ, der er uenig med returpolitikken, skaber de supporthenvendelser, den skulle forhindre.
  • Planlæg grænsen på 50 blokke, før du skriver indhold.
  • Hold indholdet i en fil, du kan generere igen, og aflever en skabelon, butiksejeren redigerer som alle andre.

Vil du have en hjælpeside som denne eller en FAQ, der rent faktisk svarer dine kunder? Se vores Shopify-temaudvikling eller kontakt os.

Ofte stillede spørgsmål

Kan jeg bygge en Shopify FAQ-side uden en app?

Ja. En tilpasset sektion med kategori- og spørgsmålsblokke, indbyggede harmonikaer og et lille søgescript dækker det, de fleste FAQ-apps gør, uden månedligt gebyr og ekstra scripts på hver side.

Giver FAQ-strukturerede data mig rich results i Google?

Siden 2023 viser Google primært FAQ rich results for kendte offentlige og sundhedsfaglige websites. De strukturerede data er stadig gyldige og hjælper søgemaskiner med at forstå siden, men de fleste butikker skal ikke forvente det udfoldelige FAQ-uddrag.

Hvor mange spørgsmål kan én FAQ-sektion rumme?

En Shopify-sektion kan rumme op til 50 blokke, og kategorier tæller med. Har du brug for flere, så tilføj en FAQ-sektion mere til samme skabelon.

Kan mit team redigere spørgsmålene senere?

Ja. Hver kategori, hvert spørgsmål og hvert svar er en blok i temaeditoren. At tilføje, fjerne eller flytte dem kræver ingen kode.

Del denne artikel