Anpassad CSS

Med anpassad CSS kan du anpassa designen på din butik in i minsta detalj.
Genom verktyget kan du göra speciella anpassningar som annars inte är möjliga i byggaren.

För att använda anpassad CSS måste du först öppna "Varumärkesprofilering" i toppmenyn.
Härifrån går du till "Anpassad CSS". Se till att Avancerat läge är aktivt.

Första gången du klickar på menyalternativet "Anpassad CSS" öppnas ordbehandlaren automatiskt och du kan ange önskad kod.

När du är klar klickar du på "Uppdatera". Förhandsgranskningen kommer då att uppdateras, men du måste klicka på "Spara och uppdatera" i sidomenyn för att ändringarna ska träda i kraft i webbutiken.

Viktigt vid användning av CSS

Anpassad CSS används, och sker, på butikens egen risk och supporteras inte av vår kundtjänst.

Som butiksägare måste du ha kontroll över de ändringar som görs där om inget annat överenskommits.

CSS-variabler

Kommande funktionalitet

CSS-variabler har inte lanserats och är därför inte tillgängliga för användning ännu.

En CSS-variabel, även kallad CSS-egenskap, är ett värde som definieras av en utvecklare och kan återanvändas i ett CSS-dokument.

I designverktyget definieras alla färger som ställs in i temainställningarna som variabler.

Exempel
I temainställningarna väljer du att ställa in textfärg till färgkod #181818
Textfärg har variabel —text-color och kan sedan återanvändas på flera ställen, och allt som använder variabeln kommer att få färgen inställd i temainställningarna. Om du ändrar färgkoden i temainställningarna kommer allt som använder den här variabeln också att uppdateras.

Exempel på användning av variabler

I exemplet nedan har en variabel använts för att ställa in bakgrundsfärgen för produktboxen.

Variabeln som används är primärfärg som ställs in i temainställningarna. Produktrutan kommer därför att ha den primära färgen som bakgrund. Om detta ändras senare kommer bakgrundsfärgen på produktrutan också att ändras.

.product-thumb-info {
  background-color: var(--primary-color);
}

Skapa dina egna variabler

Du behöver inte bara använda de fördefinierade variablerna från temainställningarna. Det är också möjligt att skapa egna variabler och sedan återanvända dessa i designverktyget.

Skapa variabel

Separata variabler måste skapas, och eventuellt ändras, i anpassad CSS.

1. Öppna temainställningar

2. Öppna anpassad CSS

CSS-variabler definieras med två bindestreck (--) följt av ett variabelnamn. Du kan till exempel definiera en variabel för en färg så här:

:root {
  --my-new-variable: #007bff;
}

Se till att variabeln är placerad i :root { * } för att göra den tillgänglig för all CSS.

Du kan sedan använda den här variabeln i din CSS-kod med hjälp av funktionen var():

button {
  background-color: var(--my-new-variable);
}

Använd din egen variabel i designverktyget

Du behöver inte bara använda dina egna variabler i anpassad CSS, du kan också använda dem direkt i designverktyget.

1. Hitta blocket/avsnittet där du vill använda anpassad variabel

2. Navigera till inställningen för bakgrundsfärg/textfärg

3. Klistra in variabelnamn i fältet där du vanligtvis har en HEX-kod

I exemplet ovan skulle du skriva i fältet var(--my-new-variable)

Färginställningen kommer nu att använda den färg som definierats i variabeln som ställdes in i anpassad CSS.

Information

Endast färger stöder variabler just nu.