Hvis du vil vælge farverne til en Shopify-butik, skal du starte fra tre roller: en neutral base, der gør det nemmere at læse, en hovedfarve, der udtrykker mærket og en accentfarve, der er forbeholdt vigtige handlinger. En effektiv palet indeholder få farver, forbliver konsistent på tværs af alle sider og bevarer tilstrækkelig kontrast på både desktop og mobil.
Giv en bestemt rolle til hver farve
En farve skal udføre en stabil funktion i grænsefladen. Hvis den samme blå fungerer som baggrund, link, sekundær knap og fejlmeddelelse, ved den besøgende ikke længere, hvad han skal se på.
Neutrale farver
Off-white, meget lysegrå, næsten sortblå eller dyb grå strukturerer baggrunde og tekster. De optager størstedelen af siden og giver plads til det producerede visuelle.
Hovedfarven
Det forbinder logoet, visse titler, grafiske elementer og stærke områder. Det skal forblive genkendeligt uden at invadere hele butikken.
Accentfarve
Reserver det til vigtige knapper, nyttige badges eller prioriterede oplysninger. Dens sjældenhed giver det mere effekt end dens mætning.
Funktionelle farver
Succes, fejl, alarm, pause eller validering skal forblive forståelig. Tilføj altid tekst eller ikon: farve alene er ikke nok.
En simpel seks-trins metode
Bestem dig ikke alene ud fra logoet. En stilfuld farve på et visitkort kan blive trættende, når det dækker en fuld skærm. Test paletten med rigtige titler, fotos, priser, variationer og knapper.
Tre eksempler på balancerede paletter
Disse eksempler tjener som udgangspunkt. Den rigtige kombination afhænger af de produkter, fotografering, positionering og farver, der allerede er knyttet til mærket.
Premium sober
Midnatsblå, meget lys baggrund og mat guld accent. Velegnet til en high-end præsentation, hvis guldet forbliver dekorativt eller modtager tilstrækkelig mørk tekst.
Varm naturlig
Dybgrøn, elfenben og terracotta. Denne palet fungerer godt sammen med naturlige materialer, forudsat at du bevarer læsbarheden af små tekster.
Dynamisk moderne
Marineblå, lyseblå og orange. Blå organiserer grænsefladen; orange henleder opmærksomheden på en valgt handling, uden at blive vist på hver komponent.
Sød redaktionel
Lilla antracit, lyserød hvid og dæmpet hindbær. En blød palet forbliver professionel, hvis teksterne og knapperne bevarer en klar forskel i luminans.
Kontrast: reglen, der kommer før æstetik
For dagligdags tekst, tilstræbe mindst en kontrastforhold på 4,5:1. For virkelig stor tekst, minimum tærskel er 3:1. De nødvendige ikoner, grænser og visuel information skal også forblive skelnelige. Disse tærskler kommer fra WCAG anbefalinger af W3C.
| Element | Kontrol anbefales | Hyppig fejl |
|---|---|---|
| Fælles tekst | Kontrast på mindst 4,5:1 med bunden | Grå for lys på hvid baggrund |
| Hovedknap | Læsbar tekst, kontur eller identificerbar form | Hvid tekst på lys farve for lys |
| Link i et afsnit | Kontrasterende farve og understregning eller andet spor | Forskel kun mærkbar efter farve |
| Fejlmeddelelse | Farve, ikon og eksplicit tekst | Felt kun markeret med en rød kant |
| Tastaturtilstand | Synlig fokuskontur på alle baggrunde | Fokus fjernet af æstetiske årsager |
Hvordan anvender man palet i Shopify?
I Shopify tema editor, farveskemaer omfatter baggrunde, tekst, links, kanter og knapper. Anvend et par ensartede diagrammer til kompatible sektioner snarere end at oprette en ny kombination for hver blok.
Hovedklart diagram
Hvid eller meget lys baggrund, mørk tekst, synlige links. Brug den til størstedelen af kollektioner, produktark og indhold.
Mørkt mønster
Reserver det ved sidefoden, redaktionelt indlæg eller stærk sektion. Tving klare tekster og celler til at bevare deres egen farve.
Accentordning
Brug den lejlighedsvis til en meddelelse eller opfordring til handling. Kontrollér alle tilstande: normal, besøgt, svævet over, deaktiveret og fokus.
Konsekvent kasse
Tag mærket tilbage uden at overopkræve betalingen. Kontrast, forståelse af felter og kontinuitet med butikken forbliver prioriteter.
For at udvide dette arbejde, også konsultere handlingsknapguiden og guiden til den mobile oplevelse.
Fejl, der gør en butik inkonsekvent
Multiplicer accenter
Tre lyse farver, der bruges med samme intensitet, konkurrerer med hinanden. Den besøgende kan ikke længere skelne knappen, badget og de sekundære oplysninger.
Farve alle baggrunde
De producerede fotos mister præcision, og siden bliver trættende. En neutral base giver generelt en mere stabil ramme.
Skift afhængigt af siderne
En blå knap på startsiden, grøn på kortet og orange i kurven svækker den visuelle indlæring af kurset.
Glem tekniske tilstande
Besøgte links, deaktiverede knapper, fejl, fokus og udvalgte varianter bør testes, især efter tilføjelse af et program.
Hvilken service skal man vælge efter behov?
Tjekliste før validering af farverne
- Paletten indeholder en base, en hovedfarve og en accent.
- Hver farve bevarer den samme rolle på alle sider.
- Den nuværende tekst opnår tilstrækkelig kontrast til dens baggrund.
- Knapperne forbliver læsbare i alle deres tilstande.
- Links identificeres ikke udelukkende ved deres farve.
- Fejlmeddelelser bruger også tekst eller et ikon.
- De producerede billeder forbliver trofaste og godt løsrevet fra baggrunden.
- Mørkt skema pålægger ikke hvid tekst på lyskort.
- Pallen styres ved 375 px bredde.
- Velkomsten, kollektioner, kort, kurv og kassen testes.
Ofte stillede spørgsmål om Shopify Store Colors
Hvor mange farver skal du bruge på en Shopify butik?
Tre hovedroller er ofte nok: en neutral base, en brandfarve og en accent. Yderligere nuancer kan bruges til grænser, sekundære baggrunde og funktionelle tilstande, uden at blive nye dominerende farver.
Hvilken farve sælger mest?
Ingen farve garanterer mere salg. Klarhed i tilbud, knapsynlighed, kontrast og konsistens i rejsen betyder mere end en såkaldt universel konverteringsfarve.
Skal knappen Tilføj til kurv være grøn?
Nej. Frem for alt skal den adskille sig fra miljøet, forblive i overensstemmelse med mærket og præsentere læsbar tekst. Den samme handlingsfarve bør bevare den samme rolle på hovedsiderne.
Kan vi bruge sort baggrund på hele butikken?
Ja, hvis produkterne, teksterne, felterne og interaktive tilstande forbliver perfekt læsbare. Et mørkt univers kræver flere kontroller og kan være mindre egnet til bestemte fotografier eller kategorier.
Hvilke kontraster skal respekteres for teksterne?
Sigt efter mindst 4.5:1 for dagligdags tekst og 3:1 for virkelig stor tekst. Funktionel information og vigtige visuelle indikatorer bør også forblive skelnelige.
Hvordan ændrer man farver i Shopify?
Åbn temaeditoren, derefter temaindstillingerne og afsnittet Farver. Afhængigt af temaet kan du administrere farveskemaer og anvende dem på kompatible sektioner.
Skal vi bruge logoets farver præcist?
Nej. Logoet giver et grundlag, men grænsefladen har brug for neutrale, kontraster og funktionelle tilstande. Nogle logofarver kan bibeholdes som accenter frem for hovedbaggrunde.
Hvordan tester man en ny palet uden at forstyrre butikken?
Arbejd på en kopi af temaet, anvend paletten på et par repræsentative skabeloner, og tjek derefter computer, mobil, variationer, indkøbskurv, formularer og kassen, før du går live.
Byg en klar palet, før du dekorerer butikken
SiteQuiVend kan analysere farvekonsistens, tekst- og knapkontrast og anvendelse på store Shopify-modeller. Målet er at vælge den intervention, der virkelig er nødvendig, fra en målrettet korrektion til en mere global revision.
