Produktsiden

Denne guiden hjelper deg med å sette opp og optimalisere produktsidene i din nettbutikk. Ved å strukturere innholdet riktig forbedrer du brukeropplevelsen og øker sjansen for salg.

1. Oversikt over Produktsiden

Produktsiden er delt inn i ulike seksjoner og blokker. Når du gjør endringer i malen, vil dette gjelde for alle produkter i butikken. Ønsker du unike tilpasninger for enkeltprodukter, kreves det bruk av tilpasset CSS.


2. Produktbildeseksjonen

Denne seksjonen er plassert øverst på siden og er avgjørende for førsteinntrykket.

Generelle innstillinger

Her kontrollerer du rammeverket rundt bildene dine:

  • Bakgrunnsfarge: Endrer fargen som ligger bak selve produktbildet.
  • Seksjonsbredde: Basert på et system med 8 kolonner. Velger du 4 kolonner, vil seksjonen dekke halvparten av sidens bredde. Du kan sette ulike verdier for PC, nettbrett og mobil.
  • Avstand (Margin): Justerer luft på utsiden av seksjonen for å skape avstand til andre elementer.
  • Polstring (Padding): Justerer luft på innsiden av seksjonen.

Bilde- og karusellfunksjoner

For å gi kunden en god visuell opplevelse kan du justere følgende:

  • Lysbildefremvisning: Lar kunden klikke på bildet for å åpne det i et større popup-vindu.
  • Bildebredde: Angi nøyaktig bredde for å sikre rask innlasting uten å bruke unødvendig store filer.
  • Navigasjonspiler: Velg om du vil vise piler over hovedbildet eller miniatyrbildene. Du kan tilpasse farge og form på disse.
  • Automatisk avspilling: Bilder roterer automatisk etter et valgt antall sekunder.
  • Lazy load: Denne funksjonen utsetter innlasting av bilder til kunden skroller ned. Det anbefales å ha denne avslått for bilder øverst på siden for å sikre at de vises umiddelbart.

3. Produktkjøpseksjonen

Dette er den viktigste delen av siden. Her finner kunden kritisk informasjon og selve kjøpsknappen. Seksjonen er bygget opp av flyttbare blokker som du kan sortere ved å dra og slippe.

Tilgjengelige informasjonsblokker

  • Tittel: Viser navnet på produktet. Du kan også velge å vise produsent eller merkevare her, samt justere tekststørrelse.
  • Pris: Viser gjeldende pris. Her kan du også fremheve tilbudspriser og vise nøyaktig rabattprosent.
  • Lagerstatus: Viser om varen er på lager. Denne blokken henter data direkte fra din avanserte lagerstyring.
  • Vurdering: Viser kundenes tilbakemeldinger og stjernerangering for produktet.
  • Egendefinert tekst: En blokk som støtter både ren tekst og HTML-kode for spesielle beskjeder.

4. Viktige tips for oppsett

  • Symmetri: Sørg for at bildebredden og tekstkolonnen harmonerer, spesielt på PC-visning.
  • Prioritering: Plasser den viktigste informasjonen (Tittel, Pris, Kjøp-knapp) høyt oppe i kjøpsseksjonen.
  • Mobiloptimalisering: Sjekk alltid hvordan kolonnebredden ser ut på mobilskjermer for å unngå at innholdet blir for smått.


Var denne artikkelen hjelpsom?