Topptekst: Produktinfo
Produktinfo
Produktinfo-blokken viser navnet og prisen på det gjeldende produktet i headeren — men bare når kunden faktisk er på en produktside. På alle andre sider kan den vise reservetekst i stedet, eller ingenting. Den er praktisk for en flytende header som holder produktnavn og pris synlig mens kunden ruller nedover en lang produktside.
Hva den viser
Når noen ser på et produkt, viser denne blokken produktets navn og pris oppe i headeren. Klikk på den ruller tilbake opp til hovedproduktområdet. På sider som ikke er produktsider (forsiden, en kategori, handlekurven) finnes det ikke noe produkt å vise, så blokken viser enten reserveteksten du har skrevet, eller holder seg skjult.
Innstillinger
Innstilling | Hva den styrer |
|---|---|
Vis produktnavn | Vis produktets navn |
Vis produktpris | Vis produktets pris |
Vis reservetekst | Vis reserveteksten din på sider som ikke er produktsider |
Reservetekst | Teksten som vises når det ikke finnes noe produkt (for eksempel butikknavnet eller et slagord) |
Justering | Justerer innholdet til venstre, midtstilt eller høyre |
Tekststyling
Innstilling | Hva den styrer |
|---|---|
Størrelse på produktnavn | Fontstørrelse på navnet |
Farge på produktnavn | Fargen på navnet |
Størrelse på produktpris | Fontstørrelse på prisen |
Farge på produktpris | Fargen på den vanlige prisen |
Farge på tilbudspris | Fargen som brukes når produktet er på tilbud |
Oppsett og synlighet
- Innvendig og utvendig avstand (padding og margin) — plass rundt blokken.
- Bredde-innstillinger for desktop, nettbrett og mobil.
- Egen CSS-klasse og blokkbetingelser for avansert styling og vis/skjul-regler.
Slik oppfører den seg
- Den viser bare produktdetaljer på produktsider. Gjenkjenningen er automatisk — du velger ikke hvilke produkter.
- Klikk på blokken ruller siden jevnt tilbake opp til produktet. Bruker du en flytende header, tar rullingen høyde for headerens høyde slik at produktet ikke skjules bak den.
- Tilbudsprisfargen brukes bare når et produkt faktisk har rabatt, slik at tilbudspriser kan skille seg ut.
Tips
- Denne blokken kommer til sin rett i en flytende header på lange produktsider — kunden ser alltid hva de ser på og hva det koster.
- Sett reservetekst bare hvis du vil at blokken skal være synlig overalt. La den være av, og blokken forsvinner diskret på sider som ikke er produktsider.
- Hold størrelsen på navnet beskjeden. Headeren har lite plass, og lange produktnavn forkortes for å passe.