Färger

I inställningar för temat kan välja färger. Detta är som att skapa en färgpalett som din butik kan använda, tidigare kallat varumärkesprofilering.

Välj färger:

• Du kan bestämma vilka färger dina knappar, texter och bakgrunder i din butik ska ha.

• Du kan till exempel bestämma att alla knappar ska vara blå, men när man för muspekaren över knappen (hover) ändras färgen till en annan.

Se ändringarna:

• När du ändrar en färg kan du se hur den ser ut direkt i förhandsgranskningen.

• Detta gör att du kan experimentera och hitta de färger som bäst passar för din webbutiks varumärke.

Enkelt förklarat, färginställningarna låter dig anpassa utseendet på din webbutik genom att välja och spara färger.

Avancerat läge

Se till att "Avancerat läge" är aktiverat för att komma åt alla inställningar och färger.

Variabler

Färgerna i temainställningarna sparas som CSS-variabler, vilket gör att de kan återanvändas överallt i designverktyget, även genom anpassad kod.

Vad är en variabel?

En CSS-variabel, även känd som en "CSS custom property", är ett sätt att lagra värden som kan återanvändas i din CSS-kod. Tänk på det som en behållare för ett värde, till exempel en färg, en storlek eller ett teckensnitt.

Användning av färger och variabler

När du lägger till ett block som innehåller färginställningar kommer det som standard att använda den färg som är inställd i temainställningarna.

Till exempel; textfärgen i ett block kommer automatiskt att länka till textfärgen i globala inställningar.

Detta indikeras av färgväljaren i blocket med texten Linked to global color och en och en ikon som anger att länken är aktiv. Om du vill ändra till en färg som inte är inställd i temainställningarna kan du ange färgkoden i fältet. Ikonen till höger kommer då att ändras och indikera att länken till den globala färgen har brutits, som så här:

Återställ länk

Om du manuellt har ändrat färgen så att länken bröts, men vill återställa den, kan du klicka på ikonen. Fältet kommer då att länkas till den globala färgen och uppdateras, och ikonen kommer också att uppdateras.

Använda andra variabler

Förutom att använda den globala färgen för ett fält kan du länka fältet till andra färgvariabler från temainställningarna. Du kan till exempel länka textfärg till den primära färgvariabeln.

• Leta reda på det fält vars färg du vill ändra.

• Klicka på knappen för att ändra färg.

• Välj bland variablerna som visas längst ner (håll muspekaren över för att se vilket fält färgen tillhör).

När du väljer en annan variabel än den globala kommer fältet fortfarande att visa länkikonen , men nu kommer namnet på variabeln att visas i fältet. Exempel: var(—primary-color)

Länken till global färg kan återställas på samma sätt som ovan.