Avansert design med tilpasset CSS

Tilpasset CSS gir deg muligheten til å justere designet på nettbutikken ned i minste detalj. Dette verktøyet åpner for spesialtilpasninger som går utover de standardvalgene som finnes i designbyggeren.

Viktig info

Ved bruk av tilpasset CSS er man selv ansvarlig for oppdatering og vedlikehold av koden. Endringer og oppdateringer i plattformen og/eller designbyggeren tar ikke høyde for eventuell bruk av tilpasset CSS.

Slik kommer du i gang

For å bruke tilpasset CSS må du navigere til riktig meny i systemet:

Klikk på menyen "Temainnstillinger" i toppmenyen.
Klikk deretter på "Temainnstillinger" og "Tilpasset CSS". Sørg for at Avansert modus er aktivert.
Skriv inn koden din i tekstbehandleren og klikk Oppdater.
Viktig: Forhåndsvisningen vil nå oppdatere seg, men du må klikke Lagre og oppdater i sidemenyen for at endringene skal bli synlige for kundene dine.

Viktig informasjon

Bruk av CSS skjer på eget ansvar. Kundeservice supporterer normalt ikke egendefinert kode, så du må selv ha kontroll på endringene som gjøres.

Bruk av Tilpassede Klasser

En "klasse" fungerer som en merkelapp du fester på et element. Ved å gi et element en klasse, kan du målrette designet ditt nøyaktig.

Designfleksibilitet: Lag unike knapper eller bokser som skiller seg ut.
Detaljert kontroll: Juster alt fra spesifikke avstander til unike fonter.
Effektivt vedlikehold: Endrer du stilen til en klasse i CSS-filen, oppdateres alle elementer med denne "merkelappen" samtidig.

CSS-variabler

CSS-variabler (også kjent som "custom properties") fungerer som smarte beholdere for verdier du bruker ofte i designet ditt, slik som farger, avstander eller skrifttyper. I stedet for å skrive den samme fargekoden 50 ganger, lagrer du den i en variabel én gang.

Kommende funksjonalitet

CSS variabler er ikke lansert og dermed ikke tilgjengelig for bruk, ennå.

Hvorfor bruke variabler?

Den største fordelen med variabler er sentralisert styring. Tenk deg at du har brukt en spesifikk blåfarge på alle knapper, rammer og titler i nettbutikken din.

Uten variabler: Hvis du vil bytte til grønn, må du finne og endre fargekoden manuelt på hvert eneste sted i koden.
Med variabler: Du endrer fargekoden kun i variabelen, og hele nettbutikken oppdateres umiddelbart.

Slik fungerer det i Designbyggeren

I vårt system blir alle farger du velger i Temainnstillinger automatisk gjort om til variabler. Dette skjer i bakgrunnen for å gjøre designet ditt mer fleksibelt.

Eksempel: Tekstfarge

Hvis du setter tekstfargen din til mørkegrå (#181818) i innstillingene, får denne fargen navnet --text-color.

Alt innhold som er koblet til denne variabelen vil vise fargen #181818.
Hvis du senere endrer tekstfargen til sort (#000000) i temainnstillingene, vil variabelen --text-color automatisk sende den nye fargen ut til alle tekstfelt i butikken.

Praktisk bruk i Tilpasset CSS

Du kan bruke disse variablene når du skriver din egen CSS-kode. Her er et eksempel på hvordan du kan tvinge en produktboks til å alltid bruke butikkens hovedfarge (primærfarge) som bakgrunn:

CSS

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

Ved å bruke var(--primary-color) i stedet for en fast fargekode som #FF0000, sikrer du at produktboksen alltid matcher resten av butikken, selv om du skulle bytte profilfarger senere.

Opprett egne variabler

Du er ikke begrenset til de innebygde variablene. Du kan lage dine helt egne under Merkevare -> Tilpasset CSS:

Definer variabelen: Legg den i :root for at den skal være tilgjengelig overalt.
Bruk variabelen: Kall den opp med var()-funksjonen.

CSS

:root {
  --min-spesial-farge: #ffcc00;
}

.min-knapp {
  background-color: var(--min-spesial-farge);
}

Merk: Foreløpig er det kun farger som støtter bruk av variabler direkte inne i designbyggerens menyer, men i Tilpasset CSS kan du bruke variabler til alt fra bredder til marger.

Ferdige CSS-oppskrifter for Produktboks V7

For å gjøre tilpasningen av nettbutikken din enklere, har vi samlet de mest etterspurte CSS-reglene for Produktboks V7. Disse kodene kan du lime direkte inn under Merkevare og Tilpasset CSS.

Skjul lagerstatus

Produktboks V7 viser som standard lagerstatus for hvert produkt. Hvis du ønsker et renere design uten denne informasjonen, kan du bruke denne koden:

.product-thumb-info .__pb-info-7 .pb_stock_info {
  display: none;
}

Tilpass farger på kjøpsknappen

I denne versjonen av produktboksen har kjøpsknappen en fast farge. Ved å bruke koden under kan du overstyre denne slik at den matcher din profil perfekt. Du kan bruke fargenavn (som red), HEX-koder (#FF0000) eller RGBA.

.product-thumb-info .__pb-info-7 .__pb-button .button-default{
  background-color: red; /* Background color */
  color: white; /* Text color */
  fill: white; /* Icon color */
}

Slik fungerer koden

display: none; : Denne kommandoen forteller nettleseren at elementet skal fjernes helt fra visningen.
background-color: Bestemmer fyllfargen inne i selve knappen.
color: Bestemmer fargen på teksten "Kjøp" eller "Legg i kurv".
fill: Brukes spesifikt for å endre farge på grafiske ikoner (SVG) som ligger inne i knappen.

Tips for fargevalg

For å sikre at knappen er enkel å lese, bør du alltid ha en god kontrast mellom bakgrunnsfargen og tekstfargen. Hvis du har en lys bakgrunnsfarge, bør du bruke mørk tekst (f.eks. color: black;).