Logo, farver og skrift i Shopify-temaet

Temaeditoren har hundrede indstillinger. Cirka ti af dem betyder noget. Her er de ti.

Logo

Upload i SVG hvis du har det. Ellers PNG med gennemsigtig baggrund, i cirka dobbelt visningsstørrelse, så det er skarpt på skærme med høj opløsning.

Sæt logobredden manuelt frem for at lade temaet gætte. På mobil vil du typisk have det mindre end standarden foreslår, fordi headeren er trang.

Har du kun logoet som JPG med hvid baggrund, så få det fritlagt inden du uploader. Et logo med en hvid kasse omkring ser forkert ud på enhver baggrundsfarve der ikke er hvid.

Farver: byg ét farveskema, ikke ti

Moderne Shopify-temaer arbejder ikke med løse farver på enkelte elementer. De arbejder med farveskemaer. Et skema er et sæt farver, der hører sammen (baggrund, tekst, knap, knaptekst, kant), og du sætter derefter et skema på hver sektion. Du kan have langt flere skemaer, end du får brug for.

Sæt det første skema rigtigt op, og lad resten af butikken bruge det:

1. Tekstfarven. Næsten sort. Ikke helt sort, det er hårdt at læse på skærm.
2. Baggrunden. Hvid eller en meget lys tone.
3. Aktionsfarven. Den farve dine knapper har. Kun den.

Lav højst ét skema mere, et omvendt til mørke sektioner, og brug så de to overalt. Modstå fristelsen til at give hver sektion sit eget skema.

Aktionsfarven skal have kontrast nok, og der findes et tal for det. Teksten på din "læg i kurv"-knap skal have et kontrastforhold på mindst 4,5:1 mod knappens egen farve. Er knapteksten stor, er kravet 3:1. Selve knappen skal derudover have mindst 3:1 mod den baggrund den ligger på, så folk kan se hvor den slutter. Det er kravene i WCAG, og de er tærskler: 4,49:1 er ikke godkendt. En lys farve på hvid baggrund fejler typisk begge dele. Slå tallene op i en kontrast-tjekker frem for at stole på øjet.

Typografi

To skrifttyper. En til overskrifter, en til brødtekst. Nogle gange den samme til begge, og det er helt fint.

Brødtekst på 16px er en god tommelfingerregel på mobil. Der findes ikke noget officielt mindstekrav, men mange temaer står som standard lavere, og det er i underkanten. Sæt den op og læs siden på din egen telefon.

Bliv ved skrifttyperne i temaets vælger. Den liste kan ikke udvides: den er låst til Shopifys eget skriftbibliotek. Vil du have din egen skrift, skal en udvikler uploade filerne og koble dem på med CSS. Det er ikke en indstilling, du kan trykke dig til. Systemskrifterne i vælgeren hentes slet ikke ned, og de øvrige biblioteksskrifter bliver forudindlæst af temaet. En skrift der hentes fra et fremmed domæne koster dig en ekstra forbindelse på hver sidevisning.

Det du kan springe over

Tunge animationer. Bløde overgange på knapper koster ingenting, men scroll-udløste effekter og parallax flytter rundt på indholdet, mens siden loader. Det er præcis det, Shopifys ydelsesoversigt måler dig på, og det er også det, der får folk til at trykke forkert.

Sektioner du ikke har indhold til. En tom "Som set i"-sektion med pladsholderlogoer er værre end ingen sektion.

Popups om nyhedsbrev på første besøg. De virker på papiret og irriterer i praksis. Vent til folk har set to sider.

Test på din telefon, ikke din skærm

Sidste skridt hver gang: åbn butikken på din egen telefon og gennemgå forside, kategoriside, produktside, kurv. Det er den rækkefølge kunderne går i, og det er den eneste test der tæller.

Når designet står, er næste opgave betaling.

Designet er din del. Data, varianter, kunder, ordrer og redirects er vores, og du kan se hvad der flytter med.