Produktboksdesigner — Oversikt

Produktbokser er kortene som viser produktene dine i kategorilister, søkeresultater og utvalgte produktseksjoner i nettbutikken. Produktboksdesigneren er verktøyet der du bestemmer nøyaktig hva som skal vises på disse kortene — hvilken informasjon som skal med, i hvilken rekkefølge og hvordan det skal se ut.

Hvor du finner den

Gå til Design i hovedmenyen og velg Produktboksdesigner.

Frem til lansering må du bruke direktelinken /admin/designs/product-box-designer eller trykke på banneret i designbyggeren.

Slik fungerer byggeren

En produktboks er bygd opp av to nivåer: seksjoner og blokker.

En seksjon er en horisontal rad på kortet. Du kan stable flere seksjoner oppå hverandre. Hver seksjon har sin egen bakgrunn, indre luft, justering og avstand.
En blokk er ett enkelt innholdselement inne i en seksjon — for eksempel et bilde, en tittel, en pris eller en knapp.

Standardoppsettet har tre seksjoner: Topp, Midt og Bunn. Du kan gi dem nye navn, endre rekkefølgen, legge til nye eller slette dem.

Legge til seksjoner og blokker

For å legge til en ny seksjon klikker du på Seksjon i sidebaren. For å legge til en blokk i en bestemt seksjon, klikk Legg til ny blokk på den aktuelle seksjonen.

Blokker kan dras for å endre rekkefølgen innen en seksjon. Du kan også dra en blokk fra én seksjon til en annen.

Konfigurere seksjoner og blokker

Klikk på innstillingsikonet på en seksjon eller blokk for å åpne innstillingene i sidebaren. Endringene vises i forhåndsvisningen med en gang — du trenger ikke lagre for å se resultatet.

Forhåndsvisningen

Forhåndsvisningen til høyre viser fire ekte produkter fra katalogen din, gjengitt med de gjeldende innstillingene. Endringene du gjør vises i sanntid.

Hvis du heller vil jobbe med eksempeldata i stedet for ekte produkter, kan du bytte til dummy-datamodus. Dette er nyttig hvis produktene dine har ujevn data som gjør det vanskelig å vurdere designet.

Globale innstillinger

Klikk på Temainnstillinger i sidebaren for å åpne innstillinger som gjelder hele kortet, ikke bare en enkelt seksjon eller blokk.

Innstilling	Hva den gjør
Bakgrunnsfarge	Kortets overordnede bakgrunn
Padding	Avstand mellom innholdet og kortets kanter
Hjørneradius	Avrunder kortets hjørner
Ramme	Legger til en omriss rundt kortet
Skygge	Legger til en skygge bak kortet
Innholdsjustering	Standard tekstjustering for hele kortet
Hover-effekt	Animasjon som spilles av når kunden holder musen over kortet
Hover-bakgrunnsfarge	Bakgrunnsfarge som aktiveres ved hover
Hover-skygge	Skygge som aktiveres ved hover
Animasjonsvarighet	Hvor raskt hover-animasjoner spilles av (f.eks. 300ms)
Vis kundeklubb-rabattetikett	Viser en etikett på produkter med kundeklubb-rabatt
Vis kundeklubb-bunkerabattetikett	Viser en etikett på produkter med bunkerabatt for klubbmedlemmer

Tilgjengelige hover-effekter: Ingen, Fargeoverlegg, Zoom, Bildezoom, Løft, Tilt, Glød, Flyt, Glans, Omriss, Livlig, Puls

Maler

Du kan lagre flere konfigurasjoner som navngitte maler og bytte mellom dem. Dette er nyttig hvis du vil ha ulike kortdesign — for eksempel et kompakt kort for vanlige kategorilister og et mer innholdsrikt oppsett for utvalgte produkter.

For å opprette en mal åpner du mal-menyen øverst i byggeren og velger Opprett ny mal. Gi den et navn, så genereres en URL-vennlig slug automatisk.

Når du bytter til en annen mal, vil ulagrede endringer i den gjeldende malen gå tapt. En bekreftelsesdialog advarer deg før dette skjer.

Lagring

Klikk Lagre og publiser når du er fornøyd med designet. Inntil du lagrer, vises endringene kun i forhåndsvisningen — ingenting endres i butikken.