Produktside: Kjøpsknapper
Kjøpsknapper
Kjøpsknapper-blokken er hovedhandlingen på produktsiden — «Legg i handlekurv»-/«Kjøp nå»-knappen, eventuelt med antallsfelt, ønskeliste-hjerte, fargevalg-knapp og varsleknapp ved utsolgt. Dette er blokken med flest innstillinger i hele byggeren.
Den gode nyheten: de fleste butikker trenger bare å sette en håndfull innstillinger. Standardene tar resten.
Hva den viser
En kjøpsknapp stylet for å passe merkevaren din, eventuelt kombinert med:
- Et antallsfelt ved siden av eller over knappen.
- En ønskelisteknapp ved siden av.
- En farge/variant-knapp (for produkter med fargevarianter).
- En varsleknapp (for utsolgte produkter, i stedet for kjøpsknappen).
Skjermbilde trengs: En produktside som viser en «Legg i handlekurv»-knapp med antallsfelt og hjerteikon ved siden av
Hovedknapp-styling
Innstilling | Hva den styrer |
|---|---|
Knappetype | Den visuelle stilen på knappen (primær, omriss osv.) |
Tekst | Knappens etikett (f.eks. «Legg i handlekurv») |
Fontstørrelse | Størrelsen på knappeteksten |
Fontvekt | Hvor fet teksten er |
Teksttransformasjon | Store bokstaver, små bokstaver, stor forbokstav eller ingen |
Bakgrunnsfarge | Knappens fyll |
Tekstfarge | Knappens tekstfarge |
Bakgrunn ved hover | Fyll ved hover |
Tekstfarge ved hover | Tekstfarge ved hover |
Bakgrunn ved utsolgt | Fyll når produktet er utsolgt |
Tekstfarge ved utsolgt | Tekstfarge når utsolgt |
Kantlinjestil | Heltrukket, stiplet eller ingen |
Kantlinje | Bredden på kantlinjen |
Kantlinjefarge | Fargen på kantlinjen |
Kantlinjefarge ved hover | Kantlinjefarge ved hover |
Hjørneradius | Avrunder knappens hjørner |
Bruk global radius | Bruk temaets globale hjørneavrunding i stedet |
Margin | Avstand rundt blokken |
Varsleknapp (utsolgt)
Når et produkt blir utsolgt, kan du erstatte kjøpsknappen med en varsleknapp.
Innstilling | Hva den styrer |
|---|---|
Vis varsleknapp | Bruk varsleknappen når utsolgt |
Hjørneradius på varsel | Avrunder varselknappens hjørner |
Tekstfarge på varsel | Tekstfarge på varselknappen |
Tekstfarge på varsel ved hover | Tekstfarge ved hover |
Bakgrunn på varsel | Fyll på varselknappen |
Bakgrunn på varsel ved hover | Fyll ved hover |
Antallsvelger
Innstilling | Hva den styrer |
|---|---|
Vis antall | Vis et antallsfelt sammen med knappen |
Ønskelisteknapp
Innstilling | Hva den styrer |
|---|---|
Vis ønskeliste | Vis et hjerteikon ved siden av kjøpsknappen |
Skill ønskeliste fra knappen | Plasser ønskelisten som eget element framfor å være festet |
Stil på ønskeliste | Velg mellom fylt eller omriss-variant |
Bakgrunn på ønskeliste | Bakgrunn på ønskelisteikonet |
Bakgrunn på ønskeliste ved hover | Bakgrunn ved hover |
Fyllfarge på ønskeliste | Fargen på hjerteikonet |
Fyllfarge ved hover | Hjertefarge ved hover |
Fargevalg-knapp
For produkter med flere fargevarianter kan du vise en egen knapp som åpner en fargevelger (i stedet for eller i tillegg til den vanlige variantnedtrekksmenyen).
Innstilling | Hva den styrer |
|---|---|
Vis fargevalg-knapp | Vis fargevelger-knappen |
Tekst på fargevalg-knapp | Etiketten på knappen |
Hjørneradius på fargevalg-knapp | Hjørneradius |
Bakgrunn på fargevalg-knapp | Fyll |
Tekstfarge på fargevalg-knapp | Tekstfarge |
Bakgrunn på fargevalg-knapp ved hover | Fyll ved hover |
Tekstfarge på fargevalg-knapp ved hover | Tekstfarge ved hover |
Tips
- Velg én primær knappestil og hold deg til den i hele butikken. Kjøpsknapper-blokken er det ene stedet der konsekvens virkelig betyr noe — kunder lærer å gjenkjenne «dette er kjøpsknappen» på sekunder.
- For de fleste butikker er riktig oppsett: synlig antall, synlig ønskeliste, ingen fargevalg-knapp. Fargevalg-knappen er bare nyttig på svært visuelle mote- eller malingsbutikker.
- Sett alltid fargene for utsolgt (bakgrunn og tekst) — uten dem ser en utsolgt knapp identisk ut med en aktiv.
- Bruk tydelig handlingsorientert tekst («Legg i handlekurv», «Kjøp nå») framfor passive etiketter («Fortsett», «Send inn»).