# Utseende

> Ställ in butikens färger, typsnitt, hörnradie, favicon och logotyp.



Under Utseende bestämmer du butikens grafiska profil. Inställningarna gäller hela butiken, så du behöver bara göra dem en gång. Sektionerna i [webbeditorn](/channels/shop/web-editor) hämtar sedan färger och typsnitt härifrån.

Gå till <Path>Butik → Utseende</Path>. Ändringarna sparas när du klickar **Spara** i fältet som dyker upp när du har osparade ändringar.

<Screenshot id="butik-utseende" alt="Sidan Utseende med färger, typsnitt och hörnradie" />

## Färger

Börja med butikens **primärfärg**. Den används på knappar, länkar och accenter. Välj en **Förinställd färg** eller ange en **Egen färg** med hexkod.

Butiken har också ett **mörkt tema**. Där väljer du en **Mörk nyans** och en **Mörkhetsnivå**, eller en **Egen mörk färg**.

<Callout type="tip" title="Avancerade färger">
  Vill du styra varje färg för sig — för både ljust och mörkt läge — byter du **Läge** från **Standard** till **Avancerad** och öppnar **Färgtokens**. För de flesta räcker primärfärgen.
</Callout>

## Typsnitt

Du väljer typsnitt separat för **Brödtext** och **Rubriker**, och kan ställa in vikten.

* **Google**: välj bland Google Fonts.
* **Egen fil**: ladda upp ett eget typsnitt. Formaten woff, woff2, ttf och otf fungerar, och woff2 rekommenderas. Filen får vara högst 5 MB.

<Callout type="warning">
  Du ansvarar själv för att du har rätt att använda typsnittet på webben.
</Callout>

## Hörnradie

Hörnradien avgör hur rundade knappar, kort, bilder och formulär är. Välj en förinställning under **Rundning**. Väljer du **Avancerad** kan du under **Ytor** ställa in knappar, kort, avatarer, badges, tooltips, bilder, dropdown och formulär var för sig.

## Favicon

Faviconen är den lilla ikonen i webbläsarens flik. Har du ingen favicon används primärfärgen.

## Logotyp

Logotypen visas i sidhuvudet och i kassan. Ladda upp två varianter:

* **Logotyp (ljus bakgrund)**
* **Logotyp (mörk bakgrund)**

SVG, PNG och andra bildformat fungerar. Med två varianter syns logotypen tydligt oavsett om besökaren ser butiken i ljust eller mörkt läge.

## Förhandsgranska innan du sparar

Klicka **Förhandsgranska** för att se hur startsidan ser ut med dina nya inställningar innan du sparar dem.

## Ljust eller mörkt tema för besökaren

Under **Färger** väljer du i fältet **Butik** om butiken ska följa besökarens enhet (**Standard**), alltid vara **Ljus** eller alltid **Mörk**. Tema per sektion och för sidhuvud och sidfot väljer du i editorn. Läs mer i [Sidor och sektioner](/channels/shop/pages-and-sections).

## Ikoner

I alla ikonfält i editorn finns ett ikonbibliotek med sökfunktion. Sök på till exempel "kaffe" eller "karta" och välj en ikon.